2020-03-09

GitHub 管理している Angular 製のサイトを GitHub Pages で公開するための GitHub Actions

何回ギフハブ言うんやって感じのタイトルになってしまった…。

拙作の Angular Utilities は、コレまで

$ npm run build
$ npm run deploy

とコマンドを実行することで、npm の gh-pages パッケージを利用して GitHub Pages にデプロイしてきた。

それを今回は、master ブランチへソースコードが Push されたら、自動的に GitHub Pages にデプロイするという GitHub Actions を組んでみることにした。

先に結論

さっさと正解のソースコードを載せる。次のような .github/workflows/deploy.yml (名前は任意) を作れば良い。

name: Deploy To GitHub Pages
on:
  push:
    branches:
      - master
jobs:
  build:
    runs-on: ubuntu-latest
    steps:
      - name: Checkout
        uses: actions/checkout@v2
      - name: Setup Node.js
        uses: actions/setup-node@v1
        with:
          node-version: '12.x'
      - name: npm install
        run : npm install
      - name: Build
        run : npm run build --if-present
      - name: Deploy To GitHub Pages
        uses: peaceiris/actions-gh-pages@v3
        with:
          #publish_dir   : ./dist
          #publish_branch: gh-pages
          #personal_token: ${{ secrets.PERSONAL_ACCESS_TOKEN }}
          #user_name     : 【コミッタの名前】
          #user_email    : 【コミッタのメルアド】

Node.js 環境をセットアップしたら、npm install と npm run build を流して Angular サイトをビルドする。コレで ./dist/ ディレクトリにデプロイ用の資材ができた状態になる。

コレまで実行していた npm run deploy の実体は gh-pages -d ./dist/ というコマンドで、gh-pages という npm パッケージに頼って作業していたが、それと同等の処理を、peaceiris/actions-gh-pages@v3 に担わせている。

参考：GitHub Pages action · Actions · GitHub Marketplace · GitHub

with でオプションを指定できるが、何も指定しないと、gh-pages というブランチに、./dist/ 配下の資材をコミットしてくれる。ブランチ名や対象ディレクトリを変更したい場合はそれぞれコメントアウトしたオプションで指定できる。

./dist/ は .gitignore で指定していることが多いと思うが、publish_dir で直接 ./dist/ を指定した場合はキチンとコミットできる
一方、publish_dir で ./ などを指定し、対象の一部に ./dist/ が含まれているような場合は、.gitignore による除外指定が効いてしまい、./dist/ がコミットされなかったりするので留意

内部で git push する際、GitHub の Personal Access Token が必要となるが、通常は GitHub Actions が自動的に用意してくれる GITHUB_TOKEN という環境変数を読み込んで処理してくれるので、何の準備も要らない。

もし自前で GitHub トークンを用意したい場合は、GitHub リポジトリの Settings → Secrets より事前にトークンを登録しておき、${{ secrets.PERSONAL_ACCESS_TOKEN }} といった形で参照しよう。GITHUB_TOKEN という名前の Secret は前述のとおり自動的に用意されていて予約済みなことに留意。

以上

GitHub Actions は未だに組み方がイマイチ分かりづらいが、とりあえずこんな感じでやりたいことが出来たのでよきよき。