GitHub Pages でカスタムドメインを使って Next.js のページを公開しようとして苦戦した話
問題点
普段 C# でなんとかしているのですが, やはり Web 系にも触れておくべきだと思って TypeScript + Next.js を使って SPA を作る練習をしています. デプロイ先は GitHub Pages でいいかな～と思ったのですが, カスタムドメインを設定するとなぜか CSS が適用されませんでした. github.io のアドレスでは正しく表示されているのですが, なぜ表示されないのか疑問でした。
解決策
どうやら、next.config.js にて assetPrefix が必要みたいです。
module.exports = {
basePath: process.env.GITHUB_ACTIONS ? "/hoge.com" : "",
trailingSlash: true,
assetPrefix: '/',
};
どゆこと？
チュートリアルサイトでは basePath に github.io のディレクトリ名を入れましょうと書いてあったので、そのまま入れて GitHub ワークフローを実行していました。最初はカスタムドメインを使用していなかったので <user>.github.io/<repository> という URL で公開されていました。このときの basePass が github.io 下のルートを指していたんですね。
しかし、カスタムドメインを使用すると github.io はなかったことになります。それでも basePath では github.io 下をルートディレクトリ扱いしようとして CSS が見つからん！というようになってしまう？のだと思います。なので、CSS などが入っているルートを修正するために assetPrefix にルートディレクトリを指定してあげるわけですね。
つまり、github.io を経由する場合は特に必要はなく、カスタムドメインを使用する場合は必ずルートディレクトリを指定するようにしてあげないといけないわけです。（へぇ～）
できあがったもの
ちょっとおしゃれなページができました。
補足
とりあえず workflow ファイルとか載せておきますね。
name: Deploy on GitHub Pages
on:
push:
branches:
- main
jobs:
build-deploy:
runs-on: ubuntu-20.04
steps:
- uses: actions/checkout@v2
- name: setup node
uses: actions/setup-node@v1
with:
node-version: '16.x'
- name: Cache dependencies
uses: actions/cache@v1
with:
path: ~/.npm
key: ${{ runner.os }}-node-${{ hashFiles('**/package-lock.json') }}
restore-keys: |
${{ runner.os }}-node-
- name: install
run: npm install --frozen-lockfile
- name: build
run: npm run build
- name: export
run: npm run export
- name: add nojekyll
run: touch ./out/.nojekyll
- name: deploy
uses: peaceiris/actions-gh-pages@v3
with:
github_token: ${{ secrets.GITHUB_TOKEN }}
publish_dir: ./out
あと package.json とか。
// scripts の部分だけ載せておきます。 "scripts": { "dev": "next dev", "build": "next build", "start": "next start", "lint": "next lint", "export": "next export" },
参考サイト
ありがとうございます～助かりました
イベントのお知らせ
2022年7月24日（日）についに、対面イベント Ambassadors Meetup 2022 を開催します！
場所は渋谷区代官山にある Microsoft Base です！普段は入ることのできないスペースとなっておりますので、ぜひぜひ足を運んでいただければと思います。オンラインでも開催しますので、会場へ行けない方もお気軽にご参加ください～
内容としては Microsoft Learn Student Ambassadors の活動紹介と応募方法、特典などの紹介になります。気になっている学生さん、ぜひご参加ください！
Microsoft の学生コミュニティに興味がある学生さんへ
日本では約10名が活動している Microsoft Learn Student Ambassadors は、Microsoft 製品や技術を広める活動を行っています。興味がある方は下記リンクを覗いてみてください。応募方法や特典など、役立つ情報をまとめてみました！
学生の皆さまの参加をお待ちしております！
