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

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権限で良いのはかは未確認。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/5825/cc34e0fd-4b0e-2afb-c318-3ace43ee9916.png)

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

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/5825/07eff0b0-f048-2e26-c124-a5ca7d165c20.png)

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

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

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/5825/0d57bbed-d790-d43a-f73e-b447f8b61c5d.png)

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

https://help.github.com/en/articles/virtual-environments-for-github-actions#environment-variables
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/5825/512a23da-b63b-cf23-1327-6cbacb5dfd4e.png)

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

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/5825/26d99fea-8a45-cad5-a122-0e39d356e041.png)

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

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/5825/8cff11c4-187d-f10c-f70b-2dda48bb6a1d.png)


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

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

```yaml: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 ヘルプ](https://help.github.com/ja/articles/files-that-start-with-an-underscore-are-missing)

なので、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コマンドごとに定義が必要

```yaml
    - 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の環境変数は常に定義されているので使える。