Nuxt.jsで作成したサイトをGithub Pagesに公開する (Github Actionsによるデプロイ自動化あり)


## 概要

一日無駄にしたので記事にしておくことにする。
NuxtがSPAモードだと多少ダルいが、CIの方はマジで一瞬で設定が終わる。

## Github Actions設定編

### リポジトリのタブのところからActionsを選択。その後New workflowをクリック。

<img width="1029" alt="スクリーンショット 2020-06-16 19.10.09.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/264910/19eec03c-9302-6f51-f249-c3a9e4225d92.png">


- set up a workflow yourself をクリック
<img width="791" alt="スクリーンショット 2020-06-16 19.09.44.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/264910/e53d6b99-6125-5411-0a59-d8ca0e36f2e9.png">

yml入力へ

### yml編

[Deploy to GitHub Pages · Actions · GitHub Marketplace](https://github.com/marketplace/actions/deploy-to-github-pages)を参考にymlを書いていく。
といってもそこまで書くことは多くなく、基本的にはCIのトリガーとなるブランチ名とビルドコマンド周りをセッティングすればOK。
以下に実際に使用しているymlファイルをおいておく。
よくわかんない人はこれをコピペしてちょっと編集してコミットするのがよいでしょう。(良い例なのかは知りません)


```yml:~/.github/workflows/build-pages.yml
name: Build and Deploy
on:
  push:
    branches:
      - master
jobs:
  build-and-deploy:
    runs-on: ubuntu-latest
    steps:
      - name: Checkout 🛎️
        uses: actions/checkout@v2
        with:
          persist-credentials: false

      - name: Install and Build 🔧
        run: |
          yarn
          yarn build

      - name: Deploy 🚀
        uses: JamesIves/github-pages-deploy-action@releases/v3
        with:
          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
          BRANCH: gh-pages 
          FOLDER: dist 
```

そこまで難しくなく。branchesとstepsのrunとwithのところだけ注意すれば問題ない。
runは基本installしてbuild or generateだし、withも何もなければgh-pagesブランチにpushしてデフォビルド先ディレクトリのdist参照するだけ。

GITHUB_TOKENはどうやらCI専用の自動生成されたものを使うから特段設定は必要ないらしい。

## Nuxt編

### baseURLの設定

これをしないと`_nuxt`が参照できず死ぬ。
具体的に言うと、Github Pagesを参照してもルート直下を見てしまう。
Github Pagesは特段の理由がない限り `https://ユーザ名.github.io/リポジトリ名/` というURLで構成されるが、baseがないと `https://ユーザ名.github.io/_nuxt` を見に行って全部死ぬ。
~~Github Pages以外に上げないならこれでいい。~~

### 6/18　追記
- ~~この書き方だとローカルで参照できないようになってしまいます。cross-envを使ってproductionの時のみリポジトリ名にしたほうがよいです(というか公式ドキュメントにそう書いてある)~~
- コードも合わせて修正済み

記事を書きました
[[Nuxt.js] cross-envを使い環境に応じてbaseURLを分ける - Qiita](https://qiita.com/Ancient_Scapes/items/0ad01d4641c2a8afc875)

### env 

```vim:env/local.ts
module.exports = {
  BASE_URL: '/'
}
```

```vim:env/production.ts
module.exports = {
  BASE_URL: '/Nuxt-TypeScript-Boilerplate/'
}
```

### nuxt.config.ts

```typescript:nuxt.config.ts
const environment = process.env.NODE_ENV || 'local'
const env = require(`./env/${environment}.ts`)

module.exports = {
  router: {
    base: env.BASE_URL  
  },
  head: {
    link: [
      { rel: 'icon', type: 'image/x-icon', href: `${env.BASE_URL}favicon.ico` }
    ]
  }
}

```

### トップが何も出ない

static/404.htmlを作成し、index.htmlへリダイレクトさせるのが一番簡単とのこと。
面倒なことにここでもbaseURLが必要となる。注意。

細かく設定したい人はググっても出てくるし、[Github Pagesに公開したNuxt.jsアプリがリロードで404になる問題に対応する](https://gist.github.com/orimajp/2541a8cde9abf3a925dffd052ced9008)などを参考にする。

```html:static/404.html
<html>

<head>
  <script>
    location.href = '/Nuxt-TypeScript-Boilerplate/'
  </script>
</head>

</html>
```


### ビルドが95%で落ちる

- eslintignoreの指定が足りず無限ループが起きている可能性が高い。以下記事を参照のこと。
- node_modules/, .nuxt, public, distなどLintしないフォルダをかけておけば解決
- [nuxt-ts のビルドが終わらない or 重い - Qiita](https://qiita.com/u-sho/items/27a7d200211e192f49b9)


### .nojekyllの配置

これがないとGithubPagesでアンダーバーから始まるファイルが読み込めないらしい。
今回は先人の知恵でCIを動かしているので吸収してくれていた。ありがたい。


## 動かす編

- 適当に作業してコミットしてmasterにpushする。
- Actionsタブを確認し、CIのステータスを確認。左のアイコンで成功しているかわかる。

<img width="1276" alt="スクリーンショット 2020-06-16 19.32.21.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/264910/edac83ab-0ca3-ed8e-c4b5-03662d015fe1.png">

- CIファイルにミスが有った場合はローカルから編集するか、Githubからいじる。
  - 適当に実行したイベントをクリック
  - Workflow fileタブを開く
  - 右上のペンアイコンを押すとファイル編集に行けるので適当にいじってコミットする。

<img width="1400" alt="スクリーンショット 2020-06-16 19.33.56.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/264910/25de424e-5947-7002-efeb-722aaa39e1af.png">

  - コミットされるとまたActionsに新たなイベントが出てくるので、実行状態を確認

- 正常に動いていれば、Github Pagesにデプロイされる。


## 三行で

- ビルドが長い
- Github Actionsは特別な知識がなくてもそれっぽくできるので、同僚に自慢できるぞ！
- JameIvesさんありがとう

## リポジトリ

[Ancient-Scapes/Nuxt-TypeScript-Boilerplate: My awesome TypeScript + Nuxt.js boilerplate.](https://github.com/Ancient-Scapes/Nuxt-TypeScript-Boilerplate/)