Node
react.js
YARN
concurrently

NodeサーバーとネストされたReactサーバーを同時に走らせたい時のメモ

ディレクトリ構成

server(Node.js)
├── app.js
├── ...
├── client(React.js)
│   └── ...
│   └── package.json
└── package.json

※パッケージマネージャ: yarn(ハヤくてイケてるぜ)
※nodeサーバー: nodemon(コードの変更を自動検知して再起動してくれるため)

手順

1.concurrentlyを追加

concurrentlyというパッケージを使用し複数のスクリプトを同時に実行できるようにします

$ pwd // -> .../server
$ yarn add concurrently

2. package.jsonにスクリプトを追加

$ vi package.json

server/package.jsonを編集します

"scripts": {
    "server": "nodemon app.js",
    "client": "cd ./client && yarn start --prefix client",
    "dev": "concurrently \"yarn server\" \"yarn client\""
}
$ yarn dev

こんな感じでserverとclientのサーバーが1つのコマンドで走るようになります

yarn run v1.3.2
$ concurrently "yarn server" "yarn client"
$ nodemon app.js
$ cd ./client && yarn start --prefix client
$ react-scripts start --prefix client
[0] [nodemon] 1.17.3
[0] [nodemon] to restart at any time, enter `rs`
[0] [nodemon] watching: *.*
[0] [nodemon] starting `node app.js`
[1] Starting the development server...
[1]
[1] Compiled successfully!
[1]
[1] You can now view client in the browser.
[1]
[1]   Local:            http://localhost:3000/
[1]   On Your Network:  http://192.168.100.101:3000/
[1]
[1] Note that the development build is not optimized.
[1] To create a production build, use yarn build.