こんにちは。ホスティング事業部 事業開発チームの @kinosuke01 です。最近はGPT-4先生を質問攻めするのが日課となっています。
2023/10/04に、NotionでWebサイトが作れる「MuuMuu Sites」というサービスをリリースしました。この記事では「MuuMuu Sites」のサービス内容とその設計に関するお話を、登壇資料とともに簡単に紹介したいと思います。
「MuuMuu Sites」ってなに？
「MuuMuu Sites」とは、Notionに書いたページに、独自ドメインをあて、デザインをカスタマイズして、Webサイトとして公開できるサービスになります。 ドメインの購入管理ができるサービス「ムームードメイン」 の 1機能として提供しています。 必要な費用は「ドメインの取得更新費」のみで、ドメインがあれば無料でサイトが作成可能です。
「Notionにコンテンツを書き込んで、自分の好きなドメインで公開したい」「Notionのデザイン好きだけどもう少しだけ自分用にアレンジしたい」といった方々に少しでも寄り添えればなという思いで開発を行いました。
このサービスの特徴の１つとしてあげられるのは、あえてデザインカスタマイズできる幅を絞っている点です。厳選された項目のみを提示することで、選択肢から選ぶだけで「これいいな」と思えるサイトに仕上がるよう設計されています。
サービス内容については「 Notion Creators Fes 2023 」でもお話しています。YouTubeにアーカイブがありますので、合わせて見ていただければ嬉しいです。
「MuuMuu Sites」の設計は？
静的サイトジェネレータを使用
「MuuMuu Sites」の設計において大きな特徴としてあげられるのは「静的サイトジェネレータ」を用いている点です。
大きく以下の4ステップでサイトの作成を実現しています。
- (初回のみ)ドメインやサーバー証明書などインフラ環境のセットアップ
- NotionAPIからソースとなるコンテンツ情報を取得
- 取得した情報をもとに、Next.jsのSSGを用いて静的サイトをビルド
- 生成したファイルをホスティングサーバーにデプロイ
サイトの更新時には必ずビルドしなおすステップが必要になりますが、動的サイトに比べて読み込み速度が速くなるためユーザー体験の向上が見込めます。
非同期処理の実現方法
サイトのビルドとデプロイには時間を要するため非同期処理を用いています。 その非同期処理を実現するため、Kubernetesクラスターに以下を構築しています。
- サイト更新のリクエストを受け取るWebAPI
- ビルドとデプロイを行うジョブワーカー
- WebAPIとジョブワーカーを繋ぐメッセージキュー
ビルドとデプロイのリクエストはWebAPIで受け取られ、メッセージキューを流れ、ジョブワーカーによって読み込まれ、ビルドとデプロイが実行される、という流れになります。
なお、メッセージキューにはインメモリデータストアであるRedisを採用しています。メッセージキューを実現するため Streamsという機能を利用し、可用性向上のためCluster構成としています。
もっと詳しく
もう少し踏み込んだ設計の話は「 GMO Developers Night#39 」でお話しています。登壇資料を公開していますので、気になる方は以下のスライドをぜひご覧ください。
まとめ
簡単に「MuuMuu Sites」のサービス内容とその設計の紹介をしました。 最後まで読んでいただき、ありがとうございます。 もし少しでも興味がありましたら「MuuMuu Sites 公式サイト」を見ていただけると嬉しいです。