Next.js + Cloudflare Pages でポートフォリオを作成
はじめに
これまで、アプリ情報サイトやポートフォリオをGithub pagesで公開していましたが、よりカスタマイズされたサイトを製作したいと思い、静的サイトジェネレータ(SSG)とホスティングサービスを使ってwebサイトを作りました。
まだ完成していませんが、デプロイまでできたので、一旦ブログでまとめます。
目次
技術選定
今回は静的なサイトを構築できるSSGを選択していますが、そもそも、CMSではなくSSGを選択した理由について、
- コスト削減
- 管理工数やセキュリティリスクの低減
- 高速な表示
これを踏まえて、SSGとホスティングサービスを選定しました。
SSGの選定
SSG自体は基本的な機能が揃っていて、無料(できればライセンスのゆるいOSS)であれば、特にこだわりがなかったので、Githubで人気だったNext.jsを選択しました。
ホスティングサービスの選定
前提として、信頼性が比較的高く、まずは無料で使えるサービスを検討しました。 最終的には、Netlify, Vercel, Cloudflare Pages, Firebase Hostingの中から選ぶことになりましたが、以下の理由からCloudflare Pagesを選定しました。
- Netlify : 通常プランは初回読み込みが遅い
- Firebase Hosting : 単にホスティングするには機能が多すぎる＆無料枠の制限が厳しい
- Vercel : 無料プランはNon-commercial専用(今のところ、広告の貼付やオンラインビジネスを行う予定はありませんが、今後のことも考えて)
- Cloudflare Pages : 転送量が無制限で、初回読み込みも高速、商用利用可能
はじめはNetlifyを使用していましたが、テストで作った簡単なページの表示が数秒以上かかったので、やめました。 調べてみると、どうやら通常プランでは日本リージョンが無いため、遅くなっているようです。
開発環境
Node.js環境はすでに構築済として進めます。
Next.jsの導入とチュートリアル
導入は以下のコマンドを入力するだけです。
npx create-next-app@latest
まずは、Next.jsに慣れるため、公式チュートリアルをしました。
すべて一通り実施できたら、markdownでブログを作ることができるレベルまで上達します。 わからないことは公式ドキュメントで調べます。
vscodeの設定
vscodeで開発を進める場合、ESlintの設定を行います。
プロジェクトのルートで
./node_modules/.bin/eslint --init
.eslintrc.jsonの中に"extends": "next/core-web-vitals"を追記します。
以下は一例です。
{
"env": {
"browser": true,
"es2021": true
},
"extends": ["eslint:recommended", "next/core-web-vitals"],
"parserOptions": {
"ecmaVersion": "latest",
"sourceType": "module"
},
"rules": {}
}
Next.jsでサイト構築
公式チュートリアルを実施していれば、ある程度できるようになっています。 作成する上で悩んだ点をまとめます。
Vercelを使わない場合、画像の最適化は別のloaderを使うかimgタグを使う
デフォルトのloaderではVercel以外では使えないみたいなので、imgix等のloaderを使用しなければいけません。
もしくは、最適化はできないけど、imgタグを使って画像を表示することもできます。
<img src="/images/profile.jpg" height={108} />
markdownのパース
markdownのパースにはremarkを採用し、プラグインとしてremark-html, remark-image, remark-gfmを使いました。
以下は使用例。
import { remark } from "remark"; import html from "remark-html"; import remarkImages from "remark-images"; import remarkGfm from "remark-gfm"; const processedContent = await remark() .use(html, { sanitize: false }) .use(remarkGfm) .use(remarkImages) .process(data); const contentHtml = processedContent.toString();
デプロイ準備
npx next buildとnpx next exportを実施し、問題が発生しないか確認します。
静的HTMLのexportは画像最適化等がexportに対応していないので、注意が必要です。
Cloudflare Pagesの始め方
サインアップ
公式サイトからサインアップします。
Githubアカウントと連携しデプロイ
ダッシュボードからPagesへ飛び、プロジェクトを作成します。
ビルドの設定ではフレームワークにNext.jsを選択します。 必要に応じて、環境変数を設定できます。
保存するとデプロイが開始され、完了したら、公開アドレスが表示されます。
また、以後はリポジトリに変更がpublishされる度に、ビルドを行います。
カスタムドメイン
Google Domainsを使ったカスタムドメインの設定です。
Cloudflare Pagesのプロジェクトの中からカスタムドメインを設定します。
Cloudflare Pagesに記載された名前とターゲットをGoogle DomainsのDNS > カスタムレコード(CNAME)のホスト名とデータに書きます。
Google Domains側で保存できたら、Cloudflare Pages側からDNSレコードを確認します。 完了後、新しいサブドメインを使うことができます。
おわりに
普段、JavascriptやReactを使わないので、やや難しく感じる部分がありましたが、少ないコードで静的サイトを構築することができました。
まだまだ甘い部分もあるので、これからきれいにしていきたいと思います。
