GithubActionsを使ってNext.jsで作ったサイトをGithubPagesで公開した

Next.jsで作成したサイトをどうにか公開したいなと調べていたら、GithubActionsでどうやらできるようで、やってみたので記事として残しておこうと思います。

今回はNext14.2を使用しています。
Next13等だとやり方が変わってくると思うので注意してください。

実際にやってみる

1.GithubActionsの設定をする(ymlのテンプレートを適応する)

まず、Settingsから、Pagesのページに飛びます。

そこからbrowse all workflowsを選択して、下のようにNext.jsを調べ、configureを選択します。

すると、下のような画面になると思います。これがNext.jsにおけるymlファイルのテンプレートになります。

そしたら、Commit Changesを選択して、mainブランチに反映させます。
その後、mainブランチからpullします。

2.コードの修正

デプロイするに当たって幾つか設定する必要があります。
まず、next.config.mjsに静的エクスポートの設定を行うために、以下のコードを追記します。

const nextConfig = {
+   output: 'export'
};

静的エクスポート:Node.jsのサーバーを使わずに、静的コンテンツとしてエクスポートできる機能

次にソースコードに記述した画像パスも修正します。

+import nextConfig from "../../next.config.mjs";
+const BASE_PATH = nextConfig.basePath || "";

<Image
-    src="/images/img.png"
+    src={`${BASE_PATH}/images/img.png`}
    alt="icon"
    width={500}
    height={500}
/>

basePathの設定は後ほど

上のような修正をしたのは、アプリケーションがデプロイされた際に、アプリケーションがサブディレクトリに配置されるため、パスの解釈が異なってしまうためです。

具体例として、アプリケーションが認識できるパスが下だったとします。

• 開発環境:https://localhost:3000/images/img.png
• 本番環境:https://example.com/myapp/images/img.png

しかし、src="/images/img.png"だと本番環境でのパスは
https://example.com/images/img.pngとなってしまい、存在しないパスを参照してしまうことになってしまいます。
したがってbasePathを設定しています。

最後に、先ほどプルしたymlファイルを修正します。

      - name: Setup Pages
        uses: actions/configure-pages@v5
        with:
          # Automatically inject basePath in your Next.js configuration file and disable
          # server side image optimization (https://nextjs.org/docs/api-reference/next/image#unoptimized).
          #
          # You may remove this line if you want to manage the configuration yourself.
          static_site_generator: next
+          generator_config_file: next.config.mjs

こうすることでnextConfigにbasePathが自動で追加されます。

なぜかこれ設定しなくても動きました。よくわかりません。

ここまで終わったら、mainブランチにpushします。

デプロイできているか確認する

pushするとリポジトリのmainブランチにオレンジ色の円が表示されます。

これはGithubActionsが機能している状態を表していてCIツールが動いています。

ビルドとデプロイが完了すると緑のチェックマークに変わります。

ここから最後のActionsに移動し、最後のコミットメッセージが同じ見出しが書かれているworkflowを探します。

すると、下のようになっていると思うので、deployにあるURLからちゃんとデプロイできたかどうかを確認します。

確認できたらokです！お疲れ様でした!