前端项目容器化Docker打包部署方式详解

# 使用vue脚手架创建项目
npm create vue@latest
# 进入项目(假设项目名为"xxc-web")
cd xxc-web
# 安装依赖
npm install
# 测试
npm run dev

server {
  listen       80;
  listen  [::]:80;
  server_name  localhost;
  access_log  /var/log/nginx/host.access.log  main;
  location / {
      root   /usr/share/nginx/html;
      index  index.html index.htm;
      # 新增下面这句，其他是默认nginx配置
      # 解决部分前端框架的路由问题，在浏览器刷新报错404
      try_files $uri $uri/ /index.html;
  }
  error_page   500 502 503 504  /50x.html;
  location = /50x.html {
      root   /usr/share/nginx/html;
  }
}

# 第一阶段：node镜像打包
FROM node:latest AS frontend-builder
WORKDIR /build-app
COPY . .
RUN npm install
RUN npm run build
# 第二阶段：nginx打包
FROM nginx:latest
EXPOSE 80
WORKDIR /app
# 替换nginx配置
COPY nginx.conf /etc/nginx/conf.d/default.conf
# 将第一阶段的静态文件复制到nginx中
RUN rm -rf /usr/share/nginx/html
RUN mkdir /usr/share/nginx/html
COPY --from=frontend-builder /build-app/dist /usr/share/nginx/html
# 运行
CMD ["nginx", "-g", "daemon off;"]

# 打包镜像
docker build -t xxc-web:v1 . 
# 上传仓库
# docker login -u <用户名> -p <密码> <仓库地址>
# docker push xxc-web:v1
# 运行
docker run --name xxc-web -dp 1234:80 xxc-web:v1