久々に個人アプリを作ろうと思い、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!」と出力されます。