【完全版】GitHub ActionsでWeb制作の自動デプロイを実現！CI/CD構築から実装まで実例を踏まえて詳しく解説

# 新しいプロジェクトの場合
mkdir my-website
cd my-website
git init
git remote add origin https://github.com/your-username/my-website.git

# 既存プロジェクトの場合は、リポジトリをクローン
git clone https://github.com/your-username/my-website.git
cd my-website

# ワークフローディレクトリを作成
mkdir -p .github/workflows

# .github/workflows/test.yml
name: Test Workflow

# このワークフローを実行するトリガー
on:
  push:
    branches:
      - main  # mainブランチへのプッシュ時に実行
  pull_request:
    branches:
      - main  # mainブランチへのPR時に実行

# ジョブの定義
jobs:
  test:
    # 実行環境
    runs-on: ubuntu-latest

    # ステップの定義
    steps:
      # 1. リポジトリのコードをチェックアウト
      - name: Checkout code
        uses: actions/checkout@v4

      # 2. Node.jsのセットアップ
      - name: Setup Node.js
        uses: actions/setup-node@v4
        with:
          node-version: '20'

      # 3. 依存関係のインストール
      - name: Install dependencies
        run: npm ci

      # 4. テストの実行
      - name: Run tests
        run: npm test

      # 5. ビルドの実行
      - name: Build
        run: npm run build

# .github/workflows/deploy-ftp.yml
name: Deploy to FTP Server

on:
  push:
    branches:
      - main  # mainブランチへのプッシュ時に実行

jobs:
  deploy:
    runs-on: ubuntu-latest

    steps:
      # 1. リポジトリをチェックアウト
      - name: Checkout code
        uses: actions/checkout@v4

      # 2. Node.jsのセットアップ（ビルドが必要な場合）
      - name: Setup Node.js
        uses: actions/setup-node@v4
        with:
          node-version: '20'

      # 3. 依存関係のインストール
      - name: Install dependencies
        run: npm ci

      # 4. プロジェクトのビルド
      - name: Build project
        run: npm run build

      # 5. FTPデプロイ
      - name: Deploy via FTP
        uses: SamKirkland/FTP-Deploy-Action@v4.3.5
        with:
          # FTP接続情報（Secretsから取得）
          server: ${{ secrets.FTP_SERVER }}
          username: ${{ secrets.FTP_USERNAME }}
          password: ${{ secrets.FTP_PASSWORD }}

          # デプロイ設定
          local-dir: ./dist/        # ローカルのデプロイ対象ディレクトリ
          server-dir: /public_html/ # サーバー側のディレクトリ

          # 除外ファイル・ディレクトリ
          exclude: |
            **/.git*
            **/.git*/**
            **/node_modules/**
            **/.env
            **/.DS_Store

          # その他の設定
          dangerous-clean-slate: false  # サーバー側を完全削除しない
          dry-run: false                # 実際にデプロイを実行

# .github/workflows/deploy-s3.yml
name: Deploy to AWS S3

on:
  push:
    branches:
      - main

jobs:
  deploy:
    runs-on: ubuntu-latest

    steps:
      - name: Checkout code
        uses: actions/checkout@v4

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

      - name: Install dependencies
        run: npm ci

      - name: Build
        run: npm run build

      # AWS認証情報の設定
      - name: Configure AWS credentials
        uses: aws-actions/configure-aws-credentials@v4
        with:
          aws-access-key-id: ${{ secrets.AWS_ACCESS_KEY_ID }}
          aws-secret-access-key: ${{ secrets.AWS_SECRET_ACCESS_KEY }}
          aws-region: ap-northeast-1

      # S3へのデプロイ
      - name: Deploy to S3
        run: |
          aws s3 sync ./dist s3://your-bucket-name --delete

      # CloudFrontのキャッシュ削除（オプション）
      - name: Invalidate CloudFront
        run: |
          aws cloudfront create-invalidation \
            --distribution-id ${{ secrets.CLOUDFRONT_DISTRIBUTION_ID }} \
            --paths "/*"

# .github/workflows/deploy-netlify.yml
name: Deploy to Netlify

on:
  push:
    branches:
      - main

jobs:
  deploy:
    runs-on: ubuntu-latest

    steps:
      - name: Checkout code
        uses: actions/checkout@v4

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

      - name: Install dependencies
        run: npm ci

      - name: Build
        run: npm run build

      # Netlifyへのデプロイ
      - name: Deploy to Netlify
        uses: nwtgck/actions-netlify@v3.0
        with:
          publish-dir: './dist'
          production-branch: main
          github-token: ${{ secrets.GITHUB_TOKEN }}
          deploy-message: "Deploy from GitHub Actions"
        env:
          NETLIFY_AUTH_TOKEN: ${{ secrets.NETLIFY_AUTH_TOKEN }}
          NETLIFY_SITE_ID: ${{ secrets.NETLIFY_SITE_ID }}

# .github/workflows/deploy-vercel.yml
name: Deploy to Vercel

