前回、React+Nginxの環境を作ったはいいもののbuildにすごく時間がかかり、なかなかうまくいかなかったので再度挑戦してみた

手順↓
1. いつも通り、Reactプロジェクトを作成
今回はreact-appとして作成します(typescriptで作ります)
yarn create react-app react-app --template typescript

2. 作成した、ReactプロジェクトにDockerfileを作成
（react-appのフォルダの中にDockerfileを作成）

Dockerfile

FROM node:lts-alpine

WORKDIR /app
COPY package.json .

RUN npm install
# build時間が短くなる
COPY . .
CMD ["npm", "start"]

3. buildする
docker build -t react-app .でビルド
※.を忘れないように！！！

4. docker runで動かす
docker run --rm -p 8080:3000 react-app
8080番で動かします

ポートの意味はこちらから
→Docker runでportオプション（-p 8080:8080）や-dオプションする意味〜初心者向けにコマンドの解説〜

http://localhost:8080/に接続してみると

コードを変えたのでHello React!!!と表示されました！！

5. nginxの環境を作成する
Dockerfileと同じ場所にDockerfile_Productionを作成する

Dockerfile_Production

FROM node:lts-alpine as builder

WORKDIR /app
COPY package.json .

RUN npm install
# build時間が短くなる
COPY . .
RUN npm run build

FROM nginx:alpine
COPY --from=builder /app/build /usr/share/nginx/html

6. buildする
docker build -t react-app:nginx -f Dockerfile_Production .でビルド
※.を忘れないように！！！

:nginxでタグ付け、Dockerfileの指定で作成したDockerfile_Productionを選択します。

7. docker runで動かす
docker run --rm -p 8081:80 react-app:nginx
最後のreact-app:nginxで作ったものを指定します
ポートは先ほどと同じものを使えないので8081とします

http://localhost:8081/に接続してみると

表示されました。Hello React nginx!!!にコードを変更したのでそれが表示されています。

以上、DockerでReact+nginxを動かす方法でした