改めて運営しているWebサービスのアーキテクチャを整理する

改めて運営しているWebサービスのアーキテクチャを整理する

Nuxt.js

最近、NetlifyからFirebase Hostingに移行したり、認証機能を追加実装したりとアーキテクチャがちょっと変わってきたので、改めて整理したいと思います。

今のざっくりアーキテクチャ図

こちらの記事で書いてありますが、元々Netlifyを使用していましたが、Firebase Hostingに移行しました。

NetlifyからFirebase Hostingに移行した話

満を辞して?NetlifyからFirebase Hostingに移行したので、メ…
mintaku-blog.net

基本SSGの構成は変わっておらず、後で説明しますが、一部SPA的なページが追加されました。

流れとしてはmainブランチにプッシュされるとGithub Actionsのパイプラインが動き出し、ビルドが始まります。

ビルド時はContenfulからデータを取得して、静的なページを生成していきます。ページの生成が完了すると、Firebase Hostingにデプロイします。

ページ数は今のところ大体3300ページくらいあり、ビルドしてデプロイするまで20分近くかかっており、長すぎるビルド時間が直近の課題となっています。

今考えているアプローチ方法は、ISGの導入や最近Nuxt3機能追加されたpayloadを使うなど、サーバー通信を減らしていきたいと思っています。

 

認証機能のところ

今回新しく追加した認証機能はFirebase Authenticationを使いました。Firebaseに統合したいのもあって、ホスティングサービスもNetlifyからFirebase Hostingに移行した感じです。

1stリリースでは、認証のプロバイダはGoogleとTwitterのみにしています。後々、メールアドレスや他のSNS認証も追加する予定です。

ユーザー情報などの格納データはFirestoreを使っています。Firebase Authenticationとあわせて開発しやすかったです。

 

今後のアーキテクチャについて

今後の開発において、ますます動的な機能が増えていくと思います。今はサーバーレスのSSGで開発していますが、後々はAPIを立てたり、SSRに変更するなど考えています。

新しい技術なども出てきたりすると思うので、臨機応変にその時その時考えて、アーキテクチャや使用技術を決めていきたいと思います。

また、負債を残さないためにもdependabotの導入によるライブラリのバージョンアップやこまめなリファクタリングなど、開発生産性を高く保ちながらより良いサービスを提供していきたいです。