前后端部署实战:Vue3+Vite+PNPM + NestJS + Docker + Nginx + 云效

1. 项目结构与技术栈说明

textCopy Code

project/ ├── frontend/ # Vue3 + Vite 前端项目 │ ├── vite.config.ts │ └── package.json (使用PNPM) ├── backend/ # NestJS 后端项目 │ ├── Dockerfile │ └── package.json ├── nginx/ # Nginx配置 │ └── default.conf ├── docker-compose.yml └── .github/workflows/ # 云效CI/CD配置

2. 前端项目配置 (Vue3 + Vite + PNPM)

2.1 项目初始化与配置

bashCopy Code

# 使用PNPM创建Vue3项目 pnpm create vite frontend --template vue-ts cd frontend

2.2 调整vite.config.ts

typescriptCopy Code

import { defineConfig } from 'vite' import vue from '@vitejs/plugin-vue' export default defineConfig({ plugins: [vue()], server: { proxy: { '/api': { target: 'http://backend:3000', // Docker容器内通信 changeOrigin: true, rewrite: (path) => path.replace(/^\/api/, '') } } }, build: { outDir: '../dist/frontend', emptyOutDir: true } })

2.3 前端Dockerfile

dockerfileCopy Code

# frontend/Dockerfile FROM node:18-alpine as builder WORKDIR /app COPY package.json pnpm-lock.yaml ./ RUN corepack enable && pnpm install COPY . . RUN pnpm run build FROM nginx:alpine COPY --from=builder /app/dist /usr/share/nginx/html COPY ../nginx/default.conf /etc/nginx/conf.d/default.conf EXPOSE 80

3. 后端项目配置 (NestJS)

3.1 创建NestJS项目

bashCopy Code

nest new backend cd backend

3.2 调整main.ts启用CORS

typescriptCopy Code

async function bootstrap() { const app = await NestFactory.create(AppModule); app.enableCors({ origin: process.env.FRONTEND_URL || 'http://localhost:5173', methods: 'GET,HEAD,PUT,PATCH,POST,DELETE', credentials: true, }); await app.listen(3000); }

3.3 后端Dockerfile

dockerfileCopy Code

# backend/Dockerfile FROM node:18-alpine WORKDIR /app COPY package.json package-lock.json ./ RUN npm install COPY . . RUN npm run build EXPOSE 3000 CMD ["node", "dist/main"]

4. Nginx配置

nginxCopy Code

# nginx/default.conf server { listen 80; server_name localhost; location / { root /usr/share/nginx/html; index index.html; try_files $uri $uri/ /index.html; } location /api { proxy_pass http://backend:3000; proxy_set_header Host $host; proxy_set_header X-Real-IP $remote_addr; proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for; } }

5. Docker Compose集成

yamlCopy Code

# docker-compose.yml version: '3.8' services: frontend: build: context: . dockerfile: frontend/Dockerfile ports: - "80:80" depends_on: - backend restart: unless-stopped backend: build: context: backend dockerfile: Dockerfile ports: - "3000:3000" environment: - NODE_ENV=production restart: unless-stopped

6. 云效CI/CD配置

6.1 创建云效流水线

1. 在云效平台创建新流水线
2. 选择"Node.js"模板

6.2 配置流水线YAML (.github/workflows/deploy.yml)

yamlCopy Code

name: Deploy to Production on: push: branches: [ main ] jobs: build-deploy: runs-on: ubuntu-latest steps: - name: Checkout code uses: actions/checkout@v3 - name: Set up Node.js uses: actions/setup-node@v3 with: node-version: '18' - name: Install PNPM run: npm install -g pnpm - name: Install dependencies (frontend) working-directory: ./frontend run: pnpm install - name: Build frontend working-directory: ./frontend run: pnpm run build - name: Install dependencies (backend) working-directory: ./backend run: npm install - name: Build backend working-directory: ./backend run: npm run build - name: Login to Docker Hub uses: docker/login-action@v2 with: username: ${``{ secrets.DOCKER_HUB_USERNAME }} password: ${``{ secrets.DOCKER_HUB_TOKEN }} - name: Build and push Docker images run: | docker-compose -f docker-compose.yml build docker-compose -f docker-compose.yml push - name: Deploy to server uses: appleboy/ssh-action@master with: host: ${``{ secrets.SERVER_HOST }} username: ${``{ secrets.SERVER_USER }} key: ${``{ secrets.SERVER_SSH_KEY }} script: | docker-compose pull docker-compose down docker-compose up -d

7. 部署流程

1. ‌本地开发‌:

   bashCopy Code

   # 启动前端开发服务器 cd frontend && pnpm dev # 启动后端开发服务器 cd backend && npm run start:dev

2. ‌构建Docker镜像‌:

   bashCopy Code

   docker-compose build

3. ‌本地测试‌:

   bashCopy Code

   docker-compose up

4. ‌生产环境部署‌:

   • 推送代码到Git仓库

   • 云效流水线自动触发构建和部署

   • 或手动执行:

     bashCopy Code

     # 服务器上拉取最新镜像 docker-compose pull # 重启服务 docker-compose down && docker-compose up -d

8. 常见问题解决

1. ‌跨域问题‌:

   • 确保NestJS启用了CORS
   • 检查Nginx代理配置是否正确

2. ‌Docker容器间通信‌:

   • 使用docker-compose时，服务名(如backend)可直接作为主机名

3. ‌云效部署失败‌:

   • 检查密钥和权限配置
   • 查看云效构建日志定位问题

4. ‌静态资源404‌:

   • 确保Vite构建输出目录与Nginx配置匹配
   • 检查Dockerfile中的COPY路径

9. 优化建议

1. ‌性能优化‌:

   • 使用多阶段Docker构建减少镜像大小
   • 配置Nginx缓存静态资源

2. ‌安全优化‌:

   • 添加HTTPS支持
   • 配置Docker安全上下文

3. ‌监控‌:

   • 添加健康检查端点
   • 集成Prometheus监控

这套配置实现了从开发到生产的完整工作流，结合了现代前端工具链(Vue3+Vite+PNPM)和强大的后端框架(NestJS)，通过Docker容器化和Nginx反向代理提供高效稳定的服务，最后利用云效实现自动化部署。