デプロイメント

TRAEは、様々なプラットフォームや環境にアプリケーションをデプロイするための包括的なデプロイメント機能を提供します。このガイドでは、デプロイメント機能、設定オプション、ベストプラクティスについて説明します。

概要

TRAEのデプロイメントシステムは以下をサポートします：

• 複数のデプロイメントプラットフォーム（Vercel、Netlify、AWSなど）
• 自動化されたCI/CDパイプライン
• 環境管理
• ビルド最適化
• デプロイメント監視

デプロイメントプラットフォーム

Vercel

TRAEはVercelとの組み込み統合により、シームレスなWebアプリケーションデプロイメントを提供します。

クイックデプロイ

1. AIチャットパネルのデプロイボタンをクリック
2. またはブラウザパネルの右上角のデプロイボタンをクリック
3. デプロイメント設定を構成
4. デプロイメントプロセスを開始

設定

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

Netlify

静的サイトとサーバーレス関数をNetlifyにデプロイします。

セットアップ

1. リポジトリを接続
2. ビルド設定を構成
3. 環境変数を設定
4. プッシュ時に自動デプロイ

ビルド設定

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

[build.environment]
  NODE_VERSION = "18"

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

AWS

S3、EC2、Lambdaなど、様々なAWSサービスにデプロイします。

S3静的ホスティング

# .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でデプロイメントを自動化します。

# .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

# .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

環境管理

環境変数

環境変数で異なる環境を管理します。

# .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

環境設定

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

ビルド最適化

バンドル分析

ビルドバンドルを分析・最適化します。

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

パフォーマンス最適化

1. コード分割: 動的インポートを実装
2. ツリーシェイキング: 未使用コードを削除
3. ミニフィケーション: JavaScriptとCSSを圧縮
4. 画像最適化: Web用に画像を最適化
5. キャッシュ: 適切なキャッシュ戦略を実装

Dockerデプロイメント

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

# 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:

デプロイメント監視

ヘルスチェック

// 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などのエラー追跡サービスを統合します。

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

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

デプロイメント戦略

ブルーグリーンデプロイメント

1. 新しい環境（グリーン）にデプロイ
2. 新しい環境をテスト
3. 古い環境（ブルー）から新しい環境（グリーン）にトラフィックを切り替え
4. 古い環境をバックアップとして保持

ローリングデプロイメント

1. サーバーのサブセットにデプロイ
2. 新しいバージョンへのトラフィックを徐々に増加
3. 問題を監視
4. 完全なロールアウトまたは問題があればロールバック

カナリアデプロイメント

1. 少数のユーザーにデプロイ
2. メトリクスとユーザーフィードバックを監視
3. トラフィックを徐々に増加
4. 結果に基づいて完全なロールアウトまたはロールバック

ロールバック戦略

自動ロールバック

# .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

手動ロールバック

# 前のバージョンにロールバック
vercel rollback --prod

# 特定のデプロイメントにロールバック
vercel rollback [deployment-url] --prod

セキュリティベストプラクティス

環境変数

1. シークレットをバージョン管理にコミットしない
2. 安全なシークレット管理サービスを使用
3. シークレットを定期的にローテーション
4. 異なる環境で異なるシークレットを使用

HTTPS設定

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

トラブルシューティング

一般的な問題

1. ビルド失敗

   • エラーのビルドログを確認
   • 依存関係とバージョンを確認
   • 環境変数が設定されていることを確認

2. デプロイメントタイムアウト

   • ビルドプロセスを最適化
   • タイムアウト制限を増加
   • ビルドキャッシュを使用

3. ランタイムエラー

   • アプリケーションログを確認
   • 環境設定を確認
   • 本番設定でローカルテスト

デバッグツール

# デプロイメント状態を確認
vercel ls

# デプロイメントログを表示
vercel logs [deployment-url]

# デプロイメントを検査
vercel inspect [deployment-url]

ベストプラクティス

1. 自動テスト: デプロイメント前に包括的なテストを実行
2. ステージング環境: 本番環境に似た環境でテスト
3. 段階的ロールアウト: カナリアまたはブルーグリーンデプロイメントを使用
4. 監視: 包括的な監視とアラートを実装
5. ドキュメント: デプロイメントプロセスと設定を文書化
6. バックアップ戦略: バックアップと復旧手順を維持
7. セキュリティ: デプロイメントのセキュリティベストプラクティスに従う
8. パフォーマンス: アプリケーションパフォーマンスを監視・最適化

関連記事

• SOLOビルダー
• SOLOモード
• プロジェクト開発
• 環境管理