GitHub PageとNext.jsで静的ページを構築

GitHub Pages + Actions Next.js(SSG)静的ページ公開

◆ Live配信スケジュール ◆
サイオステクノロジーでは、Microsoft MVPの武井による「わかりみの深いシリーズ」など、定期的なLive配信を行っています。
⇒ 詳細スケジュールはこちらから
⇒ 見逃してしまった方はYoutubeチャンネルをご覧ください

【4/18開催】VSCode Dev Containersで楽々開発環境構築祭り〜Python/Reactなどなど〜
Visual Studio Codeの拡張機能であるDev Containersを使ってReactとかPythonとかSpring Bootとかの開発環境をラクチンで構築する方法を紹介するイベントです。
https://tech-lab.connpass.com/event/311864/

GitHub PagesとActionsを使用してNext.jsで静的ページを構築する方法について解説していきます。ymlファイルの設定とGitHubのActionsで環境変数を使うところが鬼門でした。誰かの助けになるとうれしいです。

1 初めに
2 Next.js環境構築とGitHubとの接続
- 2.1 Next.jsセットアップ
- 2.2 GitHubとの接続
3 GitHub Pageで公開するための手順
4 アクセス確認
5 終わりに

初めに

どもども！朝日で部屋の電気をつけずに仕事をしていると夜になることに気付けるなと思ったら真っ暗の部屋にいる龍ちゃんです。今回は【Next.js】で静的ページを公開する方法について説明を入れていきたいと思います。この記事は【microCMS】を用いてのサイト構築をする際の前段階として必要なので、もし【microCMS】【GitHub Pages】【GitHub Actions】【Next.js】というトピックでブログ作成したいと思っている方の助けになればよいなと思っています。

ちなみにですが、【Next.js】と【microCMS】の環境を簡単にデプロイしたいとなった場合、【Vercel】を使えば簡単にデプロイすることができます（参考サイト）。だって公式が出している記事があるんですもの。今回は、どうしても【GitHub】でデプロイしたい人向けの記事になっています。

今回の記事で解決する予定の問題は以下になります。

GitHub Actionsで環境変数を使用したい
GitHub PagesでNext.jsのサイトを公開したい
ymlファイルの書き方がわからないからとりあえず見せて！

それでは初めて行きましょう。

【microCMS】についてザックリと解説した内容はこちらになります。今後【microCMS】の内容を含めた拡張記事を出そうと思っています。こちらにそのリンクが入る予定です。

それで初めて行きましょう。

Next.js環境構築とGitHubとの接続

とりあえずここでは、初期セットアップについて説明していきます。おそらく、すでに手を動かして設定している方もいるかと思います。その辺は好きなサイトか知識を参考にしてください。それでは【Next.js】の環境構築から静的ページを構築するための準備などを進めていきましょう。

Next.jsセットアップ

コマンドは以下です。

npx create-next-app {プロジェクト名} --ts

ちゃんと動作するかどうかを試すために実行してみましょう。

cd {プロジェクト名}

code .

yarn dev

多分http://localhost:3000/にアクセスすれば「Welcome to Next.js」が表示されていると思います。コマンドを脳死で打っていて、VScodeを使用している人は環境画面が立ち上がっていると思います。ディレクトリ構造が以下の様になっていることを確認してください。

もし、「app」ディレクトリで作ってしまった場合は環境を作り直しましょう。対話式で作った場合どこかで聞かれています。問題の切り分けのためにディレクトリ構造は合わせていただけると助かります。

コマンドに戻ります。静的ページなので「api」以下のファイルは消しておきましょう。コマンドでもVScodeでも大丈夫です。

rm -rf api

とりあえず、ローカルで実行して問題ないかどうかを確認しておきましょう。以上で【Next.js】の初期セットアップは終了です。

GitHubとの接続

新しいプロジェクトを作成したら最初にやる行為ですね。今回は、testblogというリポジトリで作業すると仮定していきます。適宜URLについては変更してもらえると思います。そもそも、next-create-appでアプリを作成した場合、Gitがすぐに使えるように設定されているので途中から出問題ないと思います。

