1. ozaki25

    Posted

    ozaki25
Changes in title
+Next.jsで作ったアプリをGitHub Pagesにデプロイする
Changes in tags
Changes in body
Source | HTML | Preview
@@ -0,0 +1,125 @@
+## 概要
+
+- Next.jsで作ったアプリをGitHub Pagesで公開するまでの手順
+ - はまりどころがあったのでその備忘です
+- 以下の例ではGitHub Actionsを使ってmasterにPushされたら自動でデプロイされるようにしてます
+
+## はまりどころ①URLのbasepath問題
+
+- GitHub Pagesで公開したアプリのURLは`https://{アカウント名}.github.io/{リポジトリ名}/`の形式になります
+- `{リポジトリ名}`の部分のことをbasepathと呼んでいますがこれを設定する必要があります
+ - 設定しないとJSファイルなどのリソースを`https://{アカウント名}.github.io/xxx`とbasepathが無いURLでとりにいってしまいます
+- `next.config.js`に`assetPrefix`を入れることで設定できます
+
+```js:next.config.js
+module.exports = {
+ assetPrefix: '/repository-name',
+};
+```
+
+- basepathが不要な環境で動かすこともあるので自分の場合は以下のようにしてます
+ - `dotenv`は`npm i -D dotenv`で追加しています
+
+```js:next.config.js
+require('dotenv').config();
+
+module.exports = {
+ assetPrefix: process.env.GITHUB_PAGES ? '/repository-name' : '',
+};
+```
+
+- `GITHUB_PAGES`という環境変数が渡された時だけbasepathの設定を入れるようにしています
+- これをGitHub Actionsでデプロイするための設定は以下のような感じです
+ - `package.json`の`scripts`の`"export": "next export"`を入れるのを忘れずに
+
+```yml:.github/workflows/deploy.yml
+name: deploy
+on:
+ push:
+ branches:
+ - master
+jobs:
+ deploy:
+ runs-on: ubuntu-latest
+ steps:
+ - uses: actions/checkout@v1
+ - name: Use Node.js 12
+ uses: actions/setup-node@v1
+ with:
+ node-version: 12
+ - name: install
+ run: |
+ yarn install
+ - name: build
+ run: |
+ yarn build
+ env:
+ GITHUB_PAGES: true
+ - name: export
+ run: |
+ yarn export
+ - name: deploy
+ uses: peaceiris/actions-gh-pages@v2.3.1
+ env:
+ PERSONAL_TOKEN: ${{ secrets.PERSONAL_TOKEN }}
+ PUBLISH_BRANCH: gh-pages
+ PUBLISH_DIR: ./out
+```
+
+- buildのタイミングで環境変数に`GITHUB_PAGES`を設定しています
+- GitHub Pagesにデプロイする処理は[actions-gh-pages](https://github.com/peaceiris/actions-gh-pages)を使っています
+ - 詳しい使い方は[こちらの記事](https://qiita.com/peaceiris/items/d401f2e5724fdcb0759d)をご参照ください
+
+## はまりどころ②JSファイルが404になってしまう問題
+
+- ここまでの手順でデプロイ成功し画面を表示することはできますが、JSファイルなどの取得が全て404になってしまいます
+ - URLは正しいはずなのになぜ???とはまりました
+
+<img width="660" alt="スクリーンショット 2019-11-14 8.06.20.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/175213/9cf4ec9c-59db-00f6-50be-8272571bb448.png">
+
+- 原因はGitHub Pagesの仕様として`_`から始まるディレクトリが見えなくなってしまうのが原因らしいです
+ - 404が出てるファイルは`_next`以下に配置されている
+- 回避するためには`.nojekyll`というファイルをデプロイ対象のディレクトリに配置する必要があります
+- GitHub Actionsの設定ファイルのexportの後に`touch out/.nojekyll`を追加します
+
+```yml:.github/workflows/deploy.yml
+name: deploy
+on:
+ push:
+ branches:
+ - master
+jobs:
+ deploy:
+ runs-on: ubuntu-latest
+ steps:
+ - uses: actions/checkout@v1
+ - name: Use Node.js 12
+ uses: actions/setup-node@v1
+ with:
+ node-version: 12
+ - name: install
+ run: |
+ yarn install
+ - name: build
+ run: |
+ yarn build
+ env:
+ GITHUB_PAGES: true
+ - name: export
+ run: |
+ yarn export
+ touch out/.nojekyll
+ - name: deploy
+ uses: peaceiris/actions-gh-pages@v2.3.1
+ env:
+ PERSONAL_TOKEN: ${{ secrets.PERSONAL_TOKEN }}
+ PUBLISH_BRANCH: gh-pages
+ PUBLISH_DIR: ./out
+```
+
+- これでGitHub PagesでNext.jsアプリを公開することができました!
+
+## 追記
+
+- 記事を書こうとしてより詳しく調べていたら公式のwikiにちゃんと説明が書いてありました
+ - https://github.com/zeit/next.js/wiki/Deploying-a-Next.js-app-into-GitHub-Pages