on:
  push:
    branches:
      - main

jobs:
  deploy:
    runs-on: ubuntu-latest

    steps:
      - name: Checkout code
        uses: actions/checkout@v4

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

      - name: Install Vercel CLI
        run: npm install --global vercel@latest

      # Vercelへのデプロイ
      - name: Pull Vercel Environment Information
        run: vercel pull --yes --environment=production --token=${{ secrets.VERCEL_TOKEN }}

      - name: Build Project Artifacts
        run: vercel build --prod --token=${{ secrets.VERCEL_TOKEN }}

      - name: Deploy to Vercel
        run: vercel deploy --prebuilt --prod --token=${{ secrets.VERCEL_TOKEN }}

# .github/workflows/ci-cd.yml
name: CI/CD Pipeline

on:
  push:
    branches:
      - main
      - develop
  pull_request:
    branches:
      - main
      - develop

# 環境変数の定義
env:
  NODE_VERSION: '20'

jobs:
  # ジョブ1：コード品質チェック
  quality-check:
    runs-on: ubuntu-latest

    steps:
      - name: Checkout code
        uses: actions/checkout@v4

      - name: Setup Node.js
        uses: actions/setup-node@v4
        with:
          node-version: ${{ env.NODE_VERSION }}
          cache: 'npm'

      - name: Install dependencies
        run: npm ci

      # ESLintによる静的解析
      - name: Run ESLint
        run: npm run lint

      # Prettierによるフォーマットチェック
      - name: Check code formatting
        run: npm run format:check

      # TypeScriptの型チェック
      - name: Type check
        run: npm run type-check

  # ジョブ2：テスト実行
  test:
    runs-on: ubuntu-latest
    needs: quality-check

    steps:
      - name: Checkout code
        uses: actions/checkout@v4

      - name: Setup Node.js
        uses: actions/setup-node@v4
        with:
          node-version: ${{ env.NODE_VERSION }}
          cache: 'npm'

      - name: Install dependencies
        run: npm ci

      # ユニットテスト
      - name: Run unit tests
        run: npm run test:unit

      # E2Eテスト
      - name: Run E2E tests
        run: npm run test:e2e

      # カバレッジレポートの生成
      - name: Generate coverage report
        run: npm run test:coverage

      # カバレッジをCodecovにアップロード
      - name: Upload coverage to Codecov
        uses: codecov/codecov-action@v4
        with:
          token: ${{ secrets.CODECOV_TOKEN }}
          files: ./coverage/coverage-final.json

  # ジョブ3：セキュリティチェック
  security:
    runs-on: ubuntu-latest
    needs: quality-check

    steps:
      - name: Checkout code
        uses: actions/checkout@v4

      - name: Setup Node.js
        uses: actions/setup-node@v4
        with:
          node-version: ${{ env.NODE_VERSION }}

      - name: Install dependencies
        run: npm ci

      # 依存関係の脆弱性チェック
      - name: Run npm audit
        run: npm audit --audit-level=moderate

      # Snykによるセキュリティスキャン
      - name: Run Snyk security scan
        uses: snyk/actions/node@master
        env:
          SNYK_TOKEN: ${{ secrets.SNYK_TOKEN }}

  # ジョブ4：ビルド
  build:
    runs-on: ubuntu-latest
    needs: [test, security]

    steps:
      - name: Checkout code
        uses: actions/checkout@v4

      - name: Setup Node.js
        uses: actions/setup-node@v4
        with:
          node-version: ${{ env.NODE_VERSION }}
          cache: 'npm'

      - name: Install dependencies
        run: npm ci

      - name: Build project
        run: npm run build

      # ビルド成果物をアーティファクトとして保存
      - name: Upload build artifacts
        uses: actions/upload-artifact@v4
        with:
          name: build-artifacts
          path: dist/
          retention-days: 7

  # ジョブ5：デプロイ（mainブランチのみ）
  deploy:
    runs-on: ubuntu-latest
    needs: build
    if: github.ref == 'refs/heads/main' && github.event_name == 'push'

    steps:
      - name: Checkout code
        uses: actions/checkout@v4

      # ビルド成果物をダウンロード
      - name: Download build artifacts
        uses: actions/download-artifact@v4
        with:
          name: build-artifacts
          path: dist/

      # FTPデプロイ
      - name: Deploy to production
        uses: SamKirkland/FTP-Deploy-Action@v4.3.5
        with:
          server: ${{ secrets.FTP_SERVER }}
          username: ${{ secrets.FTP_USERNAME }}
          password: ${{ secrets.FTP_PASSWORD }}
          local-dir: ./dist/
          server-dir: /public_html/

      # Slackに通知（オプション）
      - name: Notify deployment success
        uses: 8398a7/action-slack@v3
        with:
          status: ${{ job.status }}
          text: 'Deployment to production completed successfully!'
          webhook_url: ${{ secrets.SLACK_WEBHOOK }}
        if: always()