Corredor

ウェブ、プログラミングの勉強メモ。

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: '10.x'
    - name: npm install
      run : npm install
    - name: Build
      run : npm run build
    - name: Deploy To GitHub Pages
      uses: peaceiris/actions-gh-pages@v3
      with:
        personal_token: ${{ secrets.PERSONAL_ACCESS_TOKEN }}
        publish_branch: gh-pages
        publish_dir   : ./dist
        user_name     : 【コミッタの名前】
        user_email    : 【コミッタのメルアド】

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

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

gh-pages というブランチに、./dist/ 配下の資材をコミットして Push するのだが、その時 GitHub の Personal Access Token を使っている。${{ secrets.PERSONAL_ACCESS_TOKEN }} は、GitHub リポジトリの Settings → Secrets より事前に登録しておこう。

以上

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

The DevOps 逆転だ!究極の継続的デリバリー

The DevOps 逆転だ!究極の継続的デリバリー