GitHub Actions を使用して Angular アプリケーションを GitHub Pages にデプロイする方法

岩佐 孝浩

2023年8月29日

4 min read

GitHub GitHub Actions GitHub Pages

この投稿では、GitHub Actions を使用して Angular アプリケーションを GitHub Pages にデプロイする方法を解説します。GitHub Actions は、無料で利用可能な強力な CI/CD ツールです。

まず、GitHub リポジトリ へ移動します。

1. Settings > Pages を開きます。
2. Source: GitHub Actions を選択します。

リポジトリに /.github/workflows/deploy.yaml というワークフローファイルを作成し、以下の内容を追加します。

name: Deploy Angular application

on:
  push:
    branches:
      - main

jobs:
  build:
    runs-on: ubuntu-22.04
    steps:
      - name: Checkout
        uses: actions/checkout@v3
      - name: Setup Node.js
        uses: actions/setup-node@v3
        with:
          node-version: 18.x.x
          cache: npm
      - name: Install
        run: npm ci
      - name: Test
        run: npm run test -- --watch=false --browsers=ChromeHeadless
      - name: Build
        run: npm run build -- -c production --base-href "https://<YOUR_GITHUB_USER_NAME>.github.io/<YOUR_REPOSITORY>/"
      - name: Upload Pages artifact
        uses: actions/upload-pages-artifact@v2
        with:
          path: dist/

  deploy:
    needs: build
    permissions:
      repository-projects: read
      pages: write
      id-token: write
    environment:
      name: github-pages
      url: ${{ steps.deployment.outputs.page_url }}
    runs-on: ubuntu-22.04
    steps:
      - name: Deploy to GitHub Pages
        id: deployment
        uses: actions/deploy-pages@v2

• Trigger: このワークフローは、main ブランチへのプッシュをトリガーとして実行されます（6 行目）。
• Node.js のセットアップ: Node.js バージョン 18 と npm キャッシュを設定します (14-18 行目)。
• Base URL: --base-href パラメータを GitHub Pages の URL に合わせて設定します（24 行目）。

リポジトリのチェックアウト

actions/checkout を使用して、リポジトリをワークフロー環境にダウンロードします。

- name: Checkout
  uses: actions/checkout@v3

Node.js のセットアップ

actions/setup-node を使用して、ワークフロー環境で Node.js をセットアップします。

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

依存関係のインストール

npm ci を使用して、依存関係をインストールします。

- name: Install
  run: npm ci

テストの実行

Headless Chrome を使用して、Angular のテストを実行します：

- name: Test
  run: npm run test -- --watch=false --browsers=ChromeHeadless

アプリケーションのビルド

Angular アプリケーションをビルドし、GitHub Pages 用の Base URL を含めます。

- name: Build
  run: npm run build -- -c production --base-href "https://<YOUR_GITHUB_USER_NAME>.github.io/<YOUR_REPOSITORY>/"

アーティファクトのアップロード

actions/upload-pages-artifact を使用して、デプロイ用のビルドアーティファクトをアップロードします。

- name: Upload Pages artifact
  uses: actions/upload-pages-artifact@v2
  with:
    path: dist/

needs: build を指定して、Deploy ジョブが Build ジョブの完了を待つように設定します。

deploy:
    needs: build

GitHub Pages へのデプロイ

actions/deploy-pages を使用して、Angular アプリケーションを GitHub Pages にデプロイします。

- name: Deploy to GitHub Pages
  id: deployment
  uses: actions/deploy-pages@v2

main ブランチにプッシュすると、GitHub Actions が自動的にトリガーされます。ジョブログ を確認して、詳細な情報をチェックしてください。

GitHub Actions を使用することで、Angular アプリケーションを GitHub Pages へシームレスにデプロイできます。デプロイプロセスの自動化により、一貫性が保たれ、手作業を削減できます。この投稿を参考に、効率的なデプロイワークフローを実現してください。

Happy Coding! 🚀