部署

TRAE 提供全面的部署功能，帮助您将应用程序部署到各种平台和环境。本指南涵盖部署功能、配置选项和最佳实践。

概述

TRAE 的部署系统支持：

多个部署平台（Vercel、Netlify、AWS 等）
自动化 CI/CD 流水线
环境管理
构建优化
部署监控

部署平台

Vercel

TRAE 与 Vercel 内置集成，可无缝部署 Web 应用程序。

快速部署

点击 AI 聊天面板中的部署按钮
或点击浏览器面板右上角的部署按钮
配置您的部署设置
开始部署过程

配置

json

{
  "name": "my-app",
  "version": 2,
  "builds": [
    {
      "src": "package.json",
      "use": "@vercel/node"
    }
  ],
  "routes": [
    {
      "src": "/(.*)",
      "dest": "/"
    }
  ]
}

Netlify

将静态网站和无服务器函数部署到 Netlify。

设置

连接您的代码仓库
配置构建设置
设置环境变量
在推送时自动部署

构建配置

toml

[build]
  publish = "dist"
  command = "npm run build"

[build.environment]
  NODE_VERSION = "18"

[[redirects]]
  from = "/*"
  to = "/index.html"
  status = 200

AWS

部署到各种 AWS 服务，包括 S3、EC2 和 Lambda。

S3 静态托管

yaml

# .github/workflows/deploy-aws.yml
name: Deploy to AWS S3
on:
  push:
    branches: [main]
jobs:
  deploy:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v3
      - name: Configure AWS credentials
        uses: aws-actions/configure-aws-credentials@v2
        with:
          aws-access-key-id: ${{ secrets.AWS_ACCESS_KEY_ID }}
          aws-secret-access-key: ${{ secrets.AWS_SECRET_ACCESS_KEY }}
          aws-region: us-east-1
      - name: Build and deploy
        run: |
          npm install
          npm run build
          aws s3 sync dist/ s3://my-bucket --delete

CI/CD 集成

GitHub Actions

使用 GitHub Actions 自动化您的部署。

yaml

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

on:
  push:
    branches: [main]
  pull_request:
    branches: [main]

jobs:
  test:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v3
      - name: Setup Node.js
        uses: actions/setup-node@v3
        with:
          node-version: '18'
          cache: 'npm'
      - name: Install dependencies
        run: npm ci
      - name: Run tests
        run: npm test
      - name: Run linting
        run: npm run lint

  deploy:
    needs: test
    runs-on: ubuntu-latest
    if: github.ref == 'refs/heads/main'
    steps:
      - uses: actions/checkout@v3
      - name: Deploy to Vercel
        uses: amondnet/vercel-action@v20
        with:
          vercel-token: ${{ secrets.VERCEL_TOKEN }}
          vercel-org-id: ${{ secrets.ORG_ID }}
          vercel-project-id: ${{ secrets.PROJECT_ID }}

GitLab CI/CD

yaml

# .gitlab-ci.yml
stages:
  - test
  - build
  - deploy

test:
  stage: test
  script:
    - npm install
    - npm test
    - npm run lint

build:
  stage: build
  script:
    - npm install
    - npm run build
  artifacts:
    paths:
      - dist/

deploy:
  stage: deploy
  script:
    - npm run deploy
  only:
    - main

环境管理

环境变量

使用环境变量管理不同的环境。

bash

# .env.local
NEXT_PUBLIC_API_URL=http://localhost:3000/api
DATABASE_URL=postgresql://localhost:5432/myapp_dev

# .env.production
NEXT_PUBLIC_API_URL=https://api.myapp.com
DATABASE_URL=postgresql://prod-server:5432/myapp_prod

环境配置

javascript

// config/environment.js
const environments = {
  development: {
    apiUrl: 'http://localhost:3000',
    debug: true
  },
  staging: {
    apiUrl: 'https://staging-api.myapp.com',
    debug: false
  },
  production: {
    apiUrl: 'https://api.myapp.com',
    debug: false
  }
};

export default environments[process.env.NODE_ENV || 'development'];

构建优化

包分析

分析和优化您的构建包。

json

{
  "scripts": {
    "build": "next build",
    "build:analyze": "ANALYZE=true next build",
    "build:profile": "next build --profile"
  }
}

性能优化

代码分割：实现动态导入
Tree Shaking：移除未使用的代码
压缩：压缩 JavaScript 和 CSS
图片优化：为 Web 优化图片
缓存：实现适当的缓存策略

Docker 部署

Dockerfile

dockerfile

# Dockerfile
FROM node:18-alpine AS base

# 仅在需要时安装依赖项
FROM base AS deps
RUN apk add --no-cache libc6-compat
WORKDIR /app

COPY package.json package-lock.json* ./
RUN npm ci --only=production

# 仅在需要时重新构建源代码
FROM base AS builder
WORKDIR /app
COPY --from=deps /app/node_modules ./node_modules
COPY . .

RUN npm run build

# 生产镜像，复制所有文件并运行 next
FROM base AS runner
WORKDIR /app

ENV NODE_ENV production

RUN addgroup --system --gid 1001 nodejs
RUN adduser --system --uid 1001 nextjs

COPY --from=builder /app/public ./public
COPY --from=builder --chown=nextjs:nodejs /app/.next/standalone ./
COPY --from=builder --chown=nextjs:nodejs /app/.next/static ./.next/static

