1. ozaki25

    No comment

    ozaki25
Changes in body
Source | HTML | Preview
@@ -1,125 +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でとりにいってしまいます
+ - 設定しないとJSファイルなどのリソースを`https://{アカウント名}.github.io/xxx.js`と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になってしまいます
+- ここまでの手順でデプロイ成功し画面を表示することはできますが、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の仕様として`_`から始まるディレクトリが見えなくなってしまうのが原因らしいです
+- 原因は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