Deployment

TRAE provides comprehensive deployment capabilities to help you deploy your applications to various platforms and environments. This guide covers the deployment features, configuration options, and best practices.

Overview

TRAE's deployment system supports:

Multiple deployment platforms (Vercel, Netlify, AWS, etc.)
Automated CI/CD pipelines
Environment management
Build optimization
Deployment monitoring

Deployment Platforms

Vercel

TRAE has built-in integration with Vercel for seamless web application deployment.

Quick Deploy

Click the deploy button in the AI chat panel
Or click the deploy button in the upper-right corner of the browser panel
Configure your deployment settings
Start the deployment process

Configuration

json

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

Netlify

Deploy static sites and serverless functions to Netlify.

Setup

Connect your repository
Configure build settings
Set environment variables
Deploy automatically on push

Build Configuration

toml

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

[build.environment]
  NODE_VERSION = "18"

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

AWS

Deploy to various AWS services including S3, EC2, and Lambda.

S3 Static Hosting

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 Integration

GitHub Actions

Automate your deployment with 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

Environment Management

Environment Variables

Manage different environments with environment variables.

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

Environment Configuration

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'];

Build Optimization

Bundle Analysis

Analyze and optimize your build bundles.

json

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

Performance Optimization

Code Splitting: Implement dynamic imports
Tree Shaking: Remove unused code
Minification: Compress JavaScript and CSS
Image Optimization: Optimize images for web
Caching: Implement proper caching strategies

Docker Deployment

Dockerfile

dockerfile

# Dockerfile
FROM node:18-alpine AS base

# Install dependencies only when needed
FROM base AS deps
RUN apk add --no-cache libc6-compat
WORKDIR /app

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

# Rebuild the source code only when needed
FROM base AS builder
WORKDIR /app
COPY --from=deps /app/node_modules ./node_modules
COPY . .

RUN npm run build

# Production image, copy all the files and run 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:

Deployment Monitoring

Health Checks

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();
  }
}

Error Tracking

Integrate error tracking services like 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
});

Deployment Strategies

Blue-Green Deployment

Deploy to a new environment (green)
Test the new environment
Switch traffic from old (blue) to new (green)
Keep old environment as backup

Rolling Deployment

Deploy to a subset of servers
Gradually increase traffic to new version
Monitor for issues
Complete rollout or rollback if needed

Canary Deployment

Deploy to a small percentage of users
Monitor metrics and user feedback
Gradually increase traffic
Full rollout or rollback based on results

Rollback Strategies

Automatic Rollback

yaml

# .github/workflows/deploy-with-rollback.yml
- name: Deploy with rollback
  run: |
    # Deploy new version
    vercel --prod
    
    # Health check
    if ! curl -f https://myapp.com/api/health; then
      echo "Health check failed, rolling back"
      vercel rollback --prod
      exit 1
    fi

Manual Rollback

bash

# Rollback to previous version
vercel rollback --prod

# Rollback to specific deployment
vercel rollback [deployment-url] --prod

Security Best Practices

Environment Variables

Never commit secrets to version control
Use secure secret management services
Rotate secrets regularly
Use different secrets for different environments

HTTPS Configuration

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'
          }
        ]
      }
    ];
  }
};

Troubleshooting

Common Issues

Build Failures
- Check build logs for errors
- Verify dependencies and versions
- Ensure environment variables are set
Deployment Timeouts
- Optimize build process
- Increase timeout limits
- Use build caching
Runtime Errors
- Check application logs
- Verify environment configuration
- Test locally with production settings

Debugging Tools

bash

# Check deployment status
vercel ls

# View deployment logs
vercel logs [deployment-url]

# Inspect deployment
vercel inspect [deployment-url]

Best Practices

Automated Testing: Run comprehensive tests before deployment
Staging Environment: Test in production-like environment
Gradual Rollouts: Use canary or blue-green deployments
Monitoring: Implement comprehensive monitoring and alerting
Documentation: Document deployment processes and configurations
Backup Strategy: Maintain backup and recovery procedures
Security: Follow security best practices for deployments
Performance: Monitor and optimize application performance

Deployment ​

Overview ​

Deployment Platforms ​

Vercel ​

Quick Deploy ​

Configuration ​

Netlify ​

Setup ​

Build Configuration ​

AWS ​

S3 Static Hosting ​

CI/CD Integration ​

GitHub Actions ​

GitLab CI/CD ​

Environment Management ​

Environment Variables ​

Environment Configuration ​

Build Optimization ​

Bundle Analysis ​

Performance Optimization ​

Docker Deployment ​

Dockerfile ​

Docker Compose ​

Deployment Monitoring ​

Health Checks ​

Error Tracking ​

Deployment Strategies ​

Blue-Green Deployment ​

Rolling Deployment ​

Canary Deployment ​

Rollback Strategies ​

Automatic Rollback ​

Manual Rollback ​

Security Best Practices ​

Environment Variables ​

HTTPS Configuration ​

Troubleshooting ​

Common Issues ​

Debugging Tools ​

Best Practices ​

Related Articles ​

Deployment

Overview

Deployment Platforms

Vercel

Quick Deploy

Configuration

Netlify

Setup

Build Configuration

AWS

S3 Static Hosting

CI/CD Integration

GitHub Actions

GitLab CI/CD

Environment Management

Environment Variables

Environment Configuration

Build Optimization

Bundle Analysis

Performance Optimization

Docker Deployment

Dockerfile

Docker Compose

Deployment Monitoring

Health Checks

Error Tracking

Deployment Strategies

Blue-Green Deployment

Rolling Deployment

Canary Deployment

Rollback Strategies

Automatic Rollback

Manual Rollback

Security Best Practices

Environment Variables

HTTPS Configuration

Troubleshooting

Common Issues

Debugging Tools

Best Practices

Related Articles