技術スタック FirebaseNuxt.js

Firebase functionsで静的なページにコメント機能を実装する

2023.08.22

こんにちはjunです。最近AWS LambdaやGoogle Functionsといったサーバーレスアーキテクチャーを会社でも個人でも調べています。わざわざサーバーを用意したり、保守せずともサーバーサイドなプログラムを実行できるのはとても良いアーキテクチャーだとおもいます。今回はそんなサーバーレスアーキテクチャーを用いて、この静的ブログに「コメント機能」を実装したいと思います。

バックグラウンドには

  • AWS Lambda
  • AWS API Gateway
  • AWS DynamoDB
  • Akismet

を使用します。どのようにアーキテクチャー図は後述します。「なぜコメント機能か?」「サーバーレスだと何がいいのか?」ということから始めますので、機能実装について知りたい方は「」から確認してください。

静的な環境でも部分的に動的にしたい

このブログはマークダウンで作成した原稿をNuxtを用いて静的書き出しをしています。そのため基本的にはHTMLの静的ファイルのなので、wordpressなどCMSでは基本情報として実装されているコメント機能などがありません。

そんなときは動的な機能を行うサーバーを別途に用意して、Ajaxを用いてサーバーと通信してクライアントサイドで要素を作成するという技を使います。静的環境であっても一応JSを用いることで、部分的に動的な動きを実装るすことが可能です。

wordpressと比べる静的+サーバーレスのメリット

個人のブログではwordpressでも十分です。しかしセキュリティやパフォーマンスの都合上、公開環境は静的ファイルするという構成をとることが多いです。

PHPなどがある場合、PHP自体の保守や関連するライブラリの保守といったコストがかかる上、DBに接続されているのでセキュリティリスクもあります。webサーバーだけであればセキュリティは格段に上がります。S3においてしまえばwebサーバー側の保守もAWSにぶん投げられます。

そしてコメント機能のような簡単な動的機能を用いるときは別途のサーバーを使用します。しかしこの時そのサーバーでもDB、PHPなど、webサーバーと入れるとなると構築するのも大変ですし、さらに保守もかかります。

実際のところは「コメントの投稿」「コメントの参照」というサービス要件を実現するために「サーバーの構築・運用・保守・支払い」といったインフラ側を考える必要があります。しかしサーバーレスを用いることで、サーバーの構築や運用部分はAWSに任せ、開発者は「コメント機能」を実装することに集中できるようになります。

もしブログがバズって、コメントが大量に使われるようになってもスケーリングは自動的にAWSが行ってくれます。サーバー自体はAWSが管理しているので安全ですし、使った分だけの請求となるのでコストも節約できます。

wordpressは確かに便利なのですが、セキュリティやパフォーマンスなどで静的環境でないといけなかったり、別途の動的サービスのサーバーに費用を掛けたくないときはこの構成がお勧めです。

アーキテクチャー

それではアーキテクチャーと要件です。といってもそれほど高機能なものではありません。

コメントの投稿

コメントの投稿はこのページで

AIMの調整

Lambda,DynamoDB環境構築

API gateway 設定

投稿機能を実装する

クライアント側

リクエストから値を取得

バリデーション

スパムチェック

DBに格納

コメントの表示機能を実装する

リクエストから対象を取得

ページング

クライアント側表示

Copyright © 2021 jun. All rights reserved.