npm-run-allでローカルAPI serverとHugo serverを同時に実行する

このブログではローカルでAPIサーバ（Express）を動かし、HugoのShortcodesから利用しています（2020/03/13現在）。

HugoでAMP対応のブログカードを作る

そのため、記事を書いてHugoのプレビューを利用する場合は、2つのターミナルで以下のコマンドを実行していましたが、ちょっとだけ面倒です。

API Server: npx ts-node src/app.ts
Hugo Server: hugo server -D

そこでnpm-run-allというライブラリを利用して、1つのターミナルで簡単にできるようにしました。

npm-run-allとは

npm-run-allは、複数のnpmスクリプトを並列もしくは直列で実行するためのCLIツールです。

以下の3つのコマンドが提供されます。

npm-run-all: コマンドオプションにより並列・直列実行、その他複雑な処理が行える
run-p: 並列実行の省略コマンド
run-s: 直列実行の省略コマンド

今回は単純な並列実行のためrun-pを利用します。

npm-run-allで1つのターミナルでAPIサーバとHugoを動かす方法

事前に以下のコマンドでnpm-run-allをインストールします。

npm install npm-run-all --save-dev

package.jsonには、以下の通り設定をしておき、npm startを実行したときに、ts-node src/app.tsとhugo server -Dを並列実行するようにしました。正確にはhugo serverを実行する前にAPIサーバが動作していないとうまくHugoのビルドが行われないのですが、接続タイムアウトになるまでには若干余裕があります。今の所、接続タイムアウトになる前にはAPIサーバ起動できているので、支障は出ていません。

  "scripts": {
    "start": "run-p serve dev",
    "serve": "ts-node src/app.ts",
    "dev": "hugo server -D",
  }

$ npm start
 > [email protected] start /github-pages
 > run-p serve dev
 
 
 > [email protected] serve /github-pages
 > ts-node src/app.ts
 
 
 > [email protected] dev /github-pages
 > hugo server -D
 
 Building sites … Listening on port 6060
 
                   | EN  |  JA   
-------------------+-----+-------
  Pages            |  36 | 1614  
  Paginator pages  |   0 |  155  
  Non-page files   |   0 |    0  
  Static files     | 154 |  154  
  Processed images |   0 |    0  
  Aliases          |  15 |  493  
  Sitemaps         |   2 |    1  
  Cleaned          |   0 |    0  

Built in 6037 ms
Watching for changes in /github-pages/github-pages/{archetypes,content,data,layouts,static,themes}
Watching for config changes in /github-pages/github-pages/config.toml
Environment: "development"
Serving pages from memory
Running in Fast Render Mode. For full rebuilds on change: hugo server --disableFastRender
Web Server is available at http://localhost:1313/ (bind address 127.0.0.1)
Press Ctrl+C to stop