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

GitHub Pages + Actions Next.js(SSG)静的ページ公開
◆ Live配信スケジュール ◆
サイオステクノロジーでは、Microsoft MVPの武井による「わかりみの深いシリーズ」など、定期的なLive配信を行っています。
⇒ 詳細スケジュールはこちらから
⇒ 見逃してしまった方はYoutubeチャンネルをご覧ください
【5/21開催】Azure OpenAI ServiceによるRAG実装ガイドを公開しました
生成AIを活用したユースケースで最も一番熱いと言われているRAGの実装ガイドを公開しました。そのガイドの紹介をおこなうイベントです!!
https://tech-lab.connpass.com/event/315703/

【5/27開催】事業変革を最新ソフトウェア技術で加速する「OSS利活用事例セミナー」
OSSのビジネス活用事例などを紹介します!登壇者はスカパー様やIPAなど🎤
OSSを活用した新たなビジネス創出やDX推進のヒントを得られる機会です。
https://ossforum.connpass.com/event/318583/
【6/19開催】Kong Community Japan Meetup #4
本イベントでは、Kong Inc. のVP of ProductであるReza Shafii氏もプレゼンターとして参加。当社からはアーキテクト マネージャーの槌野の登壇が決定!参加無料です!!
https://column.api-ecosystem.sios.jp/connect/kong/1081/

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

初めに

どもども!朝日で部屋の電気をつけずに仕事をしていると夜になることに気付けるなと思ったら真っ暗の部屋にいる龍ちゃんです。今回は【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」を開いてください。

GitHub Pages設定
Settingsを開く

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

GitHub Pages設定
Pagesのデプロイ方法の確認

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

GitHub Pages設定
yml作成フロー確認

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

GitHub Pages設定
ymlファイルエディタ

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

GitHub環境変数の設定

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

GitHub Actions設定
Step1

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

GitHub Actions設定
キーの保存場所設定

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

GitHub Actions設定
環境変数設定画面

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

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

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

アクセス確認

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

GitHubデプロイ確認

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

GitHubデプロイ
URL確認

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

終わりに

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

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

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

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

それではまた~

アバター画像
About 龍:Ryu 107 Articles
2022年入社で主にフロントエンドの業務でTailwindと遊ぶ日々。お酒とうまいご飯が好きで、運動がちょっと嫌いなエンジニアです。しゃべれるエンジニアを目指しておしゃべりとブログ執筆に注力中(業務もね)//
ご覧いただきありがとうございます! この投稿はお役に立ちましたか?

役に立った 役に立たなかった

0人がこの投稿は役に立ったと言っています。


ご覧いただきありがとうございます。
ブログの最新情報はSNSでも発信しております。
ぜひTwitterのフォロー&Facebookページにいいねをお願い致します!



>> 雑誌等の執筆依頼を受付しております。
   ご希望の方はお気軽にお問い合わせください!

Be the first to comment

Leave a Reply

Your email address will not be published.


*


質問はこちら 閉じる