【Docker/React/node.js/windows10】Dockerを使ってReactの環境構築 ※ホットリロード対応

概要

最近人気急上昇しているReact.jsを使った開発環境の構築をDockerを絡めて行いました。フロントエンド開発はVue.jsを使っているのですが、技術トレンドやモバイルアプリ開発もできる言語ということで使用してみました。

ソースの修正がコンテナ上で動作しているプロジェクトにリアルタイムで反映(ホットリロード)されないという現象を解消するのに苦労しました。Windowsを使っている方は、たぶん同じ現象に直面すると思います。

※事前にnode.js、docker、docker-composeのインストールが必要です。

プロジェクト作成 ～ 起動まで

適当なディレクトリで

mkdir 【プロジェクト名】 && cd 【プロジェクト名】

npx create-react-app 【アプリ名】

touch docker-compose.yml

cd 【アプリ名】 && touch Dockerfile

yarn start

ブラウザでlocalhost:3000にアクセスして下記の画面がでたらローカルでのプロジェクト作成と起動が成功です。

Docker移行

ここからは、主にDockerfileとdocker-compose.ymlの作成です。

Dockerfileと.envファイルはアプリ直下、docker-compose.ymlはプロジェクト直下に作成します。

Dockerfile

FROM node:14.13.1

ENV HOME="/usr/src/app" \
    WORKDIR="/usr/src/app/【アプリ名】" \
    LANG=C.UTF-8 \
    TZ=Asia/Tokyo

RUN mkdir -p ${HOME}
COPY ./frontend ${HOME}

WORKDIR ${WORKDIR}
RUN npm install && npm run build

ENV HOST 0.0.0.0
CMD ["npm", "start"]
EXPOSE 3000

docker-compose.yml

version: "3"

services:
  node:
    build:
      context: ./
      dockerfile: ./【プロジェクト名】/Dockerfile
    volumes:
      - ./【プロジェクト名】:/usr/src/app
      - /usr/src/app/【アプリ名】/node_modules
    command: sh -c "yarn start"
    ports:
      - "3000:3000"
    # tty: true
    # stdin_open: true
    environment:
      - CHOKIDAR_USEPOLLING=true

.env

 CHOKIDAR_USEPOLLING=true 

大事なのは、Dockerfileと.envファイルに記載した CHOKIDAR_USEPOLLING=true です。

これがないとホットリードされません。この原因解明に２日かかりました。。。

あとは、docker-compose.ymlファイルと同じ階層に移動して下記のコマンドを打てば、コンテナの作成、ビルド、起動までをやってくれます。

docker-compose up

最後に、localhost:3000にアクセスすれば、docker上での開発環境の構築完了です。

参考

★docker/Django開発環境: https://esc-key.net/2021/07/17/%e3%80%90%e9%96%8b%e7%99%ba%e7%92%b0%e5%a2%83%e6%a7%8b%e7%af%89%e3%80%91docker-django-postgresql%e3%80%80%e2%80%bb%e5%82%99%e5%bf%98%e9%8c%b2%e7%94%a8/

★ホットリロード参考: https://www.ikkitang1211.site/entry/2020/10/11/213824