Qiita Teams that are logged in
You are not logged in to any team

Log in to Qiita Team
Community
OrganizationEventAdvent CalendarQiitadon (β)
Service
Qiita JobsQiita ZineQiita Blog
27
Help us understand the problem. What are the problem?

posted at

updated at

Organization

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

以下のファイルを 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 で公開されます。

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

参考

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
27
Help us understand the problem. What are the problem?