Docker 部署 Vue 项目指南

本文将详细介绍如何使用 Docker 来部署 Vue.js 前端项目，包括开发环境和生产环境的配置方法。

项目准备

1. Vue 项目结构

确保你的 Vue 项目具有标准的目录结构：

├── src/                # 源代码目录
├── public/             # 静态资源目录
├── package.json        # 项目依赖配置
├── vite.config.js      # Vite 配置文件（如果使用 Vite）
└── .env.*             # 环境变量文件

2. 环境要求

Node.js 16+
Docker
Vue.js 3.x

Dockerfile 编写

开发环境 Dockerfile

创建 Dockerfile.dev：

# 使用 Node.js 官方镜像作为基础镜像
FROM node:16-alpine

# 设置工作目录
WORKDIR /app

# 复制 package.json 和 package-lock.json
COPY package*.json ./

# 安装依赖
RUN npm install

# 复制源代码
COPY . .

# 暴露开发服务器端口
EXPOSE 5173

# 启动开发服务器
CMD ["npm", "run", "dev", "--", "--host"]

生产环境 Dockerfile

创建 Dockerfile.prod（使用多阶段构建）：

# 构建阶段
FROM node:16-alpine as builder

# 设置工作目录
WORKDIR /app

# 复制依赖文件
COPY package*.json ./

# 安装依赖
RUN npm install

# 复制源代码
COPY . .

# 构建应用
RUN npm run build

# 部署阶段
FROM nginx:alpine

# 复制 Nginx 配置
COPY nginx.conf /etc/nginx/conf.d/default.conf

# 从构建阶段复制构建结果到 Nginx 目录
COPY --from=builder /app/dist /usr/share/nginx/html

# 暴露端口
EXPOSE 80

# 启动 Nginx
CMD ["nginx", "-g", "daemon off;"]

Nginx 配置

创建 nginx.conf：

server {
    listen 80;
    server_name localhost;

    root /usr/share/nginx/html;
    index index.html;

    # 支持 history 路由模式
    location / {
        try_files $uri $uri/ /index.html;
    }

    # 静态资源缓存设置
    location /assets/ {
        expires 1y;
        add_header Cache-Control "public, no-transform";
    }
}

构建和运行

开发环境

构建开发环境镜像：

docker build -f Dockerfile.dev -t vue-app-dev .

运行开发环境容器：

docker run -it -p 5173:5173 -v $(pwd):/app vue-app-dev

生产环境

构建生产环境镜像：

docker build -f Dockerfile.prod -t vue-app-prod .

运行生产环境容器：

docker run -d -p 80:80 vue-app-prod

最佳实践

1. 优化构建过程

使用 .dockerignore 排除不必要的文件
合理利用 Docker 缓存层
使用多阶段构建减小最终镜像大小

2. 开发环境注意事项

使用卷挂载实现热重载
配置环境变量
处理跨域问题

3. 生产环境注意事项

优化 Nginx 配置
实施安全措施
配置健康检查

常见问题解决

1. 构建失败

检查 Node.js 版本兼容性
确保所有依赖都已正确安装
验证构建脚本配置

2. 运行时问题

检查端口映射配置
确认网络设置
查看容器日志排查问题

3. 性能优化

使用多阶段构建
优化静态资源
配置合适的缓存策略

总结

通过 Docker 部署 Vue 项目可以实现环境一致性、快速部署和方便的扩展。合理使用多阶段构建和 Nginx 配置，可以获得更好的部署效果和运行性能。记得根据实际项目需求调整配置参数，并注意安全性和性能优化。