dockerfile多阶段构建部署react项目

背景

Docker 17.05或更高版本支持多阶段构建镜像了，之前我都是在centos的基础镜像里手动安装node和nginx，然后再打包部署。

这次就用多阶段构建镜像重构一下Dockerfile，大体思路就是先FROM node用来打包，然后再FROM nginx把打包好的静态文件拷贝打nginx镜像中。

以下是最终的Dockerfile，经过实践是完全可行的，详细的步骤都写在注释中了。

FROM node:lts as builder
LABEL authors="hanjiawei"

# 设置时区
ENV TZ=Asia/Shanghai
RUN ln -snf /usr/share/zoneinfo/$TZ /etc/localtime && echo $TZ > /etc/timezone
# 在容器中创建好项目目录
RUN mkdir app
# 设置好工作目录
WORKDIR /app
# 拷贝package文件到镜像里的/app目录下
COPY package.json .
# 安装依赖
RUN npm install --registry=https://registry.npm.taobao.org
# 拷贝项目文件 这里要注意.gitignore里的内容
COPY . .
# 打包项目
RUN npm run build



FROM nginx:1.25.1
# 从上面的builder镜像里拷贝构建好的项目文件到当前镜像中
COPY --from=builder /app/dist /usr/share/nginx/html