CI/CD SERIES

CI/CD編

GitHub Actionsで自動化

テスト自動実行 自動デプロイ ワークフロー構築

→ キーで次へ

この編の全体像

ゴール: GitHub Actionsでテスト・ビルド・デプロイを自動化し、手作業のミスをなくす

Section 1

CI/CDとは

手動 vs 自動の比較
→ なぜ手動は危険か（問題意識）

Section 2

Actionsの仕組み

GitHub Actions全体像
→ Event→Workflow→Job→Stepの構造を理解

Section 3

ワークフロー構文

YAMLの書き方・配置場所
→ YAMLで自動化を書けるようになる

Section 4

実践（テスト・デプロイ）

CI/CDパイプライン構築
→ 実際に動くパイプラインを作る

Section 5

応用（Secrets・Matrix・Cache）

セキュリティ・並列テスト・高速化
→ 本番運用に必要な技術を知る

Section 6

デバッグ

エラー調査・ローカル実行
→ 失敗したときの対処法を身につける

CI/CDとは？

BEFORE: 手動の世界

1. コードを書く
2. 手動でテストを実行
3. 「動いたっぽい」で本番へ
4. バグ発覚、深夜の緊急対応...
ミスが起きやすく、時間もかかる

AFTER: CI/CDの世界

1. コードをpush
2. 自動でテスト実行
3. 全テスト通過 → 自動でデプロイ
4. 問題があれば即検知・通知
安全・高速・再現可能

CI = Continuous Integration（継続的インテグレーション）— pushするたびに自動テスト
CD = Continuous Deployment（継続的デプロイ）— テスト通過後に自動で本番反映

GitHub Actionsの仕組み

GitHubに組み込まれたCI/CDプラットフォーム。無料枠あり。

EVENT

push, PR作成
スケジュール etc.

→

WORKFLOW

.ymlファイル
自動化の定義

→

JOB

仮想マシン上で
実行される単位

→

STEP

個々のコマンド
やアクション

イベントが発生 → ワークフローが起動 → ジョブがVMで実行 → ステップを順番に処理

ワークフローファイルの場所

リポジトリ内の決まった場所にYAMLファイルを置く

ディレクトリ構成

my-project/
├── src/
├── package.json
└── .github/
    └── workflows/
        ├── ci.yml
        └── deploy.yml
Terminal — setup

YAMLの基本構文

最小限のワークフローを読んでみよう

name: My First Workflow # ワークフロー名

on: # いつ実行するか
  push:
    branches: [ main ]
  pull_request:
    branches: [ main ]

jobs: # 実行するジョブ
  build: # ジョブ名（自由に命名）
    runs-on: ubuntu-latest # 実行環境

    steps: # ステップ一覧
      - uses: actions/checkout@v4 # コード取得
      - run: echo "Hello, CI!" # コマンド実行

name

ActionsタブでのUI表示名

on

トリガー条件。pushやPR作成時

runs-on

Ubuntu/macOS/Windowsが選べる

steps

usesで既製アクション、runでシェルコマンド

実践: テスト自動化

pushやPRのたびにテストを自動実行

name: Run Tests

on: [push, pull_request]

jobs:
  test:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v4
      - uses: actions/setup-node@v4
        with:
          node-version: 20
      - run: npm ci
      - run: npm test
Terminal — push & test

実践: 自動デプロイ

mainブランチにpushしたら自動でGitHub Pagesにデプロイ

name: Deploy to Pages

on:
  push:
    branches: [ main ] # mainのみ

permissions:
  pages: write
  id-token: write

jobs:
  deploy:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v4
      - uses: actions/setup-node@v4
        with:
          node-version: 20
      - run: npm ci && npm run build
      - uses: actions/upload-pages-artifact@v3
        with:
          path: dist
      - uses: actions/deploy-pages@v4

トリガー

mainへのpush時のみ実行。PR時はデプロイしない。

permissions

GitHub Pagesへの書き込み権限を付与。

ビルド → デプロイ

npm run buildで生成 → dist/フォルダをPagesにアップロード。

Actions マーケットプレイス

よく使うアクションは既に誰かが作ってくれている

actions/checkout@v4

リポジトリのコードを取得。
ほぼ全てのワークフローで必須

actions/setup-node@v4

Node.jsをインストール。
バージョン指定も可能。

actions/cache@v4

依存関係をキャッシュ。
ワークフロー高速化の定番。

actions/deploy-pages@v4

GitHub Pagesへデプロイ。
静的サイトの公開に。

探し方: github.com/marketplace?type=actions で検索
使い方: uses: 作者/アクション名@バージョン で指定

Secrets（シークレット）

APIキーやトークンを安全にワークフローで使う

やってはいけない

run: curl -H "token: sk-abc123..."
# コードにAPIキー直書き = 漏洩リスク

正しい方法

Settings → Secrets and variables → Actions → New secret

steps:
  - run: curl -H "token: ${{ secrets.API_KEY }}"
    env:
      MY_TOKEN: ${{ secrets.MY_TOKEN }}

ポイント

  • ログには *** でマスクされる
  • Forkからは読めない（安全）
  • リポジトリ単位 or Organization単位で設定可
  • GITHUB_TOKEN は自動で利用可能

環境（Environments）

本番・ステージングを分けて安全にデプロイ

development

開発環境
誰でもデプロイ可

→

staging

検証環境
自動テスト後に

→

production

本番環境
承認必須

YAMLでの指定

jobs:
  deploy:
    environment: production
    runs-on: ubuntu-latest

