はじめに
どうにかしてタダで簡単なWebアプリを公開できないかと探していたらFirebaseというものを見つけたのでHello worldのデプロイまで試してみた。
※追記:現状無料枠で外部APIを叩くのは無理っぽいです。。
叩くと「請求先アカウントが紐付いてないです。(billing account ～～)」みたいなエラーが出ます。。
firebaseとは
https://www.topgate.co.jp/firebase01-what-is-firebase
Firebase は Google が提供しているモバイルおよび Web アプリケーションのバックエンドサービスです。クラウドサービスの形態では BaaS に位置付けされます。 Firebase を使うことで、開発者はアプリケーションの開発に専念でき、バックエンドで動くサービスを作成する必要も管理する必要もありません。
mBaaS⇒mobile Backend as a Service
「バックエンドで動くサービスを作成する必要も管理する必要もありません。」
⇒とてもよさそうですね。
firebaseプロジェクトを作成
firebaseにアカウント作成後、コンソール画面からプロジェクトを追加する。
プロジェクト名は適当でOK。
日本なのでCloud firestoreのロケーションはasia-northeast1がよさそう。
Node.jsのインストール
まずはNode.jsをインストールする。
以下からインストーラをダウンロードしてすべてデフォルトでインストール。
https://nodejs.org/ja/
Node.jsインストールでnpmもインストールされる。
npmとは
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プロジェクトを選択してください。
⇒作成したプロジェクトを選択。
まだプロジェクトを作成していない場合はここからプロジェクトを追加。
Cloud functionsの記述にどの言語を使用したいですか？？
⇒Typescript を選択。
その他はデフォルトのままEnterでOK。
index.tsのコメントアウトを外す
firebase initで作成される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共にお初です。