GitHub Actions で Angular アプリケーションを GitHub Pages にデプロイ

GitHub Actions で Angular アプリケーションを GitHub Pages にデプロイ

Takahiro Iwasa
Takahiro Iwasa
4 min read
GitHub GitHub Actions GitHub Pages

この投稿では、 GitHub Actions を使用して Angular アプリケーションを GitHub Pages に無料でデプロイする方法について説明しています。 詳細は、こちらをご参照ください。

GitHub リポジトリ設定

GitHub リポジトリに移動し、次に Settings に移動して Pages を選択してください。 Source: GitHub Actions を選択してください。

ワークフロー設定

以下の内容のように、リポジトリに /.github/workflows/deploy.yaml を追加してください。 ファイル名は任意です。ワークフローに関する詳細は、公式ドキュメントをご参照ください。

ワークフローのトリガーは、3から6行目で設定しています。 この投稿では、 main ブランチをトリガーとして使用しています。 ワークフロートリガーの詳細については、公式ドキュメントをご参照ください。

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

ジョブ設定

ワークフローで実行したいジョブを設定してください。

ビルドジョブ設定

Checkout

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 を使用すると、 package.json の依存関係をインストールできます。

- name: Install
  run: npm ci

Angular アプリケーションテスト

Angular アプリケーションを Headless Chrome でテストする際には、 npm run test -- --watch=false --browsers=ChromeHeadless を使用できます。

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

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

Angular アプリケーションをビルドする場合、 npm run build を使用します。 --base-href パラメーターを使用して、 GitHub Pages の URL を指定してください。

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

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

actions/upload-pages-artifact を使用して、ビルドアーティファクトをアップロードし、それを deploy ジョブで利用可能にできます。

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

デプロイジョブ設定

ビルドジョブ完了待機

Deploy ステップが Build ステップの後に実行されるようにするには、 needs: build を指定してください。

デプロイ設定

actions/deploy-pages を使用して、 GitHub Pages にデプロイできます。

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

デプロイ

main ブランチにプッシュすると、 GitHub Actions がトリガーされます。

ジョブのログを確認できます。

Takahiro Iwasa

Takahiro Iwasa

Software Developer at KAKEHASHI Inc.
Involved in the requirements definition, design, and development of cloud-native applications using AWS. Now, building a new prescription data collection platform at KAKEHASHI Inc. Japan AWS Top Engineers 2020-2023.