git init
git add .
git commit -m "first commit"
git branch -M main
git remote add origin https://github.com/UserName/testblog.git
git push -u origin main

こちらでリポジトリは接続することができたと思います。

GitHub Pageで公開するための手順

設定する点として、主に以下の点があります。

Next.js：next.config.jsに設定追加
GitHub ：GitHub Pageの設定とymlの設定
GitHub：GitHub環境変数の設定
Next.js：ymlファイルに環境変数の設定

それでは順番に説明していきます。

next.config.jsに設定追加

こちらの処理は、ブランチ名でサイトをデプロイしたい場合に必要な設定になります。リポジトリ名を自由にした時点でプロジェクトサイトとしてデプロイすることになります。

以下にnext.config.jsの内容を示します。

/** @type {import('next').NextConfig} */

const branchName = process.env.BRANCH_NAME ? "/" + process.env.BRANCH_NAME : "";

const nextConfig = {
  reactStrictMode: true,
  assetPrefix: branchName,
  basePath: branchName,
};

module.exports = nextConfig;

ローカルファイルを変更した場合は、ちゃんと動くかどうか確かめてからGit上に反映しましょう。

GitHub Pageの設定とymlの設定

それでは、結構悩んだGitHub Pageの設定をしていきたいと思います。リポジトリの「Settings」を開いてください。

左のツールバー部分の「Pages」を開いてください。「Build and development」から「GitHub Actions」を設定してください。

すると自動で表記が変わります。これはGitHubが解析して、自動でymlファイル作成フローを生成してくれます。

ymlファイルエディタが起動したら保存して「commit」して「push」しましょう。

こちらでymlファイルの作成は終了しました。環境変数を設定した後にymlファイルを編集する必要があります。先にGitHub環境変数の設定をしましょう。

GitHub環境変数の設定

それでは、GitHub環境変数の設定を行っていきたいと思います。先ほどの「Settings」から「Environments」を開いてください。

先に「Pages」の設定を終了していれば、「github-pages」の項目が出ていると思うのでクリックしてください。

環境変数には、「secrets」と「variables」があります。こちらは情報の秘匿性の観点から採用が異なります。重要度が高い情報は「secrets」で、あまり重要でない情報は「variables」で良いと思います。ちなみに情報は以下の様にkey-valueで保存します。

今回は「variables」に「BRANCH_NAME」として、リポジトリネームを保存してください。今回はtestblogと保存しておきましょう。以下にymlファイルを示します。

追記する内容としては、「jobs」の中の「build」の中のenviromentとenvになります。こちらはGitHub Actionsの中で使用する環境変数を指定して、接続しています。

変更したら保存して「commit」して「push」しましょう。「main」ブランチに変更を加えた場合は、自動でGitHub Actionsが走ると思います。

アクセス確認

それでは、動作確認をしていきましょう。タブから「Actions」を設定するとGitHub Actionsの実行を確認することができます。緑のチェックがついていれば成功です。失敗するとわかりやすくバツマークが出てくるのでげんなりしましょう。

直近のActionsが成功していればデプロイが成功しています。「Settings」を開いて「Pages」を開くとビルドされた後のURLが表示されているかと思います。

アクセスして「Welcome to Next.js」が表示されていれば成功です。

終わりに

お疲れ様です。今回は、GitHub PagesとActionsを使用してNext.jsで静的ページを構築しました。GitHub Actionsを使用することで、コンテンツの更新があった後で静的ページを作成することができます。これによってSSG構成でサイトを作成することができます。

この構成で構築した理由としては、【microCMS】の制限に引っ掛からないようにサイトを構築するためです。環境変数をGitHubで設定して使えるようにしたのも、APIキーを安全に運用するためです。ここまで来てやっとで初期セットアップです。次回は、【microCMS】を使用してGitHubで静的ページを構築する方法と【microCMS】の更新に合わせてビルドが回るように構築していこうと思います。

普段はReactを書いているのですが、【Next.js】にもしっかりと入っていきたいですね。React関連で書いた記事はこちらがです。エラーハンドリング難しいですね。

今回参考にしたリンクは以下になります。

それではまた～