Qiita Teams that are logged in
You are not logged in to any team

Log in to Qiita Team
Community
OrganizationEventAdvent CalendarQiitadon (β)
Service
Qiita JobsQiita ZineQiita Blog
5
Help us understand the problem. What are the problem?

posted at

updated at

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

こんにちは、@kenji7157です。

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

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

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

作ったサービス

Kapture 2021-03-26 at 00.56.27.gif

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

使用技術

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


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

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

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

(絵文字リストの動作が遅いので、改善方法がありましたらご教授お願いします。)
スクリーンショット 2021-03-26 0.35.35.png

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

現在(2021年11月)はGAEにホスティングしているため、構成図・後述の「それぞれの役割」は追って修正します。:bow:

システムの構成図は以下のように、Firebaseによるサーバレスアーキテクチャになっています。

image.png

それぞれの役割

  • Hosting
  • Cloud Functions
    • Hostingからのリライト時にFunctionsが起動
    • SSRモードのnuxt.jsでHTMLが生成されブラウザにレスポンスする
  • nuxt.js
    • TypeScriptを用いて型付け
    • デザインフレームワークVuetifyを使用
  • Authentification
    • Googleアカウントでログイン可能
    • 他にもTwiiter,facebookなどのアカウントでも認証機能は実装可能
  • Firestore

このように、Functionsを使ったSSRを実装しています。リージョンの制限の関係でFunctionsはus-central1を指定する必要があります。

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

まとめ

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

Kapture 2021-11-22 at 01.54.17.gif

Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
5
Help us understand the problem. What are the problem?