USER nextjs

EXPOSE 3000

ENV PORT 3000

CMD ["node", "server.js"]

Docker Compose

yaml

# docker-compose.yml
version: '3.8'
services:
  app:
    build: .
    ports:
      - "3000:3000"
    environment:
      - NODE_ENV=production
      - DATABASE_URL=postgresql://postgres:password@db:5432/myapp
    depends_on:
      - db

  db:
    image: postgres:15
    environment:
      - POSTGRES_DB=myapp
      - POSTGRES_USER=postgres
      - POSTGRES_PASSWORD=password
    volumes:
      - postgres_data:/var/lib/postgresql/data

volumes:
  postgres_data:

部署监控

健康检查

javascript

// pages/api/health.js
export default function handler(req, res) {
  const healthcheck = {
    uptime: process.uptime(),
    message: 'OK',
    timestamp: Date.now()
  };
  
  try {
    res.status(200).send(healthcheck);
  } catch (error) {
    healthcheck.message = error;
    res.status(503).send();
  }
}

错误跟踪

集成错误跟踪服务，如 Sentry。

javascript

// sentry.config.js
import * as Sentry from '@sentry/nextjs';

Sentry.init({
  dsn: process.env.SENTRY_DSN,
  environment: process.env.NODE_ENV,
  tracesSampleRate: 1.0
});

部署策略

蓝绿部署

部署到新环境（绿色）
测试新环境
将流量从旧环境（蓝色）切换到新环境（绿色）
保留旧环境作为备份

滚动部署

部署到服务器子集
逐渐增加新版本的流量
监控问题
完成推出或根据需要回滚

金丝雀部署

部署到一小部分用户
监控指标和用户反馈
逐渐增加流量
根据结果进行完整推出或回滚

回滚策略

自动回滚

yaml

# .github/workflows/deploy-with-rollback.yml
- name: Deploy with rollback
  run: |
    # 部署新版本
    vercel --prod
    
    # 健康检查
    if ! curl -f https://myapp.com/api/health; then
      echo "健康检查失败，正在回滚"
      vercel rollback --prod
      exit 1
    fi

手动回滚

bash

# 回滚到上一个版本
vercel rollback --prod

# 回滚到特定部署
vercel rollback [deployment-url] --prod

安全最佳实践

环境变量

永远不要将机密信息提交到版本控制
使用安全的机密管理服务
定期轮换机密信息
为不同环境使用不同的机密信息

HTTPS 配置

javascript

// next.config.js
module.exports = {
  async headers() {
    return [
      {
        source: '/(.*)',
        headers: [
          {
            key: 'Strict-Transport-Security',
            value: 'max-age=31536000; includeSubDomains'
          },
          {
            key: 'X-Frame-Options',
            value: 'DENY'
          },
          {
            key: 'X-Content-Type-Options',
            value: 'nosniff'
          }
        ]
      }
    ];
  }
};

故障排除

常见问题

构建失败
- 检查构建日志中的错误
- 验证依赖项和版本
- 确保设置了环境变量
部署超时
- 优化构建过程
- 增加超时限制
- 使用构建缓存
运行时错误
- 检查应用程序日志
- 验证环境配置
- 使用生产设置进行本地测试

调试工具

bash

# 检查部署状态
vercel ls

# 查看部署日志
vercel logs [deployment-url]

# 检查部署
vercel inspect [deployment-url]

最佳实践

自动化测试：在部署前运行全面测试
预发布环境：在类似生产的环境中测试
渐进式推出：使用金丝雀或蓝绿部署
监控：实施全面的监控和警报
文档：记录部署过程和配置
备份策略：维护备份和恢复程序
安全性：遵循部署的安全最佳实践
性能：监控和优化应用程序性能

部署 ​

概述 ​

部署平台 ​

Vercel ​

快速部署 ​

配置 ​

Netlify ​

设置 ​

构建配置 ​

AWS ​

S3 静态托管 ​

CI/CD 集成 ​

GitHub Actions ​

GitLab CI/CD ​

环境管理 ​

环境变量 ​

环境配置 ​

构建优化 ​

包分析 ​

性能优化 ​

Docker 部署 ​

Dockerfile ​

Docker Compose ​

部署监控 ​

健康检查 ​

错误跟踪 ​

部署策略 ​

蓝绿部署 ​

滚动部署 ​

金丝雀部署 ​

回滚策略 ​

自动回滚 ​

手动回滚 ​

安全最佳实践 ​

环境变量 ​

HTTPS 配置 ​

故障排除 ​

常见问题 ​

调试工具 ​

最佳实践 ​

相关文章 ​

部署

概述

部署平台

Vercel

快速部署

配置

Netlify

设置

构建配置

AWS

S3 静态托管

CI/CD 集成

GitHub Actions

GitLab CI/CD

环境管理

环境变量

环境配置

构建优化

包分析

性能优化

Docker 部署

Dockerfile

Docker Compose

部署监控

健康检查

错误跟踪

部署策略

蓝绿部署

滚动部署

金丝雀部署

回滚策略

自动回滚

手动回滚

安全最佳实践

环境变量

HTTPS 配置

故障排除

常见问题

调试工具

最佳实践

相关文章