問題点

普段 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 を経由する場合は特に必要はなく、カスタムドメインを使用する場合は必ずルートディレクトリを指定するようにしてあげないといけないわけです。（へぇ～）

できあがったもの

ちょっとおしゃれなページができました。

fw.mcwithcode.com

補足

とりあえず 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"
  },

参考サイト

ありがとうございます～助かりました

wallis.dev

イベントのお知らせ

2022年7月24日（日）についに、対面イベント Ambassadors Meetup 2022 を開催します！
場所は渋谷区代官山にある Microsoft Base です！普段は入ることのできないスペースとなっておりますので、ぜひぜひ足を運んでいただければと思います。オンラインでも開催しますので、会場へ行けない方もお気軽にご参加ください～
内容としては Microsoft Learn Student Ambassadors の活動紹介と応募方法、特典などの紹介になります。気になっている学生さん、ぜひご参加ください！

mspjp.connpass.com