「初めてのシングルページアプリケーション Vue.jsとFirebaseで作るミニWebサービス」読んでFirebase始めてみました

Vue.jsとFirebaseといういまやりたい技術ど真ん中の本を読んで実践した履歴です。

booth.pm

TOC

  • 01: まえがき
  • 02: サーバーレスシングルページアプリケーションの基本
  • 03: 開発環境のセットアップとデプロイまでの流れ
  • 04: Googleアカウントでのユーザー登録と、ログイン状態の判別
  • 05: エディターの作成:データベース作成とデータ保存
  • 06: Webサービスとして公開するまでの必要な準備
  • 07: 最後に

01: まえがき

  • 「Vue.jsとfirebaseを使って簡単なWebサービスを作ってみる」ことが目的、個々の詳細な説明は省略する
  • ちょい足しポイントを実施することでアドバンスドな学習が出来るようにしている

02: サーバーレスシングルページアプリケーションの基本

  • SPAってなに? → 簡単な歴史
  • サーバーレスってなに? → サーバインフラのリソースを気にしなくてもサーバーサイド処理ができる環境を利用することで、サーバー構築で考慮していた一部分を考慮する必要がなくなるという意味とする
  • FirebaseはBaaS、バックエンドの処理を肩代わりしてくれるサービス
  • Firebaseで出来ること → Hosting, Authentication, RealtimeDatabase

03: 開発環境のセットアップとデプロイまでの流れ

やったことを書いていきます。

$ vue init webpack-simple mymarkdown
$ yarn
$ yarn run dev

(書籍ではnpmだったけど宗教上の理由でyarn)

うごいた。
続いて、Firebaseのセットアップとデプロイ

  • アカウント作成
    • 既にGCPのアカウントを持ってる
  • プロジェクト作成
    • mymarkdown-c18t
    • ウェブアプリにFirebaseを追加
    • 表示されたスニペットをコピーして、index.htmlのscriptタグの上にペースト。/dist/build.js → /build.js
      • このコード上のAPIキーはユーザに公開されてしまうが、firebaseのコンソールに権限管理があるので大丈夫
$ yarn global add firebase-tools
$ firebase login
$ firebase init
❯◉ Hosting: Configure and deploy Firebase Hosting sites
? Select a default Firebase project for this directory: mymarkdown (mymarkdown-c18t)
? What do you want to use as your public directory? (public) dist
? Configure as a single-page app (rewrite all urls to /index.html)? (y/N)

webpack.config.jsを修正。

  • output.publicPath/にする
  • devServer.contentBase: 'dist'を追加
  • souceMapfalseにする

index.htmlをdistに移動してビルドしてデプロイ

$ mv index.html dist/
$ yarn run build
$ firebase deploy

index.htmlが表示された!

04: Googleアカウントでのユーザー登録と、ログイン状態の判別

今度は Authentication を使ってユーザー登録・ログイン機能を用意し、ログイン状態で内容を変えてみる。

  • src/components/Home.vue 作成。
  • src/components/Editor.vue 作成。
  • src/App.vue 修正して c/Home.vue と c/Editor.vue を条件に応じてインポート
  • FirebaseのコンソールでAuthenticationを追加、Googleアカウントでログイン機能を有効化
  • src/components/Home.vue に firebase.auth().signInWithRedirect(new firebase.auth.GoogleAuthProvider()) を呼び出す
  • src/App.vue でユーザーが取れたら this.isLogin = true にして this.userData = user する
  • src/Editor.vue にログアウトボタン
$ yarn run dev

うごいた!

$ yarn run build
$ firebase deploy

うごかない…Home.vueの@click="googleLogin"が反応しない…とおもったらしばらくして動くようになった…

05: エディターの作成:データベース作成とデータ保存

$ yarn add marked -D
  • src/components/Editor.vue に markdown 入力エリア作成
  • style lang="sass" scoped

markdownがプレビューされるようになった。

  • src/components/Editor.vue にメモ選択機能追加
  • ビューモデルのデータを配列にしてぐるぐる回す

firebaseの機能と直接関係ないので省略して、Firebase Realtime DBにメモを保存するように変更する。Cloud Firestoreが推奨されているけど、今回はRealtime DBを使います。

  • Firebase Realtime DBにルールを追加
    • /memos/$uidに対し、$uid === auth.uidのときread/writeの許可
  • 保存ボタン押下時に /memos/$uid にメモのモデルを保存
  • エディタオープン時に /memos/$uid から読み取ったモデルの内容を表示

オンラインエディタだ!

06: Webサービスとして公開するまでの必要な準備

見た目の調整、サイトの説明の作成、利用規約の作成、セキュリティ対策などを行いましょう。

07: 最後に

ちょい足しをやったうえでまだまだ足りないぞ!という方向けに「強くてニューゲーム」があります。

感想

技術書典04で見かけて、BaaSやんなきゃなと思っていたところだったので渡りに船という感じで購入しました。めちゃくちゃ簡単だ…!業務で通知機能を利用したことはあったんですが、ホスティングサービスとして利用したのは初めてでした。手元のコンソールからコマンドでデプロイが簡単にできちゃうというのが強力だなというのと、SDKの使い方がわかりやすいなというのが良いポイント。

書籍については、通常の内容は簡単ですぐ動いてくれるのでやっていて楽しかったです。(知りたかったのはFirebaseの機能だったので複数メモ機能は飛ばしちゃいましたが…)また、ちょい足しポイントの難易度がそれなりに高めでやりごたえありそう。そしてそれが終わったあとも「強くてニューゲーム」が用意されているスルメぶりでゲーミフィケーション性が高いなーと思いました。3回遊べる技術書って珍しいのでは。学習を進めたら折をみてまた挑戦したいです。素敵な本をありがとうございました。

書籍で取り扱わなかったStorage、Functions、ML Kitも触ってみたいですね。

今回やった成果はこちら。