こんにちは、@kenji7157です。
私はプラグラミング学習をしていると、色々なところにメモを記録していくので、大量のメモを点在させてしまいます。
そのため「プログラミング学習のメモを気兼ねなく投稿できるサービスが欲しい」と思い、以下のサービスを作りました。
本記事では、こちらのサービスの使用技術やシステム構成について簡易的ですが書いていきます。個人開発の技術選定の参考になれば嬉しいです。
（開発経緯が気になる方は以下をご覧ください。）
作ったサービス
プログラミング学習時のメモを記録して投稿・共有することができるサービスです。
使用技術
使用技術は以下の通りです。
- nuxt.js
- Vue.jsベースのJavaScriptフレームワーク
- https://ja.nuxtjs.org/
- TypeScript
- コンパイル結果がJavaScriptコードになる、「AltJS」と呼ばれる種類の言語
- https://www.typescriptlang.org/
- Vuetify
- Vue.jsで使用できるマテリアルデザインのUIフレームワーク
- https://vuetifyjs.com/en/
- Firebase
- モバイル・Webアプリケーション開発プラットフォーム
- https://firebase.google.com/
- GAE
- Google Cloud Platform（GCP）のPaaS
- https://cloud.google.com/appengine/docs
※ Firebaseの内、本サービスでは以下を使用しています
- Authentication(Googleアカウント)
- Firestore
- Storage
- Functions
他にも特筆して上げておくとemoji-mart-vueというライブラリを使用しています。
（絵文字リストの動作が遅いので、改善方法がありましたらご教授お願いします。）
Firebaseによるサーバレスアーキテクチャ
現在（2021年11月)はGAEにホスティングしているため、構成図・後述の「それぞれの役割」は追って修正します。
システムの構成図は以下のように、Firebaseによるサーバレスアーキテクチャになっています。
それぞれの役割
- Hosting
- ブラウザからのHTTPリクエスト時はCloud Functions にリライト
- 参考記事：https://qiita.com/isatan@github/items/c1ad0eeee5d118ebc1e8
- OGP画像、faviconなどの静的リソースのみをhostingにデプロイ
- Cloud Functions
- Hostingからのリライト時にFunctionsが起動
-
SSRモードのnuxt.jsでHTMLが生成されブラウザにレスポンスする
- nuxt.js
-
TypeScriptを用いて型付け - デザインフレームワーク
Vuetifyを使用
-
- Authentification
-
Googleアカウントでログイン可能 - 他にもTwiiter,facebookなどのアカウントでも認証機能は実装可能
-
- Firestore
-
NoSQLデータベース - 参考記事：https://qiita.com/1amageek/items/d606dcee9fbcf21eeec6
-
このように、Functionsを使ったSSRを実装しています。リージョンの制限の関係でFunctionsはus-central1を指定する必要があります。
そのため、東京リージョンを指定してSSRが実現できるCloud Runにアプリケーションを移行するかは検討中です。（改善されるよ or あまり変わらないよ っていう情報があれば是非教えて下さい。)
まとめ
本記事をお読みいただきありがとうございました。少しでも興味を持って頂ければ嬉しいです、暇な時に覗いてみてください。