React の開発環境を docker で構築する

投稿日: 2021年 4月 28日

React のチュートリアルをするために、Docker で環境を作ってみました。備忘のためにやり方を書きたいと思います。

【参考にさせて頂いた記事】
Using React.js with Docker

今回開発環境を docker-compose を使用して Docker 化したことで、下記のことができるようになりました。

  • docker-compose up で react のサーバーが起動できる
  • port フォワーディングを設定したため、react のサーバーに localhost でアクセスできる
  • アプリのルートディレクトリをコンテナ上の /app に volumes でマウントしたので、コンテナを起動したままソースコードの修正・反映が行える

残念な点は、ホストマシンに nodejs や npm などをインストールする必要があり、今回作った Dockerfile, docker-compose.yml があればすぐに環境が準備できるわけじゃないという点です。
完全にホストマシンに依存しない Docker イメージを作るのは難しいなと思いました・・・・。

Nodejs, npm をインストールする

React のアプリを作るために、必要な Nodejs と npm をインストールします。
必要なバージョンはそれぞれ Node >= 10.16npm >= 5.6 です。

まず、パッケージの情報を更新します。

sudo apt update

nodejs, npm をインストール

sudo apt install nodejs npm

npm のバージョン 5.2 以上をインストールすると npx というツールもついてくるので、それを使って react アプリを作ります。

npx を使って React アプリを生成する

公式のインストールガイド の通りコマンドを実行し、React アプリを作ります。

npx create-react-app my-app
cd my-app
npm start

これで my-app という React アプリが生成されます。npm start によって、この React アプリを起動します。
これで、React アプリの雛形自体は準備できました。ここで開発してもいいのですが、Docker も使ってみたかったので、これを docker-compose でコンテナ起動して、開発できるようにします。

Dockerfile の内容

Dockerfile と docker-compose.yml を作成して、ビルド・コンテナ起動を行います。
まずは、Dockerfile の内容・・・

# alpine の node を ベースイメージとして取り込む
FROM node:alpine

# イメージのディレクトリを /app に移動する(/app ディレクトリはこのコマンドで作成される)
WORKDIR /app

# `/app/node_modules/.bin` を 環境変数 PATH に追加する
ENV PATH /app/node_modules/.bin:$PATH

# package.json をイメージの /app ディレクトリに移す
COPY package.json ./

# yarn.lock をイメージの /app ディレクトリに移す
COPY yarn.lock ./

# package.json の内容をインストールする
RUN yarn

# React アプリのソースコードをイメージの /app ディレクトリに移す
COPY . ./

# React アプリを開始する
CMD ["npm", "start"]

Dockerfile の内容は、コメントの通りです。

docker-compose.yml の内容

version: "3.9"
services:
  web:
    build: .
    volumes:
      - .:/app
    ports:
      - "3000:3000"

volumes は {ホスト側のパス}:{コンテナ側のパス} の形式で指定して、ディレクトリをマウントできます。

ports は、⇧と同じ要領でホスト側とコンテナ側のポート番号を対応させます。

ビルド

docker-compose build

これでビルドすると、npm パッケージのインストールなどが行われるのですが、package.json で依存パッケージが不足しているというワーニングが何回か出ました。

例えば、下記のようなワーニングです。

warning " > @testing-library/user-event@12.8.3" has unmet peer dependency "@testing-library/dom@>=7.21.4".
warning "react-scripts > @typescript-eslint/eslint-plugin > tsutils@3.20.0" has unmet peer dependency "typescript@>=2.8.0 || >= 3.2.0-dev || >= 3.3.0-dev || >= 3.4.0-dev || >= 3.5.0-dev || >= 3.6.0-dev || >= 3.6.0-beta || >= 3.7.0-dev || >= 3.7.0-beta".

不足している @testing-library/domtypescript をそれぞれ package.json に追加して、再度 docker-compose build を実行するとワーニングが消えて、ビルドができました。

コンテナ起動

docker-compose up

すべてうまく行けば、Docker コンテナ上で React アプリが起動し、それに対して localhost:3000 でアクセスできるようになります。

これから react の勉強ももっとやっていきたいです。

プログラミングに関するオススメ書籍