在docker中构建Vue项目方式
作者：Qredsun
本文介绍了如何将前端项目构建为Docker镜像,并在容器中配置Nginx进行部署,通过编写Dockerfile,将前端构建和Nginx配置结合在一起,实现了一键部署
背景
一般发布前端项目的发布是将项目生成物上传至服务器，然后配置nginx。现在需要将前端构建成docker进行发布。
实现
项目文件结构：
my-vue-app/
├── Dockerfile
├── nginx.conf
├── package.json
├── public/
├── src/
└── …
编写dockerfile
将构建和ngxin配置在一起实现
# 构建阶段 FROM node:18-alpine as builder WORKDIR /app # 复制项目文件 COPY package*.json ./ RUN npm install COPY . . # 构建 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 80 CMD ["nginx", "-g", "daemon off;"]
配置nginx
server {
listen 80;
server_name localhost;
root /usr/share/nginx/html;
index index.html;
location / {
try_files $uri $uri/ /index.html;
}
}
总结
以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。