Edited at

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

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

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


Create Nuxt App

上記を参考に 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 へのデプロイ自動化方法についてより詳しく知りたい方は上記記事を参考にしてください。ACTIONS_DEPLOY_KEY の設定方法もこちらの記事で解説しています。

ACTIONS_DEPLOY_KEY を設定した後、以下のファイルを master ブランチに 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:
- master

jobs:
build-deploy:
runs-on: ubuntu-18.04
steps:
- uses: actions/checkout@master

- name: setup node
uses: actions/setup-node@v1
with:
node-version: '10.16'

- name: install
run: npm install

- name: test
run: npm test

- name: generate
run: npm run generate

- name: deploy
uses: peaceiris/actions-gh-pages@v2.3.0
env:
ACTIONS_DEPLOY_KEY: ${{ secrets.ACTIONS_DEPLOY_KEY }}
PUBLISH_BRANCH: gh-pages
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 で公開されます。


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/ にてアプリが公開されます。


参考