Vue.js + FirebaseでToDoアプリを構築

todo機能の作成

realtime databaseの作成

firebaseのrealtime databaseはデータをアプリケーションとリアルタイムで同期することが可能。
今回はtodoアプリのタスク情報を保存するのに使用する

vueのメインページにてタスクを作成・削除を行う機能を実装する。
vue-todo/src/components/Task.vue

実際にタスクを登録してみましょう
firebaseでデータの状態がリアルタイムに確認することができます。

DBのセキュリティ設定

現在のrealtime databaseの設定では他のユーザのデータも認証が通っていれば編集できてしまう。
そこでユーザごとにアクセスできるデータを制限したい。

現在 todos/[uid]/[todoデータ]というデータ構造になっているので、[uid]以下は
ログインしているユーザと一致している場合に編集権限を与えたいと思います。

firebaseのrealtime databaseではルールを設定することで簡単にアクセス制限を実現することができる

firebase-cliを使ったdeploy

firebaseにはホスティング機能がついており作ったvueアプリケーションを簡単にインターネットに公開することができます。
「firebase-tools」を使えば簡単な設定でコマンドライン上からデプロイすることができて便利です。
firebase-toolsをインストールしてデプロイしてみましょう。

firebase-toolsのインストールと設定

ターミナルで以下のコマンドを実行していきます。

プロジェクトのディレクトリで以下を実行してfirebase-toolsにプロジェクトを登録します。

カーソルをHostingに移動させてSpaceを押してチェックを入れた後Enterで次に進みます。

プロジェクトのディレクトリを聞かれるので「vue-todo」にカーソルを移動させてEnter

次に公開用のディレクトリを聞かれるので「dist」と入力して Enter (vue-cliでプロジェクトを作成するとデフォルトの公開ディレクトリはdist)
最後にyと入力してEnter

これでプロジェクトの登録は終了です。

本番用ビルド

次にvue-cliでビルドを実行して、公開用ファイルを生成します。
dist以下にビルドされたファイルが追加されます。

firebase上にデプロイ

ターミナルで以下のコマンドを実行

firebaseのHostingメニューからURLを確認してアクセスしてみましょう。