Node.js使ってdocker-composeでReact環境構築

DockerでReactの環境作ってみよう

勉強でReactをやるくらいならNode.jsを入れて作ればOKなのですが、実際の開発ではdocker-compose使って開発環境を作ることが多いのでぜひできるようにしましょう！

環境

作成時環境

• Docker Desktop for Windows Version 4.0.0
• Windows10 home

作成した環境

• React 17.0.2
• Node.js 16.9.1

Windowsで作ってますが、Macでも同じ手順で使えると思います。

ソースコード

コピペや確認で使ってください

Dockerfile作成

Node.jsのイメージを使用します。React使うために必要です。
alpineが軽量のLinuxでdockerでよく使用されます。
で、WORKDIRが作業ディレクトリです。

react-test/react/Dockerfile

FROM node:16-alpine
WORKDIR /app

docker-compose.yml作成

react-test/docker-compose.yml

services:
  front:
    build: ./react
    volumes:
      - ./react:/app:cached
    command: sh -c "cd react-test && yarn start"
    ports:
      - "3000:3000"

• front：サービス。コマンドとか打つときに使います。名前つけてる。
• build：使用するイメージがdocker-compose.ymlと同じディレクトリにあるなら必要ないんですけど、今回reactって名前のフォルダの中に入れてますので./reactと指定。
• volumes：ローカルではreactってフォルダだけど、コンテナの中ではappに設定しているので。これを設定しないとコードなど変更しても何も起こらない
• command：docker-compose upしたときに実行してほしいコマンド。
• port：ローカルの3000番ポート→コンテナの3000番ポートに通してねってこと。

Reactはデフォルトで3000番ポートで起動する設定なのでその設定に合わせてます。

ReactインストールとReactのアプリ作成

以下のコマンド打つとreact作るのに必要なパッケージ全部取ってきてくれます。
結構な量ダウンロードするので時間かかると思います。

$ docker-compose run --rm front sh -c "npm install -g create-react-app && create-react-app react-test"

実はビルド(docker-compose build)必要なんですけど、このコマンド打つと勝手にやってくれてます。

コマンドの説明

docker-compose runというのがDocker-compose upしてない時にコンテナ内で一回だけコマンド実行してほしいときに使うコマンド。
frontというのがdocker-composeに名前を付けたサービス名

実行させたいコマンド本体は

npm install -g create-react-appとcreate-react-app react-testです。

npm install -g create-react-app reactに必要なパッケージをインストールしてくれる。
create-react-app react-testはreactのアプリ作るために最初に色々作ってくれるコマンド。

&&をくっつけることでこの二つを一つずつ実行してくれる。
このコマンドは普通に始めるときと同じです。

↓Reactの公式ページQuickStart

https://create-react-app.dev/docs/getting-started

React起動

$ docker-compose up

を実行するとdocker-composeのcommand: sh -c "cd react-test && yarn start"が実行されるので
reactのアプリを開発サーバーで起動させてくれます。

デフォルトの3000番ポートを使うようにしているので以下にアクセスするとReactのマークがぐるぐる回転すると思います。

http://localhost:3000/