ABOUT ARCHIVE
Hero Image
TAG CATEGORY
円

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

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

2024-10-26

2024-10-26

概要

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パイプラインを構築しましょう。

参照:

GitHub Actionsを使ったCI/CD入門
Coding TypeScript

Recommend

categories
tags