Firebase開発環境構築

久々に個人アプリを作ろうと思い、Firebaseの勉強がてら一から構築したのでその備忘録です。

Node.jsインストール

// Node.jsのバージョン管理にnodebrewを導入する
$ brew install nodebrew
$ echo "export PATH=$HOME/.nodebrew/current/bin:$PATH" >> ~/.bash_profile
$ source ~/.bash_profile
$ which nodebrew
/usr/local/bin/nodebrew
$ nodebrew setup
Fetching nodebrew...
Installed nodebrew in $HOME/.nodebrew

========================================
Export a path to nodebrew:

export PATH=$HOME/.nodebrew/current/bin:$PATH
========================================

// インストール可能なバージョンを確認
$ nodebrew ls-all
remote:
v0.0.1    v0.0.2    v0.0.3    v0.0.4    v0.0.5    v0.0.6 
...

$ nodebrew install-binary v8.17.0
Fetching: https://nodejs.org/dist/v8.17.0/node-v8.17.0-darwin-x64.tar.gz
######################################################################## 100.0%
Installed successfully

// インストール済みのnodeのリストを確認
$ nodebrew ls
v8.17.0
v10.18.0
v12.14.0

current: v10.18.0

$ nodebrew use v8.17.0
use v8.17.0

$ node -v
v8.17.0

FirebaseのNode.jsはv8をベースにしているとのことでしたので、今回はv8を入れて始めることにしました。

Node.js 10 ランタイムは現在ベータ版です。Node 8 に関数をデプロイするには firebase-tools 4.0.0 以降が必要です。安定していて async/await 構文がサポートされている Node 8 を使用することを強くおすすめします。

IDEインストール

今回開発に当たってIDEはVSCodeを使うことにします。非常に軽量ですが、機能も十分なので、簡単なシステム構築時に使っていました。
以下から安定板をインストール。
https://code.visualstudio.com/

日本語化したい場合はCommand + Shift + xでExtension追加画面から「Japanese Language Pack for Visual Studio Code」を検索し、インストール。

Firebaseインストール

まず予めFirebaseのWebコンソールにてプロジェクトを作成しておきます。
参考: https://www.sejuku.net/blog/86468

$ npm install firebase-functions@latest firebase-admin@latest --save
$ npm install -g firebase-tools
// プロジェクトを配置するディレクトリ作成
$ mkdir test
$ cd test

Firebaseのプロジェクト設定

$ firebase login
// WebブラウザのURLが表示されるので、それを踏んでWeb上からログインを完了させる。
$ firebase init

     ######## #### ########  ######## ########     ###     ######  ########
     ##        ##  ##     ## ##       ##     ##  ##   ##  ##       ##
     ######    ##  ########  ######   ########  #########  ######  ######
     ##        ##  ##    ##  ##       ##     ## ##     ##       ## ##
     ##       #### ##     ## ######## ########  ##     ##  ######  ########

? Which Firebase CLI features do you want to set up for this folder? Press Space to select features, the
n Enter to confirm your choices. 
 ◯ Database: Deploy Firebase Realtime Database Rules
 ◯ Firestore: Deploy rules and create indexes for Firestore
 ◉ Functions: Configure and deploy Cloud Functions
❯◉ Hosting: Configure and deploy Firebase Hosting sites
 ◯ Storage: Deploy Cloud Storage security rules
 ◯ Emulators: Set up local emulators for Firebase features
// 今回はホスティングとサーバ上でNode.jsを動かすためのが目的なので上記２つをチェック

? Please select an option:
❯ Use an existing project 
  Create a new project 
  Add Firebase to an existing Google Cloud Platform project 
  Don't set up a default project 
// すでにWebコンソール上にあるプロジェクトで始めるため「Use an existing project」を選択。

? Select a default Firebase project for this directory: (Use arrow keys)
❯ backend-test-218d8 (backend-test) 
...

? What language would you like to use to write Cloud Functions? 
  JavaScript 
❯ TypeScript 
// サーバーサイドで使う言語選択。

? Do you want to use TSLint to catch probable bugs and enforce style? (Y/n) y
// TSLintを使うかどうか。使った方がいいかと。

? Do you want to install dependencies with npm now? (Y/n) y
// 関連するNodeモジュールをインストールするか聞かれるのでYES。

? What do you want to use as your public directory? (public)
// 公開用のディレクトリを聞かれるが、特に変更がなければそのままEnter

? Configure as a single-page app (rewrite all urls to /index.html)?
// SPAの設定が聞かれますが、特に必要がなければそのままEnter(デフォルトNo)

✔  Firebase initialization complete!
// 完了。お疲れ様でした。

サーバを起動しHello Worldを表示する

VS Codeにて作ったプロジェクトを開き、functionsフォルダにある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!");
});

コメントアウトされている部分を解除します。(VS CodeのショートカットはCommand + /)
※ Command + Sで保存を忘れずに。
TypeScriptはトランスパイルといってtsファイルからjsファイルへの変換が必要です。
このトランスパイルとサーバの起動を同時に行うスクリプトがpackage.jsonにすでに用意されているので、それを実行します。

"scripts": {
    "lint": "tslint --project tsconfig.json",
    "build": "tsc",
    "serve": "npm run build && firebase serve --only functions",

$ pwd
/Users/hoge/Fuga/firebase/test/functions 
$ npm run serve

> functions@ serve /Users/hoge/Fuga/firebase/test/functions
> npm run build && firebase serve --only functions


> functions@ build /Users/hoge/Fuga/firebase/test2/functions
> tsc

✔  functions: Using node@8 from host.
✔  functions: Emulator started at http://localhost:5000
i  functions: Watching "/Users/hoge/Fuga/firebase/test/functions" for Cloud Functions...
✔  functions[helloWorld]: http function initialized (http://localhost:5000/backend-test-218d8/us-central1/helloWorld).

最後に出力されるURLにアクセスすれば、関数が実行されWeb上に「Hello from Firebase!」と出力されます。