Augmellブログを支える技術

初めまして、ブログの管理人 Yurite です。Augmell というブログを運営しています。今回、このブログを支える技術について紹介したいと思います。

Augmellブログはこちらからどうぞ

blogs

ホスティング環境

Augmell は当初、Vercel にてデプロイを行っていました。しかし、広告や投げ銭サービスを導入するためには Vercel の Pro プランにアップグレードする必要があり、毎月 20 ドルのコストが発生する点がネックでした。このため、Google Cloud Run に移行することを決意しました。Cloud Run は、コンテナ化されたアプリケーションをフルマネージド環境で簡単にデプロイできるサービスです。さらにアクセスが来ない時には自動でインスタンスを停止してくれるので、コストを抑えることができます。

TypeScript

現在では、スタンダードとなっている TypeScript を採用しています。これにより、バグの発生を最小限に抑えつつ、高品質なコードを維持することができています。

Next.js 13

私の Augmell ブログでは、Next.js 13 を採用しています。Ver.13 を使用するのは初めての試みであったため、approuter から全て学び直す必要がありました。しかし、新しいバージョンで開発してみると、情報の整理が向上しており、非常に使い勝手が良くなったと感じました。特に layout.js の存在により、何度も同じ component を書き直す必要が無くなり、コードがすっきりしました。また、サイトマップやメタタグの設定が以前よりも格段に簡単になりました。一度 Next.js 13 を体験すると、もう 12 には戻れません。

ブログ記事の扱い: next-mdx-remote & gray-matter

Augmell では、記事のコンテンツを MDX 形式で扱っています。そのために、next-mdx-remote と gray-matter というライブラリを採用しています。

• next-mdx-remote: Next.js プロジェクトで MDX コンテンツを非同期に読み込むためのツールです。これにより、MDX ファイルを使って React コンポーネントの中でマークダウン文法を直接使用することができ、動的なコンテンツの取り扱いが容易になります。

• gray-matter: マークダウンファイルや MDX ファイルの先頭にあるフロントマターを解析するためのライブラリです。このフロントマターには、記事のタイトルや日付などのメタデータが格納されており、gray-matter を使用することでこれらの情報を簡単に取得できます。

まとめ

最後までお読みいただきありがとうございました。最近の技術進化により、ウェブ開発のアプローチも大きく変わってきました。特にフロントエンド界隈は進化のスピードが速く、追いつくのは大変です。ぼちぼち追いかけていけたらと思います。これからも、より良いブログを作っていきたいと思います。

本家ブログはこちらからどうぞ

このブログを支える技術