GitHub Actionsで自動デプロイ環境を作る｜初心者向けCI/CD入門

「コードを修正するたびに、手動でビルド→デプロイするのが面倒...」「GitHubにpushしたら、自動でサイトが更新されたら便利なのに」。そんな悩みを解決するのがGitHub Actionsです。この記事では、CI/CDの基礎から、実際にGitHub Actionsでワークフローを作成し、GitHub Pagesへ自動デプロイする方法を、初心者でもわかるように詳しく解説します。

CI/CDとGitHub Actionsの基礎知識

CI/CDとは？

CI（Continuous Integration：継続的インテグレーション）：
コードの変更を頻繁にリポジトリに統合し、自動でテストを実行する仕組みです。

• コードをpushするたびに、自動でテストが走る
• バグを早期に発見できる
• チーム開発で、統合時の問題を減らせる

CD（Continuous Deployment：継続的デプロイ）：
テストに合格したコードを、自動で本番環境にデプロイする仕組みです。

• 手動デプロイの手間がなくなる
• デプロイミスを防げる
• リリースサイクルが速くなる

GitHub Actionsとは？

GitHub Actionsは、GitHubが提供する無料のCI/CDツールです。

• 完全無料：パブリックリポジトリなら無制限（プライベートは月2,000分まで無料）
• GitHub統合：リポジトリ内で完結、外部サービス不要
• 豊富なアクション：コミュニティ製のアクションを簡単に利用可能
• 柔軟性：YAML形式で、自由にワークフローを定義

実践：GitHub Pagesへの自動デプロイ

前提条件

• GitHubアカウントを持っている
• デプロイしたいリポジトリがある
• GitHub Pagesの設定が完了している

ステップ1: ワークフローファイルの作成

リポジトリのルートに、.github/workflows/フォルダを作成し、その中にYAMLファイルを配置します。

# .github/workflows/deploy.yml
name: Deploy to GitHub Pages

on:
  push:
    branches:
      - main  # mainブランチにpushされたら実行

jobs:
  deploy:
    runs-on: ubuntu-latest

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

      - name: Deploy to GitHub Pages
        uses: peaceiris/actions-gh-pages@v3
        with:
          github_token: ${{ secrets.GITHUB_TOKEN }}
          publish_dir: ./  # デプロイするディレクトリ

ステップ2: 各項目の解説

name: ワークフローの名前（任意）

name: Deploy to GitHub Pages

on: ワークフローを実行するトリガー

on:
  push:
    branches:
      - main  # mainブランチへのpushで実行
  # 他のトリガー例:
  # pull_request:  # PRが作成されたら
  # schedule:      # 定期実行
  #   - cron: '0 0 * * *'  # 毎日0時

jobs: 実行するジョブの定義

jobs:
  deploy:  # ジョブ名
    runs-on: ubuntu-latest  # 実行環境（Ubuntu最新版）

steps: ジョブ内で実行するステップ

steps:
  - name: Checkout code  # リポジトリのコードを取得
    uses: actions/checkout@v3

  - name: Deploy to GitHub Pages
    uses: peaceiris/actions-gh-pages@v3  # デプロイ用アクション
    with:
      github_token: ${{ secrets.GITHUB_TOKEN }}  # 認証トークン
      publish_dir: ./  # デプロイするディレクトリ

ステップ3: ファイルをコミット＆プッシュ

git add .github/workflows/deploy.yml
git commit -m "Add GitHub Actions workflow for deployment"
git push origin main

ステップ4: 実行確認

1. GitHubのリポジトリページにアクセス
2. 「Actions」タブをクリック
3. ワークフローの実行状況を確認
4. 緑のチェックマークが表示されれば成功！

応用例：ビルドプロセスを含むデプロイ

例1: Node.jsプロジェクトのビルド + デプロイ

name: Build and Deploy

on:
  push:
    branches:
      - main

