Nuxt.js+Firebaseのサーバーレス開発 簡易CRUD操作〜デプロイ迄

Firebaseに代表されるサーバーレス技術が最近話題ですが、サーバーサイド業務に長く従事している身として、この技術分野は他人事ではないので試しに使ってみるとかなり便利で驚かされました。

一口にFirebaseと言っても色んな機能がありますが、今回はNuxt.jsと連携させてaxiosによるFirebaseへの簡易CRUD操作と、github-pagesへのデプロイ迄を紹介します。

今回作ったもの

福岡に本社or支社を持つIT企業 を一覧表示の簡易WEBシステム(福岡に限らず登録出来ますが)

フロントエンドはNuxt.jsでFirebaseのRealtime Databaseにデータ連携させています。

左側に登録済みの会社一覧を表示させ、リンク(会社名)押下で右側に詳細情報を表示。

新規登録と編集で会社情報の登録と更新を実行。

Nuxt.jsの環境構築

まずはNuxt.jsプロジェクトを初期化して、必要なモジュールのインストール。

nuxt.config.jsに以下追記。

本当は認証とかまで実装したかったのですが、今回はCRUD操作だけなので設定はここまで。

Firebaseでのデータ構造

今回は会社情報を以下のJSON形式で登録。

usedSkillsは配列形式でデータ登録。

FirebaseへのCRUD操作

axiosで各種メソッド(GET/POST/PUT/DELETE)を実装。

index.jsでVuex実装。

検索(GET)

登録(POST)

更新(PUT)

削除(DELET)

デプロイ手順は以下の記事をご参考までに!!

Vue.jsでポートフォリオを作ってgithubにアップロードしてみる

今後の課題

全て自前で作ると結構時間がかかりますが、フロントに集中出来るので随分時間は短縮できます。

が、Firebase自体が新しい技術なのでネット上にもノウハウが少なく、データ構造周りの設計のベストプラクティスが分からず…また今回諦めましたが、RealtimeDBはNoSQLのドキュメント指向データベースなのでクエリに弱い点…検索エンジンであるAlgoliaと連携させるとイケるっぽい。

あとは認証周りでしょうか…それらを差し引いても可能性を感じる技術です。