Vue Nuxt アプリを GitHub Actions で GitHub Pages にデプロイ

Vue.js で作成したアプリケーション、とりわけ今回は Nuxt.js で始めたプロジェクトを例に GitHub Actions を使って GitHub Pages へのデプロイを自動化する方法を紹介します。

React, Next についての記事もあります。

• React Next アプリを GitHub Actions で GitHub Pages にデプロイ - Qiita

Create Nuxt App

• インストール - Nuxt.js

上記を参考に Nuxt のプロジェクトを作成してください。この記事作成時の Nuxt バージョンは 2.9.2 です。

.nojekyll の追加

_nuxt のパスを GitHub Pages で正常に取り扱うため GitHub Pages のブランチに .nojekyll ファイルを追加する必要があります。

npm run generate で生成される dist の中に .nojekyll が含まれているので特に対応する必要はありませんが、存在は知っておいてください。

GitHub Actions の設定

peaceiris/actions-gh-pages: GitHub Actions for deploying to GitHub Pages with Static Site Generators を利用します。

• GitHub Actions による GitHub Pages への自動デプロイ - Qiita

GitHub Actions を用いた GitHub Pages へのデプロイ自動化方法についてより詳しく知りたい方は上記記事を参考にしてください。

以下のファイルを main ブランチに Push してください。自動で GitHub Actions による Nuxt のビルドと GitHub Pages へのデプロイが始まります。

名称が username/username.github.io の repository であれば https://username.github.io/ 形式の URL で Web app が公開されます。

.github/workflows/gh-pages.yml

name: GitHub Pages

on:
  push:
    branches:
      - main
  pull_request:

jobs:
  deploy:
    runs-on: ubuntu-20.04
    concurrency:
      group: ${{ github.workflow }}-${{ github.ref }}
    steps:
      - uses: actions/checkout@v2

      - name: Setup Node
        uses: actions/setup-node@v2
        with:
          node-version: '14'

      - name: Cache dependencies
        uses: actions/cache@v2
        with:
          path: ~/.npm
          key: ${{ runner.os }}-node-${{ hashFiles('**/package-lock.json') }}
          restore-keys: |
            ${{ runner.os }}-node-

      - run: npm ci
      - run: npm test
      - run: npm run generate

      - name: deploy
        uses: peaceiris/actions-gh-pages@v3
        if: ${{ github.ref == 'refs/heads/main' }}
        with:
          github_token: ${{ secrets.GITHUB_TOKEN }}
          publish_dir: ./dist

Project pages

User and Organization リポジトリ (username/username.github.io) の場合は GitHub Actions の workflow を追加するだけで十分です。一方で Project pages (username/project_name 形式のリポジトリ) の場合は nuxt.config.js に対して以下のような修正が必要です。

Web app は https://username.github.io/project_name/ 形式の URL で公開されます。

• How Gatsby Works with GitHub Pages | GatsbyJS

nuxt.config.js

export default {
+  router: {
+    base: '/project_name/'
+  },

nuxt.config.js

- link: [{ rel: 'icon', type: 'image/x-icon', href: '/favicon.ico' }]
+ link: [
+   { rel: 'icon', type: 'image/x-icon', href: '/project_name/favicon.ico' }
+ ]

独自ドメイン

GitHub Pages へデプロイした Vue, Nuxt アプリケーションを独自ドメインで公開する手順です。

User and Organization リポジトリで公開するために nuxt.config.js を修正していた場合は取り消しておきます。

DNS の設定

例えば Cloudflare でドメインを管理しているのであれば DNS management のページで以下のようにレコードを追加しておきます。

Type	値
Name	myapp
Content	username.github.io
TTL	Auto
Proxy status	DNS only

GitHub Pages は独自に CDN を構築しているので Cloudflare の CDN は利用しません。

2014-01-07
We just rolled out some big improvements to GitHub Pages. Now, when someone visits a Pages site, rather than GitHub serving the content directly, the page is served by a global Content Delivery Network, ensuring that the nearest physical server can serve up a cached page at blazingly fast speeds.

CNAME の追加

static/CNAME を作成します。

CNAME

myapp.username.com

https://myapp.username.com/ にてアプリが公開されます。

参考

• GitHub Pages へデプロイ - Nuxt.js