npx create-react-app my-react-app
cd my-react-app
# 使用官方 Node.js 作为构建环境
FROM node:14 AS build
# 设置工作目录
WORKDIR /app
# 复制 package.json 和 yarn.lock 文件
# 如果不是使用 yarn 进行包管理,去掉 yarn.lock 即可
COPY package.json yarn.lock ./
# 安装项目依赖
RUN yarn install
# 复制项目文件
COPY . .
# 构建应用
RUN yarn build
# 运行环境使用 nginx
FROM nginx:stable-alpine
# 从构建阶段复制构建产物到 nginx 目录
COPY --from=build /app/build /usr/share/nginx/html
# 暴露 80 端口
EXPOSE 80
# 启动 nginx
CMD ["nginx", "-g", "daemon off;"]
docker run -d -p 8080:80 my-react-app
如果在 Docker 容器内部安装了 Nginx,宿主机就不需要再安装 Nginx。容器技术旨在将应用及其依赖打包在一起,从而实现应用的隔离和移植性。因此,只要容器正在运行,并且你已经正确配置了容器内的 Nginx 以及容器和宿主机之间的网络(例如,通过端口映射),你就可以直接使用容器内的 Nginx,无需在宿主机上安装相同的服务。