Node.js アプリケーションの npm run start を並列実行するシェルスクリプトを作ってみた

Node.js のアプリケーションを並列実行したい

ローカルの開発環境で Node.js のアプリケーションを並列実行で動かしたいなと思い、シェルスクリプトで実現してみました。

例えば、プルリクエストの検証をするために
フロントエンドの React アプリを起動して、バックエンドの NestJS アプリを起動したいみたいなケースを想定しています。

docker-compose で起動するなども考えましたが、今回は（雑に）サクッと対処していきます！

.sh ファイルを作成する

macOS Ventura 13.2 で動作確認しています。

想定のディレクトリ構成

以下のようなディレクトリ構成を想定しています。

ターミナルを立ち上げて、それぞれのディレクトリに移動して npm run start して...
という作業を少しでも楽にします。

/Users/taro_yamada/sample-app/
├── frontend/
│   ├── src/
│   └── package.json
└── backend/
    ├── src/
    └── package.json

bootstrap.sh

ポイントは 2 点です。

• 2 行目：ログインIDをクリップボードにコピー
• 6 行目：行末にある & でコマンドを並列実行

bootstrap.sh

#!/bin/zsh

echo '[e-mail]' | pbcopy

cd /Users/taro_yamada/sample-app/frontend
npm run start &

cd /Users/taro_yamada/sample-app/backend
npm run start

なぜ、ログインIDをクリップボードにコピーするのか。

それは...

起動したサービスに 1 秒でも早くログインして、プルリクの検証をおこないたいからです笑

（不要なら削除しちゃってください😉）

実行

以下のように .sh ファイルを実行するだけで OK です。

./bootstrap.sh

Permission denied を解決する

初回実行時には Permission denied が起きることがあります。

これを解決するためには、.sh ファイルに対して実行権限を付与する必要があります。

chmod +x ./bootstarp.sh

注意事項

フロントエンドとバックエンドのそれぞれのサービスでコンソールログを出力している場合が多いと思いますが、ターミナルに同時にログが出力されます。

非常にログが確認しづらいので注意が必要です...😇😇

npm-run-all という選択肢

npm scripts を並列実行してくれるコマンドがあるそうです。

https://github.com/mysticatea/npm-run-all

https://www.npmjs.com/package/npm-run-all

以下のようにルートディレクトリ直下に package.json が存在するディレクトリ構成の場合は、非常に便利そうに活用できそう。

sample-app/
├── frontend/
│   ├── src/
│   └── package.json
├── backend/
│   ├── src/
│   └── package.json
└── package.json

まとめ

久しぶりに .sh ファイルなんて作った気がします。

ほんの少しの作業でも楽にしたい、そんなお話でした🙌🙌