github action(yaml版)でnuxtをgithub pagesで公開する定義の確認 #GitHub

Github Actionsでコマンドを実行してnuxtのシングルページアプリケーションをgithub Pages上で公開する方法。

無料ユーザの公開レポジトリで、2019/08/18に確認。

personal access tokenを作成する

ユーザ設定のDevelper Settings＞Personal access tokens https://github.com/settings/tokens から、public_repoの権限のみ付与されたトークンを作成する。
非公開レポジトリの場合もpublic_repo権限で良いのはかは未確認。

作成すると、以下のような値が表示される。この値は後から確認出来ないのでここでメモしておく。以下の値は無効化済み。

レポジトリでアクセストークンをセット

ユーザ設定で作ったアクセストークンを、レポジトリのワークフローの中から使えるように定義する。
レポジトリのsetting＞secretsから値を定義する。この値も定義した後は確認出来なくなる。

Nameの値、GITHUB_から始まる変数は予約語なので使えない。

https://help.github.com/en/articles/virtual-environments-for-github-actions#environment-variables

ここで定義した値は、ワークフローのログの中ではアスタリスクでマスクされる。

が、bashの変数のいち部分を表示する機能を使えば表示されるので、確認しようと思ったら確認は出来る。

レポジトリでワークフローを作成

対象のレポジトリでActionsから以下のファイルを作成。

workflow/blank.yml

name: CI

on:
  push:
    branches:    # Array of patterns that match refs/heads
    - master     # Push events on master branch

jobs:
  build:
    runs-on: ubuntu-latest
    steps:
    - uses: actions/checkout@v1
    - uses: actions/setup-node@master
      with:
        node-version: 10.x 
    - run: git remote set-url origin https://${TEST_TOKEN}@github.com/${GITHUB_REPOSITORY}
      env:
        TEST_TOKEN: ${{ secrets.TEST_TOKEN }}
    - run: A=$(cat ${GITHUB_EVENT_PATH} | jq -r '.commits[0].author.email') && git config --global user.email "${A}"
    - run: A=$(cat ${GITHUB_EVENT_PATH} | jq -r '.commits[0].author.name')  && git config --global user.name "${A}"
    - run: npm install && npm run build && npx gh-pages -d dist -t

これで、masterブランチにコミットをすると、gh-pages というnpmモジュールがdistの中のファイルをgh-pagesブランチにコミットしてくれる。

開発メモ

トークンの扱いが不安

ユーザの設定でトークンを作って、レポジトリの設定ページで個別に定義する管理が大変。値は後から確認出来ないから、一ヶ月後にどのトークンを使っているのかわからなくなりそう。

タスクの中でgit pushをするのが大変

タスクの環境のgitにpushする権限が無い。
タスクの一番最初に行っているactions/checkoutの中でgit checkoutされてるからログイン状態でしょと思ったけど違うらしい。

だからトークンを作って別途渡しているけど、面倒なのでなんとかして欲しい。

gh-pagesレポジトリのルートに.nojekyllファイルが必須

nuxtのbuildコマンドで作られるファイルは _nuxt というディレクトリが含まれているが、github pagesはアンダーバーを含むフォルダ名非対応。

アンダースコアで始まるファイルが見つからない - GitHub ヘルプ

なので、gh-pagesのルートに.nojekyllというカラのファイルを設置してアンダーバーのディレクトリもホストされるようにする必要がある。

タスクの中でしか使わないnpmモジュールはnpxで叩く

今回、github pagesにファイルを公開するのに gh-pages というnpmモジュールを使っている。 https://www.npmjs.com/package/gh-pages これはプログラムの動作には全く不要なのでpackage.jsonに入れる必要は無い。
グローバルインストールしても良いかもしれないが、今回はnpxコマンドを使う事にした。これでモジュールをインストールしなくてもコマンドラインの機能を使える

gh-pagesモジュールのオプションには-tが必要

gh-pagesモジュールは npx gh-pages -d dist -t というコマンドで実行している。-tというのはドットファイルを含む。という意味。
このオプションがナイト、.nojekyllファイルが含まれなくてgithub pagesがうまく表示されない。

環境変数はrunコマンドごとに定義が必要

    - run: git remote set-url origin https://${TEST_TOKEN}@github.com/${GITHUB_REPOSITORY}
      env:
        TEST_TOKEN: ${{ secrets.TEST_TOKEN }}
    - run: xxxx

と、書いている所があるが、TEST_TOKENという環境変数は1行目のrunコマンドの中でだけ有効。4行目のrunコマンドではTEST_TOKEN環境変数はカラになっているから注意。
GITHUB_REPOSITORYの環境変数は常に定義されているので使える。