GitHub Actionsの基本

ストーリー

「さて、ここからは手を動かしていくぞ」

木村先輩がターミナルを開いた。

「GitHub Actionsは、GitHubリポジトリに .github/workflows/ ディレクトリを作って、 そこにYAMLファイルを置くだけでCIが動き始める。 サーバーの準備もプラグインのインストールも不要だ」

「本当にそれだけで動くんですか？」

「本当にそれだけだ。まずは基本コンポーネントを理解して、 'Hello, CI/CD!' を走らせてみよう」

GitHub Actionsのアーキテクチャ

基本コンポーネント

GitHub Actionsは以下のコンポーネントで構成されています。

GitHub Actions アーキテクチャ

┌── GitHub リポジトリ ──────────────────────┐
│                                            │
│  .github/workflows/ci.yml  ← ワークフロー定義 │
│                                            │
│  Event (push, PR等)                        │
│    │                                       │
│    ▼                                       │
│  Workflow (ワークフロー)                     │
│    │                                       │
│    ├── Job 1 (ジョブ)                       │
│    │     ├── Step 1 (ステップ)              │
│    │     ├── Step 2                        │
│    │     └── Step 3                        │
│    │                                       │
│    └── Job 2                               │
│          ├── Step 1                        │
│          └── Step 2                        │
│                                            │
└────────────────────────────────────────────┘
         │
         ▼ ジョブを実行
┌──────────────┐
│    Runner      │
│  (実行環境)     │
│  ubuntu-latest │
└──────────────┘

コンポーネントの関係

最初のワークフロー

ディレクトリ構造

my-project/
├── .github/
│   └── workflows/
│       └── hello.yml      ← ワークフロー定義
├── src/
│   └── index.ts
├── package.json
└── README.md

Hello Worldワークフロー

# .github/workflows/hello.yml
name: Hello CI/CD

# いつ実行するか（トリガー）
on:
  push:
    branches: [ main ]
  pull_request:
    branches: [ main ]

# 何を実行するか（ジョブ）
jobs:
  hello:
    # どの環境で実行するか（ランナー）
    runs-on: ubuntu-latest

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

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

      # Step 3: シェルコマンドを実行
      - name: Say hello
        run: echo "Hello, CI/CD!"

      # Step 4: 環境情報を表示
      - name: Show environment
        run: |
          echo "OS: $(uname -a)"
          echo "Node: $(node --version)"
          echo "npm: $(npm --version)"
          echo "Branch: ${{ github.ref }}"
          echo "Commit: ${{ github.sha }}"

Runner（実行環境）

GitHub-hosted Runner

GitHubが管理するクラウド上の仮想マシンです。

Self-hosted Runner

自前のサーバーでジョブを実行する方法です。

Self-hosted Runner の利用シーン

┌────────────────────────────┐
│ GitHub-hosted が適している  │
│ - 一般的なビルド・テスト     │
│ - オープンソースプロジェクト  │
│ - 小〜中規模のプロジェクト   │
└────────────────────────────┘

┌────────────────────────────┐
│ Self-hosted が適している    │
│ - 特殊なハードウェアが必要   │
│ - 社内ネットワークへのアクセス│
│ - 大量のビルドを実行        │
│ - GPUが必要なML/AIワークロード│
└────────────────────────────┘

ワークフローの実行結果を確認する

GitHub UIでの確認

ワークフローの実行結果は、リポジトリの「Actions」タブで確認できます。

GitHub Actions UI

┌─────────────────────────────────────┐
│ Actions                               │
│                                       │
│ ● Hello CI/CD                        │
│   ├── ✅ Run #1 - main (abc1234)     │
│   ├── ❌ Run #2 - feature/x (def5678)│
│   └── ⏳ Run #3 - main (ghi9012)     │
│                                       │
│ ● Deploy to Production               │
│   └── ✅ Run #1 - main (abc1234)     │
└─────────────────────────────────────┘

各ステップの詳細ログ:
┌─────────────────────────────────────┐
│ ✅ Checkout code          (2s)       │
│ ✅ Setup Node.js          (5s)       │
│ ✅ Say hello              (1s)       │
│    > Hello, CI/CD!                   │
│ ✅ Show environment       (1s)       │
│    > OS: Linux 5.15.0 ...            │
│    > Node: v20.11.0                  │
└─────────────────────────────────────┘

uses と run の違い

ステップでは uses と run の2種類の実行方法があります。

uses: 既存のActionを使う

steps:
  # Marketplace のアクションを使う
  - name: Checkout code
    uses: actions/checkout@v4

  # パラメータを渡す
  - name: Setup Node.js
    uses: actions/setup-node@v4
    with:
      node-version: '20'
      cache: 'npm'

run: シェルコマンドを実行する

steps:
  # 1行のコマンド
  - name: Install dependencies
    run: npm ci

  # 複数行のコマンド（| を使う）
  - name: Run tests
    run: |
      npm run lint
      npm run test
      npm run build

まとめ

チェックリスト

• GitHub Actionsの基本コンポーネント（Workflow/Job/Step/Action/Runner）を説明できる
• .github/workflows/ にYAMLを置くだけでCIが動くことを理解した
• uses と run の違いを把握した
• GitHub-hosted Runnerの種類と特徴を理解した

次のステップへ

次のセクションでは、ワークフローYAMLの詳しい構文を学びます。 on、jobs、steps、runs-on の各キーワードの使い方をマスターしましょう。

推定読了時間: 30分