Nxを使って、React SPAとNest.jsのAPIを同時にローカルで起動させる方法の覚書です。

意外と日本語記事が見当たらなかったので。

並列実行はnx run-manyをつかう

create-nx-workspaceでプロジェクトを作った場合、npm run nx run-manyで複数プロジェクトにコマンドが実行できます。

$ yarn nx run-many help
 $ nx run-many help
 nx run-many
 Run task for multiple projects
 オプション:
   --help           ヘルプを表示                                           [真偽]
   --version        バージョンを表示                                       [真偽]
   --target         Task to run for affected projects             [文字列] [必須]
   --parallel       Parallelize the command            [真偽] [デフォルト: false]
   --maxParallel    Max number of parallel processes. This flag is ignored if the
                    parallel option is set to false.     [数値] [デフォルト: 3]
   --projects       Projects to run (comma delimited)                    [文字列]
   --all            Run the target on all projects in the workspace        [真偽]
   --runner         Override the tasks runner in nx.json               [文字列]
   --skip-nx-cache  Rerun the tasks even when the results are available in the
                    cache                              [真偽] [デフォルト: false]
   --configuration  This is the configuration to use when performing tasks on
                    projects                                             [文字列]
   --with-deps      Include dependencies of specified projects when computing
                    what to run                        [真偽] [デフォルト: false]
   --only-failed    Only run the target on projects which previously failed
                                                       [真偽] [デフォルト: false]
   --verbose        Print additional error stack trace on failure
 ✨  Done in 0.95s.

--targetで実行するnxのコマンド（NOT npm-scripts）を指定し、--projectsでプロジェクトを指定するか、--allで全部を対象にいれます。

アプリのローカル起動はnx serve

IonicやAngular同様nx serveコマンドで起動します。これをrun-manyで動くようにすればOKです。

並列実行オプション--parallelを忘れずに

run-manyはデフォルトだと直列実行です。そのためserveではどちらか1つしか起動しません。

並列実行させたい場合は、--parallelを追加します。

% yarn nx run-many --target serve --all --parallel 
 yarn run v1.22.5
 $ nx run-many --target serve --all --parallel
   NX  Running target serve for projects: 
 frontend
 api 
 ———————————————————————————————————————————————
   nx run api:serve 
   nx run frontend:serve  Starting type checking service…
 Using 10 workers with 2048MB memory limit
 Type checking in progress…
 Hash: 067ee702cc14ff53ba00
 Built at: 2020-11-25 15:50:35
 Entrypoint main = main.js main.js.map
 chunk {main} main.js, main.js.map (main) 2.19 KiB [entry] [rendered]
 Debugger listening on ws://localhost:59668/9cb25519-11de-4021-863f-47d8ec0cd28d
 Debugger listening on ws://localhost:59669/9cb25519-11de-4021-863f-47d8ec0cd28d
 For help, see: https://nodejs.org/en/docs/inspector
 **
 Web Development Server is listening at http://localhost:4200/
 **
 [Nest] 26106   - 2020-11-25 15:50:36   [NestFactory] Starting Nest application…
 [Nest] 26106   - 2020-11-25 15:50:36   [InstanceLoader] AppModule dependencies initialized +11ms
 [Nest] 26106   - 2020-11-25 15:50:36   [RoutesResolver] AppController {/api}: +102ms
 [Nest] 26106   - 2020-11-25 15:50:36   [RouterExplorer] Mapped {/api, GET} route +2ms
 [Nest] 26106   - 2020-11-25 15:50:36   [NestApplication] Nest application successfully started +1ms
 [Nest] 26106   - 2020-11-25 15:50:36   Listening at http://localhost:3333/api +2ms
 Starting type checking service…
 Using 10 workers with 2048MB memory limit
 ℹ ｢wds｣: Project is running at http://localhost:4200/
 ℹ ｢wds｣: webpack output is served from /
 ℹ ｢wds｣: 404s will fallback to //index.html
 ℹ ｢wdm｣: wait until bundle finished: /

localhost:4200でReactが、localhost:3333でAPIが動き出しました。個別にstartやserveしなくて済むのは便利ですね。

run-many --target=serveは変更のWatchも行う

おそらくNest / React以外でも同様だと思いますが、HMRが有効になっている様子です。

そのため、一度nx run-many --target=serveしておけば、Nx管理下のPJを変更しても自動リロードしてくれます。

とはいえ、依存しているlibrary系はビルドする必要がありますので、同時にnx run-many --target=build --parallel --projects LIB1,LIB2のようなコマンドを並列してやるとよいでしょう。