Firebaseを使ってみる

サーバー側の処理実装なしで、アプリやWebサイトが作れるmBaaSというものがあるとの
ことだったので、どれくらいサクッと作れるか、試して見たいと思います。

# Firebaseとは？

- Googleが運営しているBaaS
- BaaSとは「Backend as a Service」の略。スマホ、Web向けにバックエンド機能を提供するサービス
- 初期設定は無料プラン(Spark)、プラン変更しないと課金されないから安心
- [料金プラン](https://firebase.google.com/pricing/?hl=ja)、[Firebase のガイド](https://firebase.google.com/docs/guides/)

# 環境
Mac OX High Seirra

# 事前準備

FirebaseでWebサイト用のプロジェクト作成する。
https://console.firebase.google.com/-

## Node.jsとnpmをインストール

nodeのwebページでnodeをDLして、インストール(今回は推奨版の方を入れました)
https://nodejs.org/ja/

```bash
% node -v                                                                                                    [20:12:47]
v10.16.3
```

npmもインストール

```bash
% sudo npm install -g npm
% npm -v                                                                                                     [20:15:47]
6.11.3
```

# Firebase webサイト機能を初期設定

firebase-toolsのインストールを行い、firebaseにログイン。

```bash
% sudo npm install -g firebase-tools
% firebase login
・・・
? Allow Firebase to collect CLI usage and error reporting information? Yes
i  To change your data collection preference at any time, run `firebase logout` and log in again.
・・・
Waiting for authentication...

✔  Success! Logged in as <your_mailaddress>
```

![スクリーンショット 2019-09-24 21.11.12.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/84228/008f4d98-5f09-02e7-43a0-2c50667115e8.png)

Firebaseの初期設定を行います。
今回は、Webサイトを作成するのでウェブ コンテンツを配信できるHostingサービスを選択。  

jsonとかpublicディレクトリなどは、デフォのまま、Enter

```bash
% firebase init                                                                                              [20:48:13]

     ######## #### ########  ######## ########     ###     ######  ########
     ##        ##  ##     ## ##       ##     ##  ##   ##  ##       ##
     ######    ##  ########  ######   ########  #########  ######  ######
     ##        ##  ##    ##  ##       ##     ## ##     ##       ## ##
     ##       #### ##     ## ######## ########  ##     ##  ######  ########
・・・
? Which Firebase CLI features do you want to set up for this folder? Press Space to select features, then Enter to confi
rm your choices. Hosting: Configure and deploy Firebase Hosting sites
・・・
? Please select an option: Use an existing project
? Select a default Firebase project for this directory: myfirepro-eecae (myFirePro)
i  Using project myfirepro-eecae (myFirePro)

=== Hosting Setup
・・・
? What do you want to use as your public directory? public
? Configure as a single-page app (rewrite all urls to /index.html)? No
・・・
✔  Firebase initialization complete!
```

firebase initを実行した直下に、`firebase.json`や`public`ディレクトリが出力される

# ローカルでサーバー起動
http://localhost:5000にアクセスすると、画面が確認できる。
```

% firebase serve
i  hosting: Serving hosting files from: public
✔  hosting: Local server: http://localhost:5000
・・・
```

# webサイトをFirebaseにデプロイ

以下コマンドで、デプロイできます。簡単ですね。

```bash
% firebase deploy
・・・
✔  Deploy complete!
Project Console: https://console.firebase.google.com/project/*****/overview
Hosting URL: https://*****.firebaseapp.com
```

これで、もう、サイトが公開されています。

![スクリーンショット 2019-09-27 20.26.10.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/84228/bfa831ae-939e-3e99-c0bd-0cbd2bd41c68.png)

JsのみでFirebaseのサービスを操作する感じですね。
他に「Firebase Realtime Database」も以下の記事で試しました。

[Firebase Realtime Databaseを使って3分でチャットを開発する方法](https://tomokazu-kozuma.com/develop-chat-with-firebase-realtime-database/)

非同期で保存できますが、NoSQLなので、DB設計の扱いを考えないといけないですね。
何か作りたいものが出てきたら、また触ってみようと思います。

# 参考URL
- [FirebaseでWebサイトを無料でサクッと公開してみる](https://qiita.com/Ijoru/items/5b27f1c32df2222514fb)
- [Firebaseをwebで使う(Hosting, Authentication, Realtime Database, Storage)](https://www.sambaiz.net/article/94/)