これはなに?
少しずつですが、フロントエンドの勉強もしていこうということで、まずはReactの実行環境をDockerで構築してみたのでメモを残します。
1.フォルダ構成
/
└ Dockerfile
└ docker-compose.yml
2. Dockerイメージ作成 ~ React起動
① Docker Images作成
Docker Composeを使って、Reactのイメージを作成します。
docker-compose build
Dockerファイルの中身は以下のような感じです。 FROM(ソースイメージ)の部分は、適宜置き換えてください。
<Dockerfile> FROM node:17.2 WORKDIR /usr/src/app/ CMD npm install -g create-react-app
② React Project 作成
作成したDockerイメージを使ってReactプロジェクトを作成します。
プロジェクト名は任意。
docker-compose run --rm node sh -c "npx create-react-app <project_name> --use-npm"
③ React 起動
Reactプロジェクトが作成できたので後はReactを起動するだけです。
docker-compose up
※プロジェクト名に応じてdocker-compose.yml内のcommandのフォルダ名を変更してください。
command: sh -c "cd <project_name> && npm start"
<docker-compose.yml> version: '3' services: node: build: context: . tty: true environment: - NODE_OPTIONS=--openssl-legacy-provider volumes: - ./:/usr/src/app command: sh -c "cd <project_name> && npm start" ##プロジェクト名に応じて修正 ports: - "3000:3000"
ちなみに環境変数で ”NODE_OPTIONS” を指定している理由は、v17.2にバグがありその対応のために入れています。
■ 参考
Node.js v17 で webpack error - Qiita
④ 接続確認
以下のURLにアクセスするとReactが起動できていることが確認できます。
最後に
初めはローカルにReactをインストールしてみたのですが、依存関係の問題で正常に起動しなかったため、Dockerで環境構築してみました。依存関係が複雑なコンポーネントについては、綺麗な環境で実行するのがトラブルも起きにくくよさそうですね。Docker最高。