【Firebase / Nuxt.js】プログラミング学習時のメモを記録・共有するサービスを作ってみた

こんにちは、@kenji7157です。

私はプラグラミング学習をしていると、色々なところにメモを記録していくので、大量のメモを点在させてしまいます。

そのため「プログラミング学習のメモを気兼ねなく投稿できるサービスが欲しい」と思い、以下のサービスを作りました。

本記事では、こちらのサービスの使用技術やシステム構成について簡易的ですが書いていきます。個人開発の技術選定の参考になれば嬉しいです。 （開発経緯が気になる方は以下をご覧ください。）

https://note.com/kenji7157/n/n3c77ef9b3374

作ったサービス

プログラミング学習時のメモを記録して投稿・共有することができるサービスです。

https://ticketnote.dev

使用技術

使用技術は以下の通りです。

• 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/

---

※ Firebaseの内、本サービスでは以下を使用しています

• Hosting
• Authentication(Googleアカウント)
• Firestore
• Storage
• Functions

---

他にも特筆して上げておくとemoji-mart-vueというライブラリを使用しています。

（絵文字リストの動作が遅いので、改善方法がありましたらご教授お願いします。）

Firebaseによるサーバレスアーキテクチャ

システムの構成図は以下のように、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を指定する必要があります。

https://qiita.com/qoAop/items/249c1f60b4ec2dd286b9

そのため、東京リージョンを指定してSSRが実現できるCloud Runにアプリケーションを移行するかは検討中です。（改善されるよ or あまり変わらないよ　っていう情報があれば是非教えて下さい。)

まとめ

本記事をお読みいただきありがとうございました。少しでも興味を持って頂ければ嬉しいです、暇な時に覗いてみてください。

https://ticketnote.dev