【個人開発】ブログをWordPressからNext.jsへ移行してみた

2024.03.24
2024.03.24
個人開発
GCPGithub ActionsNext.jsTypescriptCloudflare

はじめに

今回、このブログをWordPressからNext.jsで作り変えましたので、その内容について紹介していきます。

このブログについて

本ブログは、これまでWordPress(Cocoon)を使って、GCPのVMインスタンスにデプロイしていました。

GCP + WordPressで構築したブログについては、以下の記事を参照してください。

unknown link unknown link unknown link

当初は、とりあえず早くブログを立ち上げたかったため、WordPressを選択しましたが、徐々にWordPressやVMの管理が面倒になり、自分のやりたいようにカスタマイズしたりするのが難しくなってきました。

また、エンジニアとして自分のブログは自分で作りたいという思いもあり、WordPressから移行することにしました。

サーバー代に関しても、GCEのVMインスタンスと画像用のCloud Storageで月に約2,000円程度かかっていました。Next.jsのアプリをCloud Run + CDNで運用すればサーバー代もかなり安くできるかなとも思っていました。

アーキテクチャ

現在のアーキテクチャは以下の通りです。

CDN + DNSとしてCloudflare、Next.jsのアプリケーションをCloud Runで運用しています。

CI/CDにはGithub Actionsを使用しており、PRを作成するとコンテナイメージのビルドが実行され、PRをマージすることでデプロイが実行されます。

使用した技術

使用した技術は下記の通りです。

  • Typescript: 実装言語
    • React: フロントエンドライブラリ
    • Next.js: React フレームワーク
    • next-mdx-remote: MDX ファイルを読み込むためのライブラリ
    • gray-matter: MDX ファイルのメタデータを取得するためのライブラリ
    • react-syyntax-highlighter: コードブロックのシンタックスハイライトライブラリ
    • tocbot: 目次を生成するライブラリ
  • Tailwind CSS: CSS フレームワーク
    • DaisyUI: Tailwind CSS のコンポーネント
  • GCP: インフラ
    • Cloud Run: アプリケーションのデプロイ先
    • Cloud Build: ソースコードとイメージのビルド
    • Artifact Registry: コンテナイメージレジストリ
  • Cloudflare: CDN + DNS
  • Resend: メールサービス
  • GitHub Actions: CI/CD
  • GitHub Copilot: 実装サポート

個別にピックアップすると、Markdownを使って記事を書くためにnext-mdx-remoteを使用しています。next-mdx-remoteはMDXファイルを読み込むためのライブラリで、MDXファイルを読み込むことで、Reactコンポーネントを埋め込むことができます。contentlayerも使いやすそうででしたが、Next.js 14でエラーが出たため調べてみたところ下記のIssueを見つけ、2024/03時点ではメンテナンスされていないようなので、今回はnext-mdx-remoteを選択しました。

unknown link

ただ、もう少しでメンテナンスされるようになるかもしれないみたいなので、機会があれば今後移行するのもいいかなと思っています。

unknown link

また、問い合わせ機能での通知するためのメールサービスはResendを使っています。

Introduction - Resend

Introduction - Resend

Resend is the email API for developers.

メールサービスとして、Send Gridもよく検索に引っかかるのですが、Twilioの利用規約によると、個人利用の場合は利用しないようにとのことなので、今回はResendを選択しました。

10.5.1 利用目的 本サービスは、企業又は事業法人による業務上の利用を目的としており、お客様は、本サービスを私的又は個人的な用途に使用しないことに同意します。

unknown link

ベースとしては、実際に実装する前にサンプルとして作成していた下記のリポジトリを元に作成しました。

unknown link

今後実装予定の機能

今後実装したいものとしては、下記の通りです。

  • タグごとのページ
  • ユニットテスト実装

広告について

広告については、これまでGoogle Adsenseを多用していたのですが、せっかく作ったデザインを壊してしまうので、最低限にしています。

その代わりではないですが、Buy Me a Coffeeを導入してみました。もし役に立つ記事がありましたら、ぜひご支援いただけると嬉しいです。

参考

Support

\ この記事が役に立ったと思ったら、サポートお願いします! /

buy me a coffee
Share

Profile

author

Masa

都内のIT企業で働くエンジニア
自分が学んだことをブログでわかりやすく発信していきながらスキルアップを目指していきます!

buy me a coffee