前回、React+Nginxの環境を作ったはいいもののbuildにすごく時間がかかり、なかなかうまくいかなかったので再度挑戦してみた
手順↓
1. いつも通り、Reactプロジェクトを作成
今回はreact-appとして作成します(typescriptで作ります)
yarn create react-app react-app --template typescript
2. 作成した、ReactプロジェクトにDockerfileを作成
（react-appのフォルダの中に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を作成する
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を動かす方法でした