firebaseでサーバーレス

Webアプリを作ってみたくて、firebaseを試してみました。
Databaseを作ったり、それを応用してリアルタイムで共有できる「買い物リスト」なんかも作れるのではないかと思っています。
Mailアドレスや、SNSアカウントによるログイン機能が提供されていて、ほぼ無料で使えます。
www.topgate.co.jp

インストール

firebase.google.com

firebase.google.com
Referenceを参考に、Node https://nodejs.org/en/download/をインストールします。

次にコマンドプロンプトでfirebase toolをインストールします。

$ npm install -g firebase-tools

ログインします。
ブラウザが立ち上がるのでGoogleアカウントの認証をします。

$ firebase login

Version upを確認します。

$ npm install -g firebase-tools

アプリの作成

プロジェクトを作成します。

アプリを追加します。

スニペットといわれるAPIキーが発行されます。（APIキーは公開しないほうがいいのかな？）

データベースルールを変更し、公開します。
Database＞Realtime Databaseでread、writeをtrueに書き換えます。

コンソール（コマンドライン）に戻ります。
プロジェクトに適したフォルダを作成します。
これを行わないとマイドキュメントに作られますが、不具合が出るようです。

$ mkdir myProject

作ったフォルダに移動し、プロジェクトの初期化をします。

$ cd myProject
$ firebase init

Are you ready to proceed? (Y/n) 　→Y

Which Firebase CLI features do you want to set up for this folder? Press Space to select features, then Enter to conf
irm your choices.  →
Hosting: Configure and deploy Firebase Hosting sites

上下のカーソルで移動し、スペースで選択します。

? Select a default Firebase project for this directory:
→　いま作ったプロジェクトを選択

? What do you want to use as your public directory? (public)
→Enter

Configure as a single-page app (rewrite all urls to /index.html)? (y/N)
→ N

 Firebase initialization complete!

とでたらOK。

ここまでで、↓のようなファイルができているはずです（404はないかも）。

index.htmlを編集します。
github.com

コンソールにもどってデフォルトのポートがふさがれているので、ポートを変更します。

$ firebase serve -p 8080

i  hosting: Serving hosting files from: public
+  hosting: Local server: http://localhost:8080

と表示されたら、http://localhost:8080でブラウザでアクセスすると、動くはずです。

Ctlr + C で停止し、デプロイします。

$ firebase deploy

Completeと表示されたら、Hosting　URLにアクセスすることが出来ます。

+  Deploy complete!
Project Console: https://console.firebase.google.com/project/myproject-3c527/overview
Hosting URL: https://myproject-3c527.firebaseapp.com

まとめ

これで、ブラウザで二つのページを開いてみると一方の変更がもう一方にも反映されるのがわかります。

firebaseでリアルタイムデータベースを作ってみました。 pic.twitter.com/tMTn1nGPKr

— プログラミング素人 (@s51517765) May 26, 2019

s51517765.firebaseapp.com

コンソールの基本操作

firebaseコンソールで必要な最低限のコマンドをまとめておきます。

$ cd *** フォルダ移動
$ cd .. 一つ上のフォルダ
$ mkdir *** フォルダ作成
$ help xxx コマンドのマニュアル

参考

qiita.com
qiita.com
www.topgate.co.jp
qiita.com