保護ルール

  • 承認者によるレビュー必須
  • 待機タイマー（例: 30分後に実行）
  • 特定ブランチのみ許可
  • 環境ごとのSecretsを設定可

Matrix Strategy

複数バージョン・OSの組み合わせを一気にテスト

jobs:
  test:
    strategy:
      matrix:
        node-version: [18, 20, 22]
        os: [ubuntu-latest, macos-latest]
    runs-on: ${{ matrix.os }}
    steps:
      - uses: actions/checkout@v4
      - uses: actions/setup-node@v4
        with:
          node-version: ${{ matrix.node-version }}
      - run: npm ci && npm test

生成されるジョブ（3 x 2 = 6個）

Node 18 Ubuntu
Node 18 macOS
Node 20 Ubuntu
Node 20 macOS
Node 22 Ubuntu
Node 22 macOS

全て並列で実行される → 高速

キャッシュで高速化

依存関係のインストールを毎回やらない

steps:
  - uses: actions/checkout@v4
  - uses: actions/setup-node@v4
    with:
      node-version: 20
      cache: 'npm' # これだけでOK!
  - run: npm ci
  - run: npm test

キャッシュなし

~2分30秒

npm ci が毎回全パッケージをダウンロード

キャッシュあり

~45秒

キャッシュヒットで即座にリストア

約70%の時間短縮！

ワークフローのデバッグ

失敗したとき、どう調べるか

Terminal — debug

よくあるエラー

  • インデントのずれ（YAMLは厳密）
  • Secretsの名前ミス
  • permissionsの不足
  • Node/Pythonバージョン違い

調べ方

  • Actions タブでログ確認
  • gh run view でCLIから確認
  • gh run view --log-failed
  • act でローカル実行

実践: 完全なCI/CDパイプライン

Lint → Test → Build → Deploy の全自動化

STEP 1

Lint

コード品質チェック

→

STEP 2

Test

自動テスト実行

→

STEP 3

Build

本番用ビルド

→

STEP 4

Deploy

本番デプロイ

name: CI/CD Pipeline
on:
  push:
    branches: [ main ]

jobs:
  lint:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v4
      - uses: actions/setup-node@v4
        with: { node-version: 20, cache: 'npm' }
      - run: npm ci
      - run: npm run lint

  test:
    needs: lint # lint完了後に実行
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v4
      - uses: actions/setup-node@v4
        with: { node-version: 20, cache: 'npm' }
      - run: npm ci
      - run: npm test

  build-and-deploy:
    needs: test # test完了後に実行
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v4
      - uses: actions/setup-node@v4
        with: { node-version: 20, cache: 'npm' }
      - run: npm ci && npm run build
      - uses: actions/deploy-pages@v4

まとめ

🔄

CI/CDで自動化

テスト・ビルド・デプロイを手動から解放

📝

YAMLで定義

.github/workflows/にYAMLファイルを置くだけ

🔒

Secretsで安全に

機密情報はSecrets経由で。直書き厳禁。

⚡

キャッシュで高速化

cache設定で大幅な時間短縮を

BEST PRACTICES

Appendix: コマンドリファレンス

コマンド 説明
mkdir -p .github/workflows ワークフロー用ディレクトリを作成（親ディレクトリも自動作成）
touch .github/workflows/ci.yml ワークフロー定義ファイルを新規作成
git add . 全ての変更をステージングエリアに追加
git commit -m "メッセージ" ステージングされた変更をコミット
git push origin main ローカルの変更をリモートにプッシュ（Actionsのトリガーになる）
npm ci package-lock.jsonに基づいて依存関係をクリーンインストール
npm test プロジェクトのテストスイートを実行
npm run build 本番用のビルドを実行
npm run lint コード品質チェック（リンター）を実行
gh run list GitHub Actionsの実行履歴を一覧表示
gh run view <ID> 特定のワークフロー実行の詳細を表示
gh run view --log-failed 失敗したステップのログのみを表示
ls -la .github/workflows/ ワークフローファイルの一覧と詳細を表示
── YAML キーワード ──
name: ワークフローまたはステップの表示名を定義
on: ワークフローのトリガー条件（push, pull_request等）を指定
jobs: 実行するジョブの定義ブロック
runs-on: ジョブの実行環境を指定（ubuntu-latest, macos-latest等）
steps: ジョブ内で順次実行されるステップの一覧
uses: 既製のアクション（例: actions/checkout@v4）を利用
run: シェルコマンドを直接実行
with: アクションに渡す入力パラメータを指定
needs: ジョブの依存関係を定義（先行ジョブの完了後に実行）
strategy: / matrix: 複数バージョン・OS の組み合わせで並列テストを実行
permissions: ワークフローに付与する権限を指定（pages, id-token等）
environment: デプロイ先の環境（production, staging等）を指定
cache: 依存関係のキャッシュを有効化して高速化
env: 環境変数を設定
${{ secrets.XXX }} リポジトリのSecretsに保存した機密情報を参照
${{ matrix.XXX }} マトリクス戦略で定義した変数を参照
── よく使うアクション ──
actions/checkout@v4 リポジトリのコードをチェックアウト
actions/setup-node@v4 Node.js環境をセットアップ
actions/cache@v4 依存関係やビルド成果物をキャッシュ
actions/upload-pages-artifact@v3 GitHub Pages用のビルド成果物をアップロード
actions/deploy-pages@v4 GitHub Pagesへデプロイ
← → で移動 | g: 最初 | G: 最後