Menu Close
  1. SIS Lab
  2. >
  3. Blog
  4. >
  5. npm-run-allでローカルAPI serverとHugo serverを同時に実行する

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

更新日:2020.03.31 作成日: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
 > meganii.com@1.0.0 start /github-pages
 > run-p serve dev
 
 
 > meganii.com@1.0.0 serve /github-pages
 > ts-node src/app.ts
 
 
 > meganii.com@1.0.0 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

TECH

2019.10.11

AMPページの最適化〜ぼくのAMPサイトがこんなに遅い訳がない〜

TECH

2019.10.06

AMP向けのミニマルCSSフレームワーク「1BX」をHugoに導入した

TECH

2017.12.22

はてなダイアリーからはてなブログ経由で独自ドメインのブログに記事を移行しました

TECH

2017.10.07

HugoのRelated Contentを利用して関連記事を表示する

TECH

2017.01.08

静的サイトジェネレータ「Hugo」でシンプルブログサイトを構築する

TECH

2016.09.08

Circle CIでテストを定期実行する

TECH

2020.03.31

小さな習慣・アウトプット駆動生活〜ブログメンタリングのふりかえり〜

TECH

2020.02.02

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