プログラミング素人のはてなブログ

プログラミングも電気回路も専門外の技術屋の末端が勉強したことや作品をアウトプットするブログ。コードに間違いなど見つけられたら、気軽にコメントください。 C#、python3、ラズパイ始めました。

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

アプリの作成

プロジェクトを作成します。
f:id:s51517765:20190519180425p:plain

アプリを追加します。
f:id:s51517765:20190526130838p:plain
f:id:s51517765:20190526125141p:plain

スニペットといわれるAPIキーが発行されます。(APIキーは公開しないほうがいいのかな?)
f:id:s51517765:20190526125423p:plain

データベースルールを変更し、公開します。
Database>Realtime Databaseでreadwriteをtrueに書き換えます。
f:id:s51517765:20190526125929p:plain

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

$ 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はないかも)。
f:id:s51517765:20190519185002p:plainf:id:s51517765:20190519185012p:plain

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

まとめ

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

コンソールの基本操作

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

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

参考

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