在docker中构建Vue项目

背景：
一般发布前端项目的发布是将项目生成物上传至服务器，然后配置nginx。现在需要将前端构建成docker进行发布。

实现：
项目文件结构：
my-vue-app/
├── Dockerfile
├── nginx.conf
├── package.json
├── public/
├── src/
└── …

1. 编写dockerfile。将构建和ngxin配置在一起实现

# 构建阶段
FROM node:18-alpine as builderWORKDIR /app# 复制项目文件
COPY package*.json ./
RUN npm installCOPY . .# 构建 Vue 项目
RUN npm run build# 生产阶段：使用 nginx 运行构建产物
FROM nginx:alpine# 拷贝构建结果到 nginx 的目录中
COPY --from=builder /app/dist /usr/share/nginx/html# 如果你有自定义 nginx 配置，可以覆盖默认配置
COPY nginx.conf /etc/nginx/conf.d/default.conf# 暴露端口
EXPOSE 80CMD ["nginx", "-g", "daemon off;"]

2. 配置nginx

server {listen 80;server_name localhost;root /usr/share/nginx/html;index index.html;location / {try_files $uri $uri/ /index.html;}
}