GitHub ActionsでAngularプロジェクトをGitHub Pagesにデプロイする

Angularプロジェクトで開発する際に、GitHub Pagesで公開する際の手順を備忘録として残しておきます。

※基本的なActionsの使い方は以前書いた「GitHub ActionsでAngularプロジェクトの自動テストを実行してみる」を見てください。

GitHub Actionsの設定

今回は個人開発を想定しているので、mainブランチにプッシュしたときに自動で本番ビルド → GitHub Pagesへデプロイと実行するようにします
※チーム開発の場合は任意のタイミングでデプロイできるように検討した方が良いです

.github/workflows/deploy.yml

name: Node CI

on:
  push: 
    branches: main

jobs:
  build:

    runs-on: ubuntu-18.04

    strategy:
      matrix:
        node-version: [12.x]

    steps:
    - uses: actions/checkout@v1
    - name: Use Node.js ${{ matrix.node-version }}
      uses: actions/setup-node@v1
      with:
        node-version: ${{ matrix.node-version }}
    - name: npm install, build, and test
      run: |
        npm install
        npm run build --if-present -- --prod
        npm test -- --watch=false --browsers=ChromeHeadless
        cp -a {angular.jsonのoutputPath}/index.html {angular.jsonのoutputPath}/404.html
      env:
        CI: true
    - name: Deploy 🚀
      uses: JamesIves/github-pages-deploy-action@3.7.1
      with:
        GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
        BRANCH: gh-pages
        FOLDER: {angular.jsonのoutputPath}
        CLEAN: true

ポイント

• 実行タイミングはmainブランチへのプッシュ時
• テストはHeadlessChromeで実行
  • ヘッドレスブラウザで実行しないと、ブラウザを開こうとしてエラーになります
• index.htmlをコピーして404.html
  • SPAのURL直打ち対策です
    • これやらないと画面リロードやURL直打ちしたときにNotFoundになります
• デプロイは以下を利用しています
  • https://github.com/marketplace/actions/deploy-to-github-pages
  • デプロイ対象のフォルダはangular.jsonで定義されているoutputPathと一致させる

デプロイ用ブランチを作成します

gh-pagesという名前のブランチを作成しておきます

GitHub Pagesの設定

gh-pagesブランチを作成すると自動で有効になるっぽいので不要

一応、OptionsでGitHub Pagesの設定を確認しましょう。
URLが発行されていて、ブランチがgh-pagesでディレクトリがrootになっていればOKです。

Angular側の設定

angular.jsonの修正

• build.configurations.production下を修正
  • baseHrefを修正
    • 値は/{project name}
    • GitHub PagesのURLがhttps://{username}.github.io/{projectname}となり、baseHrefを修正しないとindex.htmlにアクセス不可となってしまうため
  • deployUrlを追加
    • 値は/{project name}/　※末尾のスラッシュを忘れないように注意
    • これ修正しないとindex.htmlにアクセスできても、JSやCSSファイルのパスがおかしくなって画面が出てこない

プッシュする

mainブランチに変更をプッシュする
Actionsが自動で動作し、Pagesにデプロイされます

Optionsに公開URLが載ってるのでそこにアクセスするとデプロイされています。