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

岩佐 孝浩

2023年8月29日

4 min read

GitHub GitHub Actions GitHub Pages

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

docs.github.com

About billing for GitHub Actions - GitHub Docs

If you want to use GitHub Actions beyond the storage or minutes included in your account, you will be billed for additional usage.

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

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

docs.github.com

Understanding GitHub Actions - GitHub Docs

Learn the basics of GitHub Actions, including core concepts and essential terminology.

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

docs.github.com

Triggering a workflow - GitHub Docs

How to automatically trigger GitHub Actions workflows

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

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

docs.github.com

Using jobs in a workflow - GitHub Docs

Use workflows to run multiple jobs.

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

github.com

GitHub - actions/checkout: Action for checking out a repo

Action for checking out a repo. Contribute to actions/checkout development by creating an account on GitHub.

- name: Checkout
  uses: actions/checkout@v3

actions/setup-node を使用すると、ワークフロー実行環境に Node.js をセットアップできます。

github.com

GitHub - actions/setup-node: Set up your GitHub Actions workflow with a specific version of node.js

Set up your GitHub Actions workflow with a specific version of node.js - actions/setup-node

- 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 を使用できます。

developer.chrome.com

Getting Started with Headless Chrome  |  Blog  |  Chrome for Developers

Getting started with Headless Chrome

- 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 ジョブで利用可能にできます。

github.com

GitHub - actions/upload-pages-artifact: A composite action for packaging and uploading an artifact that can be deployed to GitHub Pages.

A composite action for packaging and uploading an artifact that can be deployed to GitHub Pages. - actions/upload-pages-artifact

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

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

docs.github.com

Workflow syntax for GitHub Actions - GitHub Docs

A workflow is a configurable automated process made up of one or more jobs. You must create a YAML file to define your workflow configuration.

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

github.com

GitHub - actions/deploy-pages: GitHub Action to publish artifacts to GitHub Pages for deployments

GitHub Action to publish artifacts to GitHub Pages for deployments - actions/deploy-pages

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

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

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