雲のメモ帳

猫とクラウドと旅行が好きなインフラエンジニアです。 日々の調べたことや興味が持ったことをこのブログにアウトプットします。

Dockerを利用して、React実行環境を簡単に構築する

これはなに?

少しずつですが、フロントエンドの勉強もしていこうということで、まずは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が起動できていることが確認できます。

http://localhost:3000/

f:id:ykoomaru:20211213210014p:plain

最後に

初めはローカルにReactをインストールしてみたのですが、依存関係の問題で正常に起動しなかったため、Dockerで環境構築してみました。依存関係が複雑なコンポーネントについては、綺麗な環境で実行するのがトラブルも起きにくくよさそうですね。Docker最高。