ブログサイトを作ってみました。せっかくなのでその理由と機能、アプリのインフラ、アプリの利用技術、反省、今後の展開をまとめていきたいと思います。
なぜブログサイトを作ったのでしょうか?世の中には便利なブログサイトが山ほどあります。現代のネット環境において、自分で作る理由はなかなか見つかるものではないでしょう。しかし作りたかったのです。ブログを。自分の秘密基地を持ち、カスタマイズし、自分でデータを持ち、管理することに憧れがあるのです。
とはいえ、あえてちゃんとした理由をつけるなら、次のような理由でしょうか。
そんな気持ちがある中、VimCon 2023 Tinyや、YAPC::Hiroshima 2024に参加し、少しでも自分のスキル向上をしたい!発信活動も欠かさずやっていきたい!と背中を押された気持ちになり、ブログを作って公開することにしました。
まず、このブログの機能から説明します。世にある多くのブログサービスの機能と似ているので驚きはないとおもいます。
このブログアプリには、ユーザーが紐付いています。ユーザを登録することによって、ユーザ毎に記事が管理できるようになっています。ユーザの管理はAuth0を使い、ログインに関しては、Auth0のOAuthを利用しています。また、そのためのライブラリには、NextAuth.jsを使わせもらってます。なので、一応管理者である私が、Auth0にユーザ登録を行えばだれでも記事を投稿して公開することができるようになっています。
このアプリ上で記事を編集、投稿、公開・非公開にできる機能があります。Markdownで書く形式にしています。エディットモードとプレビューモードがあり、記事の編集中にどのようにMarkdownが表示されるのか確認することができます。記事の本文とは別に、記事のタイトル、タグ、記事のサマリーを登録することができます。
公開するユーザ名や、プロフィール、Githubアカウント、Xアカウント、自分のホームページを編集することができます。登録したプロフィールは自分が書いた記事と一緒に表示されるようになっています。
さて、そんな機能をもつこのアプリは、次のインフラを基盤とIaCの手法を利用して動作しています。
IaaSとしては、Conoha VPSを使っています。OpenStackを採用されているらしく、HashicorpのPackerもTerraformもOpenStackのプロバイダを利用すれば、実は本格的なIaCもできたりします。 ちなみに、このブログを運用するために現在8台ほどのインスタンスを起動しています。
Conoha VPSの上のサーバーインスタンスは、全てPackerで作成したイメージから起動させています。手動でSSHで設定みたいなことはせず、前もって設定の構成を終えたイメージを使う、ゴールデンイメージってやつですね。この手法が良いのは、サーバーのハードニングの設定(CIS Benchmark等)をコード化できてしまえば、以降は手動でやらなくても良いし、ハードニングを終えたイメージをベースに、さらにイメージをつくれば、設定の継承もできてしまいます。便利ですね。
全てのサーバーインスタンスは、Terraformから作成させています。 余談ですが、Conoha VPSは、OpenStackを採用しているので、terraform-provider-openstackが使えます。しかし、電源を切った状態でインスタンスを作成することが、なぜかConoha VPSではできないので、既存のOSSでは、Portのアタッチと作成が同時にできません。なので、リポジトリをフォークしてConoha VPSに対応できるように修正しました。
このブログアプリをDockerでイメージにして、Docker Swarmのクラスタの上にデプロイしています。そのため、必要はないでしょうが、スケールアウトが可能になっています。さらに、Portainerを使ってクラスタやスタック、シークレットの管理をしています。このPortainerでクラスタを管理すれば、Docker SwarmでもGitOpsができるんです。素晴らしいですね。
AWSのECRでアプリのイメージと、イメージのバージョンを管理しています。
アプリのTLS化のために利用しています。ブログアプリと同じスタックにサービスとして設定しています。
DBはPostgre SQLを利用しています。こちらはクラスタの上には載せず、クラスタが共有するDBとして運用している感じですね。スキーマ設計とロール設計、設定を行い、マイグレーションはDrizzleで行いました。
今回のアプリ開発で利用した技術をさくっと説明します。
まずはNextJSですね。採用した理由は使ってみたかったからです。Xのトレンドでよく見ますからね。
NextJSのために広く使われている、認証系のライブラリみたいですね。認証系も自作したかったのですが、まずは簡単に作ろうという理由で、採用させていただきました。
NextUIはモダンなReactのUIライブラリらしいです。名前繋がりで採用しました。
言わずと知れた、CI/CDのワークフローを作れるサービスですね。昔はDroneCIやGitLabのパイプラインを使っていましたが、こちらのサービスに落ち着きました。
Jestは、単体テストのために採用させていただきました。
CypressはE2Eテストのために採用させていただきました。NextJSの公式のドキュメントに勧められるがままってやつです。
Storybookはコンポーネント管理のためのアプリですね。使ってみたかったし、実際コンポーネントの管理がかなり簡単になりました。
動的アプリをイチからデプロイしたことはなかったので、良い経験になりました!自分の作ったアプリで記事を打って、公開するというのは、いいものですね!現在のアプリ公開基盤を使うかどうかは別として、次の不特定多数の人に対するサービスの開発、という目標に一歩近づいたと思います。
認証基盤は自作したかったですね。あと、技術的に基礎的なことしかやれなかったのは残念です。もっと面白い要素を加えられればよかったと思います。
今後やりたいこととしては、Chat GPTのAPIを使って、記事から自動的にサマリを作れるようにしたいです。 あと画像が添付できないので、それもいずれ対応していきたいです。あと、このブログアプリの動作が安定してきたら、ぜひOSSとして公開したいですね。ここまで読んでいただき、有難うございました!