Docker で React をインストールする

Reactプロジェクトはnpmやyarnが必ず絡むので必ずと言っていいほど環境依存が発生します。プロジェクトの管理を可能にするためにはdocker-composeを使用しましょう。

Docker入門関連記事

[contents:]

Docker で React を動かす：ディレクトリ構成

ディレクトリ構成は以下の通り。 Readme.mdはReactプロジェクトを作るうえでは無関係なので作成しなくてよいです。

docker-compose.ymlと/code/Dockerfileの作成に集中しましょう。

C:.
│  docker-compose.yml
│  Readme.md
│
└─code
        Dockerfile

docker-compose.yml の作成

docker-compse.ymlは以下の通りです。

version: "3"

services:
  react-app:
    build: ./code
    container_name: react-app
    command: sh -c "cd react-sample && npm start"
    volumes:
      - ./code/:/code
    ports:
      - '3000:3000'
      - "19000:19000"
      - "19001:19001"
      - "19002:19002"
      - "19006:19006"

少し解説すると

コンテナ名はreact-app
実行時のコマンドはnpm startでreactプロジェクトを実行しています。
portsは3000を指定しています。

Dockerfile の作成

Dockerfileはnodeをベースイメージとしています。

FROM node:18.12.1-alpine
WORKDIR /code

DockerでReactプロジェクトをインストール

まずはbuild

docker-compose build

次に、シェルを起動

docker-compose run --rm react-app sh

インストール用スクリプト（初回のみ起動）

npm install -g create-react-app
create-react-app react-sample

終わったらexit

起動用

以下のコマンドで起動

docker-compose up