【TypeScript】CI/CD実践 - GitHub Actions活用ガイド

概要

TypeScriptプロジェクトの開発効率を向上させるために、CI/CD（継続的インテグレーションと継続的デリバリー/デプロイ）パイプラインを構築することが重要です。GitHub Actionsは、GitHubが提供する自動化ツールで、CI/CDワークフローをリポジトリ内で簡単に設定できます。本記事では、GitHub Actionsを活用してTypeScriptプロジェクトのテスト、ビルド、デプロイを自動化する方法を解説します。

CI/CDの基本とGitHub Actionsの役割

CI/CDとは

CI/CDは、「継続的インテグレーション（Continuous Integration）」と「継続的デリバリー/デプロイ（Continuous Delivery/Deployment）」を組み合わせた自動化の手法です。

• 継続的インテグレーション（CI）
  開発者が新しいコードを頻繁にリポジトリにマージし、自動でテストとビルドを行います。

• 継続的デリバリー/デプロイ（CD）
  自動テストを通過したコードを、本番またはテスト環境へ継続的にリリースするプロセスです。 CI/CDは、コード変更による問題の早期発見や迅速なデプロイを可能にし、開発プロセスを効率化します。

GitHub Actionsとは

GitHub Actionsは、GitHub上でリポジトリごとにCI/CDパイプラインを構築できるツールです。GitHubリポジトリのイベント（プルリクエスト、コミットなど）をトリガーにして、テストやビルド、デプロイといった自動化ワークフローを実行できます。

GitHub Actionsのセットアップ

GitHub Actionsでワークフローを作成するには、リポジトリ内に.github/workflowsディレクトリを作成し、その中にYAML形式の設定ファイルを追加します。以下に、TypeScriptプロジェクトでの基本的なCI設定ファイルを示します。

ワークフローの基本設定例

以下の例では、プッシュやプルリクエストをトリガーにして、Node.js環境でテストとビルドを実行するワークフローを設定します。

# .github/workflows/ci.yml
name: CI
on:
  push:
    branches:
      - main
  pull_request:
    branches:
      - main
jobs:
  build:
    runs-on: ubuntu-latest
    steps:
      - name: ソースコードのチェックアウト
        uses: actions/checkout@v2
      - name: Node.jsのセットアップ
        uses: actions/setup-node@v2
        with:
          node-version: '16'
      - name: 依存関係のインストール
        run: npm install
      - name: テストの実行
        run: npm test
      - name: ビルドの実行
        run: npm run build

上記のワークフローでは、以下の順序でジョブが実行されます。

1. ソースコードのチェックアウト
   actions/checkout@v2を使用してリポジトリをクローンします。
2. Node.jsのセットアップ
   actions/setup-node@v2を使用して、指定したバージョンのNode.jsをセットアップします。
3. 依存関係のインストール
   npm installでプロジェクトの依存関係をインストールします。
4. テストの実行
   npm testでテストを実行します。
5. ビルドの実行
   npm run buildでTypeScriptのビルドを実行します。 これにより、コードがプッシュまたはプルリクエストされるたびに、GitHub Actionsがテストとビルドを自動的に実行し、エラーがあれば通知されます。

高度なワークフローの構築

TypeScriptプロジェクトでは、テストカバレッジの測定や、デプロイパイプラインを追加することで、さらに高度なCI/CDを実現できます。

テストカバレッジの測定

テストカバレッジをGitHub Actionsで確認するには、Codecovなどのツールを組み合わせて設定できます。

1. Codecovのインストール

   npm install --save-dev codecov

2. YAMLファイルにカバレッジ送信ステップを追加 npm testでカバレッジを生成し、Codecovに送信するステップを追加します。

   jobs:
     build:
       runs-on: ubuntu-latest
       steps:
         # 省略: チェックアウト、Nodeセットアップ、依存関係のインストール
         - name: テストの実行（カバレッジ含む）
           run: npm test -- --coverage
         - name: Codecovのアップロード
           uses: codecov/codecov-action@v2
           with:
             token: ${{ secrets.CODECOV_TOKEN }}

デプロイパイプラインの追加

デプロイの自動化もGitHub Actionsで行えます。例えば、Amazon S3やFirebaseなどにデプロイする場合、次のように設定できます。

Firebaseへのデプロイ例

Firebaseでホスティングする場合、Firebase CLIを利用したワークフローを作成します。

1. Firebase CLIをインストール

   - name: Firebase CLIのインストール
     run: npm install -g firebase-tools

2. デプロイステップの追加 デプロイ用のシークレットをGitHubリポジトリに設定し、Firebaseにデプロイするステップを追加します。

   - name: Firebaseデプロイ
     env:
       FIREBASE_TOKEN: ${{ secrets.FIREBASE_TOKEN }}
     run: firebase deploy --only hosting

このワークフローにより、コードがテストとビルドをパスすると、Firebaseへ自動的にデプロイされます。

GitHub Actionsでのトラブルシューティング

GitHub Actionsを利用していると、セットアップや実行中にエラーが発生することがあります。主なトラブルシューティング方法を紹介します。

1. ジョブの失敗時のログ確認
   GitHub Actionsの実行ログは詳細に表示され、エラーの発生箇所や原因がわかります。特定のステップでのエラーがないか確認しましょう。

2. キャッシュの利用
   依存関係のインストール時間を短縮するために、actions/cache@v2を使用してnode_modulesをキャッシュすることができます 。

   - name: キャッシュnode_modules
     uses: actions/cache@v2
     with:
       path: node_modules
       key: ${{ runner.os }}-node-${{ hashFiles('/package-lock.json') }}
       restore-keys: |
         ${{ runner.os }}-node-

3. シークレットの管理
   FirebaseやCodecovなど外部サービスを利用する場合、APIキーやトークンをシークレットとしてリポジトリに追加し、環境変数で利用します。セキュリティの観点からも、シークレットの管理は徹底しましょう。

まとめ

TypeScriptプロジェクトにおけるGitHub Actionsを利用したCI/CDは、開発の効率化とコード品質向上に大いに貢献します。TypeScriptならではの型安全性を活かしたコードを、テストやビルド、デプロイまで自動化することで、エラー発生率を減らし、迅速なリリースを実現できます。CI/CDは一度設定しておくと効果が大きく、チーム全体の開発フローをスムーズに進行させるために非常に有効なツールです。ぜひGitHub Actionsを活用して、TypeScriptプロジェクトのCI/CDパイプラインを構築しましょう。