4.4 KiB

Raw Permalink Blame History

部署方案

文档版本：v1.1
最后更新：2025-01-18

1. 构建产物

# 生产构建
npm run build

# 产物目录结构
dist/
├── index.html
├── assets/
│   ├── index-[hash].js
│   ├── index-[hash].css
│   └── images/
└── favicon.ico

2. 部署配置

2.1 Nginx 配置

server {
    listen 80;
    server_name www.jointo.ai;
    root /var/www/jointo/dist;
    index index.html;

    # Gzip 压缩
    gzip on;
    gzip_types text/plain text/css application/json application/javascript text/xml application/xml;
    gzip_min_length 1000;

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

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

    # API 代理
    location /api {
        proxy_pass http://backend:8000;
        proxy_set_header Host $host;
        proxy_set_header X-Real-IP $remote_addr;
    }
}

2.2 Docker 配置

# Dockerfile
FROM node:20-alpine AS builder
WORKDIR /app
COPY package*.json ./
RUN npm ci
COPY . .
RUN npm run build

FROM nginx:alpine
COPY --from=builder /app/dist /usr/share/nginx/html
COPY nginx.conf /etc/nginx/conf.d/default.conf
EXPOSE 80
CMD ["nginx", "-g", "daemon off;"]

2.3 Docker Compose

# docker-compose.yml
version: "3.8"

services:
  frontend:
    build:
      context: ./client
      dockerfile: Dockerfile
    ports:
      - "80:80"
    environment:
      - VITE_API_BASE_URL=https://api.jointo.ai/api/v1
    depends_on:
      - backend
    networks:
      - app-network

networks:
  app-network:
    driver: bridge

3. CI/CD Pipeline

3.1 GitHub Actions

# .github/workflows/deploy.yml
name: Deploy

on:
  push:
    branches: [main]

jobs:
  build-and-deploy:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v4

      - name: Setup Node.js
        uses: actions/setup-node@v4
        with:
          node-version: "20"
          cache: "npm"

      - name: Install dependencies
        run: npm ci

      - name: Run tests
        run: npm test

      - name: Build
        run: npm run build
        env:
          VITE_API_BASE_URL: ${{ secrets.API_BASE_URL }}

      - name: Deploy to server
        uses: appleboy/scp-action@master
        with:
          host: ${{ secrets.HOST }}
          username: ${{ secrets.USERNAME }}
          key: ${{ secrets.SSH_KEY }}
          source: "dist/*"
          target: "/var/www/jointo/"

3.2 部署脚本

#!/bin/bash
# deploy.sh

set -e

echo "🚀 Starting deployment..."

# 拉取最新代码
git pull origin main

# 安装依赖
npm ci

# 构建
npm run build

# 备份旧版本
if [ -d "/var/www/jointo/dist.old" ]; then
  rm -rf /var/www/jointo/dist.old
fi

if [ -d "/var/www/jointo/dist" ]; then
  mv /var/www/jointo/dist /var/www/jointo/dist.old
fi

# 部署新版本
mv dist /var/www/jointo/

# 重启 Nginx
sudo systemctl reload nginx

echo "✅ Deployment completed!"

4. 环境变量管理

4.1 生产环境变量

# .env.production
VITE_API_BASE_URL=https://api.jointo.ai/api/v1
VITE_USE_MOCK=false
VITE_APP_TITLE=Jointo

4.2 测试环境变量

# .env.staging
VITE_API_BASE_URL=https://staging-api.jointo.ai/api/v1
VITE_USE_MOCK=false
VITE_APP_TITLE=Jointo（测试）

5. 性能优化

5.1 构建优化

// vite.config.ts
export default defineConfig({
  build: {
    rollupOptions: {
      output: {
        manualChunks: {
          "react-vendor": ["react", "react-dom", "react-router-dom"],
          "ui-vendor": [
            "@radix-ui/react-dialog",
            "@radix-ui/react-dropdown-menu",
          ],
          "query-vendor": ["@tanstack/react-query"],
        },
      },
    },
  },
});

5.2 CDN 配置

<!-- index.html -->
<head>
  <!-- 使用 CDN 加载大型库 -->
  <link rel="preconnect" href="https://cdn.jsdelivr.net" />
  <link rel="dns-prefetch" href="https://cdn.jsdelivr.net" />
</head>

4.4 KiB Raw Permalink Blame History

部署方案

目录

1. 构建产物

2. 部署配置

2.1 Nginx 配置

2.2 Docker 配置

2.3 Docker Compose

3. CI/CD Pipeline

3.1 GitHub Actions

3.2 部署脚本

4. 环境变量管理

4.1 生产环境变量

4.2 测试环境变量

5. 性能优化

5.1 构建优化

5.2 CDN 配置

相关文档

4.4 KiB

Raw Permalink Blame History