yuheijotaki.com

Nuxt.js のサイトを GitHub Actions を使って GitHub Pages へ自動デプロイする

f:id:jotaki:20190315114020p:plain

結構詰まってしまったのでメモ

概要や大枠はこちら
GitHub Actions による GitHub Pages への自動デプロイ - Qiita

Nuxtの場合はこちら
Vue Nuxt アプリを GitHub Actions で GitHub Pages にデプロイ - Qiita

やりたいこと

  • Vue CLIで作成したNuxtアプリ（SPAモード）をGitHub Pagesで公開したい。
  • /dist ファイルをリポジトリにプッシュしてホスティングするのではなく GitHub Actions を使用してmasterブランチのファイルから静的ファイルを自動生成したい。

ざっくり流れ

  • nuxt.config.js でルーティング設定
  • .envファイルの設定
  • ACTIONS_DEPLOY_KEY の設定
  • generate, deploy設定 を /.github/main.yml に記述（ブラウザのGitHub Actionsから作成）

main.yml に関しては最初に貼ったQiitaの記事をほぼコピペしましたが、細かい所で突っかかりました。

つまったその1 envファイルの読み込み

dotenv を使用

.env

APPLICATION_ID=XXXXXXXXXXXXXXXXX

nuxt.config.js

require('dotenv').config();
const {APPLICATION_ID} = process.env;

export default {
  // ...
  env: {
    APPLICATION_ID
  },
  ...
}

ここまでは Nuxt.jsで.envファイルを扱う@nuxtjs/dotenv - Qiita の通り

GitHub Pages でこの環境変数を使うには、
GitHubのリポジトリページ > Settings > Secrets の New secret から .env と同内容のNameとValueを設定する。

その後、 main.yml のgenerateタスク時にそのSecretsを参照するように指定する

jobs:
  build-deploy:
    # ...
    - run: npm run generate
      env:
        APPLICATION_ID: ${{ secrets.APPLICATION_ID }}
    # ...

つまったその2 ACTIONS_DEPLOY_KEY 設定

秘密鍵、公開鍵の生成
ターミナルで

ssh-keygen -t rsa -b 4096 -C "$(git config user.email)" -f gh-pages -N ""

リポジトリに公開鍵を設定
GitHubのリポジトリページ > Settings > Deploy keys の Add Deploy Key から生成した公開鍵を（gh-pages.pub）を登録。
Title は ACTIONS_DEPLOY_KEY
Key は gh-pages.pub の中身のコピペ
Allow write access にチェック（しないとデプロイ時にパーミッション許可してと怒られる）

リポジトリに秘密鍵を設定
GitHubのリポジトリページ > Settings > Secrets の New secret から生成した秘密鍵を（gh-pages）を登録。
Name は ACTIONS_DEPLOY_KEY
Value は gh-pages の中身のコピペ

これで main.yml のデプロイ設定が動作した

jobs:
  build-deploy:
    # ...
    - name: Deploy
      uses: peaceiris/actions-gh-pages@v2.5.0
      env:
        ACTIONS_DEPLOY_KEY: ${{ secrets.ACTIONS_DEPLOY_KEY }}
        PUBLISH_BRANCH: gh-pages
        PUBLISH_DIR: ./dist
    # ...

GitHub Pages の設定（GitHubのリポジトリページ > Settings内）はSourceの
Branch は gh-pages
ディレクトリ はルート
に設定すると変にnuxt.config.jsいじっていなければgh-pagesブランチではルート階層にdistファイルを生成してくれる。

成果物