🚢
ReactアプリをDockerイメージ化
バージョン
Node version: v16.13.0
Docker version: 20.10.12
手順
- Reactアプリを作成する
- Dockerfileを作成&起動
1. Reactアプリを作成
① 公式チュートリアルに従いReactアプリを作成
② 下記コマンドを実行
npx create-react-app <アプリ名> # フォルダ名になります
cd <アプリ名>
npm start
③ http://localhost:3000 にアクセスしReactアプリのウェルカムページが表示されることを確認
④ Ctrl + C で起動停止
2. Dockerfileを作成&起動
① 作成したReactアプリのルート直下にDockerfileを作成、下記をコピー
# Dockerfile
FROM node:16
WORKDIR /reactapp
ENV PATH /reactapp/node_modules/.bin:$PATH
COPY package.json ./
COPY package-lock.json ./
RUN npm i
COPY . ./
CMD ["npm", "start"]
② イメージのビルド
docker build -t <image name> .
③ コンテナの起動
docker run \
-it \
--rm \
-v ${PWD}:/reactapp \
-v /reactapp/node_modules \
-p 3000:3000 \
-e CHOKIDAR_USEPOLLING=true \
<image name>:latest
④ http://localhost:3000 にアクセスしReactアプリのウェルカムページが表示されることを確認
参考情報等
Discussion