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

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

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

- [React Next アプリを GitHub Actions で GitHub Pages にデプロイ - Qiita](https://qiita.com/peaceiris/items/9c569125b25fc090c515)



## Create Nuxt App

- [インストール - Nuxt.js](https://ja.nuxtjs.org/guide/installation)

上記を参考に 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](https://github.com/peaceiris/actions-gh-pages) を利用します。

- [GitHub Actions による GitHub Pages への自動デプロイ - Qiita](https://qiita.com/peaceiris/items/d401f2e5724fdcb0759d)

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

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

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

```yaml:.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](https://www.gatsbyjs.org/docs/how-gatsby-works-with-github-pages/)

```diff:nuxt.config.js
export default {
+  router: {
+    base: '/project_name/'
+  },
```

```diff: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 は利用しません。

[GitHub Pages は独自に CDN を構築している]: https://github.blog/2014-01-07-faster-more-awesome-github-pages/

> 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` を作成します。

```txt:CNAME
myapp.username.com
```

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



## 参考

- [GitHub Pages へデプロイ - Nuxt.js](https://ja.nuxtjs.org/faq/github-pages/)