React環境をDocker-composeで構築する

docker-composeを使って、React環境を作った時のメモを残す。

実行環境

• macOS ventura 13.2
• docker desktop 4.16.2
• yarn 1.22.19
• node:18.14.2-alpine
• react 18.2.0

作成ファイル一式

docker-compose.yml

version: '3.8'
services:
 react-app:
   build: .
   volumes:
     - ./:/src
   ports:
     - "3000:3000"
   stdin_open: true

Dockerfile

FROM node:18.14.2-alpine
WORKDIR /src

実行コマンド

Dockerコンテナビルド、起動

docker-compose build
docker-compose up -d

コンテナ内に入る

docker-compose exec react-app sh

create-react-appインストール

/src # yarn global add create-react-app

yarn global v1.22.19
[1/4] Resolving packages...
warning create-react-app > tar-pack > tar@2.2.2: This version of tar is no longer supported, and will not receive security updates. Please upgrade asap.
[2/4] Fetching packages...
[3/4] Linking dependencies...
[4/4] Building fresh packages...
success Installed "create-react-app@5.0.1" with binaries:
      - create-react-app
Done in 3.21s.

ReactJSインストール

/src # create-react-app app --template typescript

Creating a new React app in /src/app.

Installing packages. This might take a couple of minutes.
Installing react, react-dom, and react-scripts with cra-template-typescript...


added 1416 packages in 3m

231 packages are looking for funding
  run `npm fund` for details
npm notice 
npm notice New patch version of npm available! 9.5.0 -> 9.5.1
npm notice Changelog: https://github.com/npm/cli/releases/tag/v9.5.1
npm notice Run npm install -g npm@9.5.1 to update!
npm notice 
Git repo not initialized Error: Command failed: git --version
    at checkExecSyncError (node:child_process:885:11)
    at execSync (node:child_process:957:15)
    at tryGitInit (/src/app/node_modules/react-scripts/scripts/init.js:46:5)
    at module.exports (/src/app/node_modules/react-scripts/scripts/init.js:276:7)
    at [eval]:3:14
    at Script.runInThisContext (node:vm:129:12)
    at Object.runInThisContext (node:vm:307:38)
    at node:internal/process/execution:79:19
    at [eval]-wrapper:6:22 {
  status: 127,
  signal: null,
  output: [ null, null, null ],
  pid: 107,
  stdout: null,
  stderr: null
}

Installing template dependencies using npm...

added 40 packages, and changed 1 package in 8s

231 packages are looking for funding
  run `npm fund` for details

We detected TypeScript in your project (src/App.test.tsx) and created a tsconfig.json file for you.

Your tsconfig.json has been populated with default values.

Removing template package using npm...


removed 1 package, and audited 1456 packages in 3s

231 packages are looking for funding
  run `npm fund` for details

6 high severity vulnerabilities

To address all issues (including breaking changes), run:
  npm audit fix --force

Run `npm audit` for details.

Success! Created app at /src/app
Inside that directory, you can run several commands:

  npm start
    Starts the development server.

  npm run build
    Bundles the app into static files for production.

  npm test
    Starts the test runner.

  npm run eject
    Removes this tool and copies build dependencies, configuration files
    and scripts into the app directory. If you do this, you can’t go back!

We suggest that you begin by typing:

  cd app
  npm start

Happy hacking!
/src #

Reactアプリ起動

/src # cd app
/src/app # yarn start

Compiled successfully!

You can now view app in the browser.

  Local:            http://localhost:3000
  On Your Network:  http://172.22.0.2:3000

Note that the development build is not optimized.
To create a production build, use npm run build.

webpack compiled successfully
No issues found.

表示確認

http://localhost:3000/ にアクセスし、表示されることを確認

Tips

commandを使って手間を省く

docker-compose.ymlに、commandを追加すると、
毎回コンテナに入ってReactを起動する手間が省ける

version: '3.8'
services:
 react-app:
   build: .
   volumes:
     - ./:/src
   ports:
     - "3000:3000"
   stdin_open: true
   command: sh -c "cd app && yarn start" # 追加

docker-compose runで手間を省く

以下のコマンドを実行すれば、コンテナ内に入らなくても、create-react-appとReactJSのインストールができる

docker-compose run --rm react-app sh -c "yarn global add create-react-app && create-react-app app --template typescript"

やっていることは、react-appコンテナに入り、以下のコマンドをshで実行してくれている。

• yarn global add create-react-app
• create-react-app app –template typescript

–rm オプションは、コンテナ実行後に削除。デタッチド・モードの場合は無視してくれるものらしい。

stdin_openとttyについて

stdin_openをtrueにしているのだが、
これは、コンテナに標準入出力とエラー出力を紐づけてくれる設定。

reactのような、ポート待受をしないコンテナの場合に起動してもすぐに停止してしまうので、

stdin_openをつけている。

ttyという設定もあるが、これは、コンテナに擬似端末(キーボードによる入力)を紐づけてくれる設定。

今回のような環境の場合は、どちらでもよさそう。

ポート変更方法

ポートを変えたいなら、

docker-compose.ymlのport指定を変更して、

ports:

- "3333:3333"

yarn start実行前に、PORT=3333を実行すればいい