【Docker】创建React+nginx

上一次，尽管已经搭建了React+Nginx的环境，但是构建过程非常耗时，并且并不顺利，所以我决定再次尝试。

1. 创建React项目的步骤：
1. 按照平常的方式创建React项目
2. 这次我们将创建一个名为react-app的项目（使用TypeScript进行开发）
3. 使用yarn命令创建React项目：yarn create react-app react-app –template typescript

在已创建的React项目中创建Dockerfile。（将Dockerfile创建在react-app文件夹中）

FROM node:lts-alpine

WORKDIR /app
COPY package.json .

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

3. 进行构建
通过运行命令docker build -t react-app .来构建
请记住不要忘记“.”！！！

用docker run命令进行运行
运行 docker run –rm -p 8080:3000 react-app
在8080端口上运行

以下是有关端口的意思：
→ 对于初学者来说，使用Docker run命令时，port选项（-p 8080:8080）以及-d选项的含义解释。

由于改变了代码，输出了”你好，React!!!”。

在与Dockerfile相同的位置创建一个名为Dockerfile_Production的文件来创建nginx环境。

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

使用docker build命令构建：
docker build -t react-app:nginx -f Dockerfile_Production .
请不要忘记最后的”.”！

选择使用标签化的nginx和指定Dockerfile来创建Dockerfile_Production。

用docker run命令来运行
docker run –rm -p 8081:80 react-app:nginx
使用上面的react-app:nginx来指定最后创建的内容
由于不能使用之前的端口，所以使用8081端口

以上是使用Docker运行React和nginx的方法。