Firebaseで’Hello world’

# はじめに
どうにかしてタダで簡単なWebアプリを公開できないかと探していたらFirebaseというものを見つけたのでHello worldのデプロイまで試してみた。

※追記:現状無料枠で外部APIを叩くのは無理っぽいです。。
叩くと「請求先アカウントが紐付いてないです。(billing account ～～)」みたいなエラーが出ます。。



# firebaseとは
[https://www.topgate.co.jp/firebase01-what-is-firebase](https://www.topgate.co.jp/firebase01-what-is-firebase)
>Firebase は Google が提供しているモバイルおよび Web アプリケーションのバックエンドサービスです。クラウドサービスの形態では BaaS に位置付けされます。 Firebase を使うことで、開発者はアプリケーションの開発に専念でき、バックエンドで動くサービスを作成する必要も管理する必要もありません。

mBaaS⇒mobile Backend as a Service
「バックエンドで動くサービスを作成する必要も管理する必要もありません。」
⇒とてもよさそうですね。

# firebaseプロジェクトを作成
firebaseに[アカウント作成](https://firebase.google.com)後、[コンソール画面](https://console.firebase.google.com/?hl=ja)からプロジェクトを追加する。
プロジェクト名は適当でOK。
日本なのでCloud firestoreのロケーションはasia-northeast1がよさそう。


# Node.jsのインストール
まずはNode.jsをインストールする。
以下からインストーラをダウンロードしてすべてデフォルトでインストール。
[https://nodejs.org/ja/](https://nodejs.org/ja/)

Node.jsインストールでnpmもインストールされる。

## npmとは
https://techacademy.jp/magazine/16105
>npmの正式名称は、Node Package Managerです。
npmの正式名称からも解るように、Node.jsのパッケージ（Package ）を管理する（Manager）ツールです。
Node.jsのパッケージ（Package）とは、予め用意された便利な機能をまとめたものです。

Node.jsで使用するパッケージを管理するコマンドラインツールのようですね。

# firebase-toolsのインストール

```
C:\xxx\xxx> npm install -g firebase-tools
いろいろ出る
C:\xxx\xxx> firebase --version
6.5.2
C:\xxx\xxx> 
```

# プロジェクト作成

```
C:\xxx\xxx> mkdir firecast
C:\xxx\xxx> cd firecast
C:\xxx\xxx> firebase login
C:\xxx\xxx> firebase init
C:\xxx\xxx> dir

2019/04/06  02:50    <DIR>          .
2019/04/06  02:50    <DIR>          ..
2019/04/06  02:50                52 .firebaserc
2019/04/06  02:50             1,144 .gitignore
2019/04/06  02:50               148 firebase.json
2019/04/06  02:49    <DIR>          functions
               3 個のファイル               1,344 バイト
               3 個のディレクトリ  453,780,201,472 バイトの空き領域
```

## firebase login
ブラウザが立ち上がるので指示に従ってログインする。

## firebase init
いくつか英語で質問されるのでスペースキーで以下を選択してEnterを押下。

**どのfirebase CLI機能をこのフォルダにセットアップしたいですか？？**
⇒Functions　を選択。

**このフォルダに適用するデフォルトのfirebaseプロジェクトを選択してください。**
⇒作成したプロジェクトを選択。
まだプロジェクトを作成していない場合は[ここから](https://console.firebase.google.com/?hl=ja)プロジェクトを追加。

**Cloud functionsの記述にどの言語を使用したいですか？？**
⇒Typescript　を選択。

その他はデフォルトのままEnterでOK。

## index.tsのコメントアウトを外す
firebase initで作成されるindex.tsのコメントアウトをデプロイ確認用に外して以下の状態にする。

```ts:functions\src\index.ts
import * as functions from 'firebase-functions';

// Start writing Firebase Functions
// https://firebase.google.com/docs/functions/typescript

export const helloWorld = functions.https.onRequest((request, response) => {
 response.send("Hello from Firebase!");
});
```

# デプロイ
firebase deployでデプロイしてみる。

```
C:\xxx\xxx> firebase deploy

=== Deploying to 'xxx-xxxx'...

i  deploying functions
Running command: npm --prefix "$RESOURCE_DIR" run lint

> functions@ lint C:\xxx\xxxx\functions
> tslint --project tsconfig.json

Running command: npm --prefix "$RESOURCE_DIR" run build

> functions@ build C:\xxx\xxxx\functions
> tsc

+  functions: Finished running predeploy script.
i  functions: ensuring necessary APIs are enabled...
+  functions: all necessary APIs are enabled
i  functions: preparing functions directory for uploading...
i  functions: packaged functions (4.27 KB) for uploading
+  functions: functions folder uploaded successfully
i  functions: creating Node.js 6 function helloWorld(us-central1)...
+  functions[helloWorld(us-central1)]: Successful create operation.
Function URL (helloWorld): https://us-central1-xxx-xxxx.cloudfunctions.net/helloWorld

+  Deploy complete!

Please note that it can take up to 30 seconds for your updated functions to propagate.
Project Console: https://console.firebase.google.com/project/xxx-xxxx/overview


   ╭───────────────────────────────────────────╮
   │                                           │
   │      Update available 6.5.2 → 6.5.3       │
   │   Run npm i -g firebase-tools to update   │
   │                                           │
   ╰───────────────────────────────────────────╯
```

デプロイしたら、たまたまnpmをアップデートできるよ！と出たのでアップデートしてみる。

# アップデート

```
C:\xxx\xxx> npm i -g firebase-tools to update
```

ちなみに管理者権限でコマンドプロンプト開かないとエラーになります。↓

```
npm ERR! Error: EPERM: operation not permitted～
：
npm ERR! Please try running this command again as root/Administrator.
：
```

# アクセスしてみる
デプロイしたときのFunction URL でブラウザからアクセス。
以下が表示されてデプロイされたのが確認できる。
↓
Hello from Firebase!

# あとがき
つぎは実際に簡単なアプリを作ってみます。
ちなみにNode.js、TypeScript共にお初です。

# 参考
[Node.js / npmをインストールする（for Windows）](https://qiita.com/taiponrock/items/9001ae194571feb63a5e)