自分用メモとしてDocker+Reactの環境構築テンプレを書いときます。
ディレクトリ内にアプリを作成
create-react-app アプリ名
cd アプリ名
Dockerfile
アプリの内に作る
# base image
FROM node:12.2.0-alpine
# set working directory
WORKDIR /app
# add `/app/node_modules/.bin` to $PATH
ENV PATH /app/node_modules/.bin:$PATH
# install and cache app dependencies
COPY package.json /app/package.json
RUN npm install --silent
RUN npm install react-scripts@3.0.1 -g --silent
# start app
CMD ["npm", "start"]
docker-compose.yml
アプリ内に作る。
yarnを利用しています。
docker-compose.yml
version: '3.7'
services:
アプリ名:
container_name: アプリ名
build:
context: .
dockerfile: Dockerfile
volumes:
- '.:/app'
- '/app/node_modules'
command: yarn start
ports:
- '3001:3000'
environment:
- NODE_ENV=development
commandでyarn start を指定しとかないと、デバックモードでアプリ立ち上がるのでrenderが反映されなくなります。
追記
久しぶりにreactを起動しようと思ったら上手くできなかったので、もしこの手順で上手くいかなかったら「.dockerignore」ファイルを追加して以下を記述してください。
node_modules
node_modulesを参照にしてるのが良くないぽいです。
コンテナ起動
docker-compose up -d --build
localhost:3000にアクセスして問題なければおk。