DockerでReact環境を構築する手順

なぜこの記事を書いたのか

「Dockerfile と docker-compose.ymlを一から作成してビルドする」という一連の流れを確認したかったため。

環境構築完了（ゴール）の確認

この記事のゴールは以下のようにReactのページが起動すること。

環境構築の手順

①Docker、nodeのインストール
②Dockerfile、docker-compose.ymlの作成
③ビルド
④Reactアプリの作成
⑤コンテナの実行

①Docker、nodeのインストール

• Dockerのインストール
  https://www.docker.com

Dockerはコンテナ型の仮想環境。
Dockerをインストールして、Dockerの環境の中で開発をすることになる。

• nodeのインストール
  https://nodejs.org/ja/download/

Dockerで環境構築したり、ライブラリをインストールする為にnodeが必要になる。

②Dockerfile、docker-compose.ymlの作成

docker-react-app（プロジェクトフォルダ）
　└┬─ Dockerfile
　　└─ docker-compose.yml

上記のフォルダ構成を参考に、ファイルを作成する。

「docker-react-app」というフォルダを作成し、その直下に「Dockerfile」「docker-compose.yml」という名称で新規ファイルを作成すればOK。

• Dockerfile

FROM node:14.17.5 
WORKDIR /usr/src/app/

ターミナルで「node -v」を実行することでnodeのバージョンを確認できる。バージョンを「FROM node:○○.○○.○」という形で指定する。

• docker-compose.yml

docker-compose.yml

version: '3'
services:
  node:
    build:
      context: .
    tty: true
    environment:
      - NODE_ENV=development
    volumes:
    - ./:/usr/src/app
    command: sh -c "cd reactapp && npm start"
    ports:
    - "3000:3000"

③ビルド

「③ビルド」「④Reactアプリの作成」「⑤コンテナの実行」で実行する「docker-compose」コマンドは、Dockerfileが存在するディレクトリで実行する必要がある。ターミナルにて「cd docker-react-app」を実行してディレクトリを移動しておく必要がある。

このコマンドを実行してビルドする。

docker-compose build

※buildコマンドはimageを作成する。コンテナは作成しない。

④Reactアプリの作成

docker-compose run --rm node sh -c "npm install -g create-react-app && create-react-app reactapp"

上記「①Docker、nodeのインストール」でnpmをインストールしていれば「npm install -g create-react-app && create-react-app reactapp」が実行され、Reactがインストールされる。

⑤コンテナの実行

docker-compose up

ここまで完了したらWebブラウザで「 http://localhost:3000 」へアクセスする。以下のようにReactのページが起動すれば環境構築完了となる。

参考

• Reactの開発環境をDockerで構築してみた https://blog.web.nifty.com/engineer/2714

Dockerで環境を構築する手順の記事

• Reactの環境構築 👈今ここ
• React + TypeScriptの環境構築