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

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

更新日:2022.07.02 作成日:2020.03.13

このブログではローカルでAPIサーバ(Express)を動かし、HugoのShortcodesから利用しています(2020/03/13現在)。 HugoでAMP対応のブログカードを作る - SIS Lab

そのため、記事を書いて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.tshugo 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

まとめ

npm-run-allのnpmライブラリを利用することで、ローカルにAPIサーバを立ててHugo Serverでのプレビュー表示が簡単に行えるようになりました。

ctrl + cで終了させれば、APIサーバも自動的に停止しますのでプロセスが残って、ポートが重複することもありません。

これでまたちょっとの面倒が解消されました。

参考

npm-run-all - npm

Related contents