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

Takahiro Iwasa (岩佐 孝浩)

2023年8月29日

4 min read

GitHub GitHub Actions GitHub Pages

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

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

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

actions/checkout を使用すると、リポジトリからソースコードをワークフロー実行環境にダウンロードできます。

- name: Checkout
  uses: actions/checkout@v3

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

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

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 がトリガーされます。

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