Help us understand the problem. What is going on with this article?

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 へのデプロイ自動化方法についてより詳しく知りたい方は上記記事を参考にしてください。

以下のファイルを 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@v2

    - name: setup node
      uses: actions/setup-node@v1
      with:
        node-version: '10.x'

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

    - name: install
      run: npm ci

    - name: test
      run: npm test

    - name: generate
      run: npm run generate

    - name: deploy
      uses: peaceiris/actions-gh-pages@v3
      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 で公開されます。

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

参考

peaceiris
Hugo ʕ◔ϖ◔ʔ や GitHub Actions について書いています。こっち https://peaceiris.com/ に引っ越しましたので、今後 Qiita への新規投稿はしませんが記事のメンテはします。
https://peaceiris.com/
admin-guild
「Webサービスの運営に必要なあらゆる知見」を共有できる場として作られた、運営者のためのコミュニティです。
https://admin-guild.slack.com
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
No comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
ユーザーは見つかりませんでした