Dockerとdocker-composeを使ってReactのコンテナを作成してみよう！

はじめに

• Dockerfile
• docker-compose.yml
• .gitignore

を作成します
ディレクトリ構成は以下の通りです

tree
.
├── .gitignore
├── Dockerfile
└── docker-compose.yml

必要なファイルの作成

Dockerfile

今回はNodeJSの16.17.0のDocker imageから作成します
今回はワークディレクトリを/codeにします

Dockerfile

FROM node:16.17.0-bullseye
WORKDIR /code
# 先にpackage.jsonとpackage-lock.jsonをマウントさせる
COPY ./app/package*.json /code
RUN npm install

docker-compose.yml

docker-compose.yml

version: '3.8'
services:
  # サービス名はfront
  front:
    # コンテナ名はフロント
    container_name: front
    # ビルドコンテキストはカレントディレクトリ
    build:
      context: .
      dockerfile: Dockerfile
    # カレントディレクトリ内の`/app`のファイル・フォルダをコンテナにマウントします
    volumes:
      - ./app:/code
      # mode_modules用の永続化Volumeを作成して2回目以降のnode_modulesの呼び出しを高速化
      - node_modules_volume:/app/node_modules
    # npmを使って起動する
    command: sh -c "npm start"
    ports:
      # デフォルトの3000ポートを使う
      - "3000:3000"
    # ホットリロードを有効化
    environment:
      - CHOKIDAR_USEPOLLING=true
volumes:
  node_modules_volume:

.gitignore

以下からNodeJSの.gitignoreをコピペしてきます

実際に作成してみよう！

今回はappという新しいアプリケーションを作成します
その際はサービス名(front)を指定する必要があります
npx create-react-appコマンドを使うと作成できます
後ろに作成するアプリケーション名(今回はapp)を指定します

docker-compose run --rm front sh -c "npx create-react-app app"

少なくとも3,4分は作成に時間がかかるので気長に待ちましょう

npx: installed 67 in 7.283s
# コンテナの/code/app内にReactのアプリケーションが作成されます
Creating a new React app in /code/app.

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

アプリケーションの作成に成功すると以下のようなファイル構成になるかと思います

tree
.
├── .gitignore
├── Dockerfile
├── README.md
├── app
│   ├── .gitignore
│   ├── README.md
│   ├── node_modules
│   ├── package-lock.json
│   ├── package.json
│   ├── public
│   └── src
└── docker-compose.yml

このようなログが出ますが、docker-compose.ymlのcommandにすでに記載されているのでdocker-compose up -dを実行すれば下記のコマンドは実行されます

We suggest that you begin by typing:

  cd react-sample
  npm start

Happy hacking!

起動させよう！

docker-compose up -d

を実行してreactのコンテナを起動させます

front | 
front | > app@0.1.0 start /code/app
front | > react-scripts start
front | 
front | (node:25) [DEP_WEBPACK_DEV_SERVER_ON_AFTER_SETUP_MIDDLEWARE] DeprecationWarning: 'onAfterSetupMiddleware' option is deprecated. Please use the 'setupMiddlewares' option.
front | (Use `node --trace-deprecation ...` to show where the warning was created)
front | (node:25) [DEP_WEBPACK_DEV_SERVER_ON_BEFORE_SETUP_MIDDLEWARE] DeprecationWarning: 'onBeforeSetupMiddleware' option is deprecated. Please use the 'setupMiddlewares' option.
front | Starting the development server...
front | 
front | Compiled successfully!
front | 
front | You can now view app in the browser.
front | 
front |   Local:            http://localhost:3000
front |   On Your Network:  http://192.168.16.2:3000
front | 
front | Note that the development build is not optimized.
front | To create a production build, use npm run build.
front | 
front | webpack compiled successfully

その後、http://localhost:3000/
にアクセスし、以下の画面が表示されたら成功です！

参考