jobs:
  build-and-deploy:
    runs-on: ubuntu-latest

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

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

      - name: Install dependencies
        run: npm install

      - name: Build
        run: npm run build

      - name: Deploy to GitHub Pages
        uses: peaceiris/actions-gh-pages@v3
        with:
          github_token: ${{ secrets.GITHUB_TOKEN }}
          publish_dir: ./dist  # ビルド後のディレクトリ

例2: 複数環境へのデプロイ

name: Deploy to Multiple Environments

on:
  push:
    branches:
      - main      # 本番環境
      - develop   # 開発環境

jobs:
  deploy:
    runs-on: ubuntu-latest

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

      - name: Deploy to Production
        if: github.ref == 'refs/heads/main'
        uses: peaceiris/actions-gh-pages@v3
        with:
          github_token: ${{ secrets.GITHUB_TOKEN }}
          publish_dir: ./
          cname: www.example.com  # 本番ドメイン

      - name: Deploy to Staging
        if: github.ref == 'refs/heads/develop'
        uses: peaceiris/actions-gh-pages@v3
        with:
          github_token: ${{ secrets.GITHUB_TOKEN }}
          publish_dir: ./
          publish_branch: gh-pages-staging

よくあるエラーと解決策

エラー1: Permission denied (publickey)

原因：GitHub Actionsが、リポジトリへのアクセス権限を持っていない

解決策：

• リポジトリのSettings → Actions → General → Workflow permissions
• 「Read and write permissions」を選択
• 「Save」をクリック

エラー2: Node.js version mismatch

原因：ローカルとGitHub Actions環境でNode.jsのバージョンが異なる

解決策：

- name: Setup Node.js
  uses: actions/setup-node@v3
  with:
    node-version: '18'  # ローカルと同じバージョンを指定

エラー3: Build failed

原因：依存パッケージのインストール失敗、環境変数の不足など

解決策：

• Actionsタブで詳細なエラーログを確認
• 環境変数が必要なら、Settings → Secrets → Actionsで設定
• ローカルでnpm run buildが成功するか確認

GitHub Actionsの便利なTips

Tip 1: キャッシュを使って高速化

- name: Cache node modules
  uses: actions/cache@v3
  with:
    path: ~/.npm
    key: ${{ runner.os }}-node-${{ hashFiles('**/package-lock.json') }}
    restore-keys: |
      ${{ runner.os }}-node-

Tip 2: 環境変数を使う

- name: Build with environment variables
  env:
    API_KEY: ${{ secrets.API_KEY }}
    NODE_ENV: production
  run: npm run build

Tip 3: 複数ジョブの並列実行

jobs:
  test:
    runs-on: ubuntu-latest
    steps:
      - name: Run tests
        run: npm test

  lint:
    runs-on: ubuntu-latest
    steps:
      - name: Run linter
        run: npm run lint

  deploy:
    needs: [test, lint]  # test と lint が成功したら実行
    runs-on: ubuntu-latest
    steps:
      - name: Deploy
        run: npm run deploy

GitHub Actionsのメリット・デメリット

メリット

• 完全無料：パブリックリポジトリなら無制限
• 設定が簡単：YAMLファイル1つで完結
• GitHub統合：外部サービス不要
• 豊富なアクション：コミュニティ製のアクションが多数
• 柔軟性：複雑なワークフローも実現可能

デメリット

• 学習コスト：YAMLの書き方、アクションの使い方を学ぶ必要がある
• デバッグが難しい：ローカルで実行できないため、トライ&エラーが必要
• 実行時間制限：1ジョブ最大6時間、1ワークフロー最大72時間

まとめ

GitHub Actionsを使えば、無料で簡単にCI/CD環境を構築できます。このページのポイントをまとめます：

• CI/CD：継続的インテグレーション・デプロイで、開発効率を大幅向上
• GitHub Actions：無料、GitHub統合、豊富なアクション
• 基本ワークフロー：Checkout → Build → Deploy の3ステップ
• 応用：複数環境デプロイ、キャッシュ、並列実行
• エラー対処：権限設定、バージョン一致、ログ確認

手動デプロイから解放され、コードを書くことに集中できるようになります。ぜひGitHub Actionsを導入してみてください！