試した環境
- MacOS:10.14.2(Mojave)
- node:v10.10.0
- npm:6.8.0
- express:4.16.0
- firebase:6.4.0
- firebase tools:7.0.2
修正履歴
- 2019.8.3 firebase tools7.2.2ではpublicがなくなり、firebase-functions-testをインストールしろとの警告がなくなったので、削除
- 2019.9.30 firebase tools7.4.0ではpublicが復活、firebase-functions-testをインストールしろとの警告が再度表示されるようになったので、記載を復活
- 2019.10.26 firebase tools7.6.1では、firebase-functions-testをインストールしろとの警告がなくなったので、削除
- 2020.4.19 package.jsonのコピペする箇所がわかりにくいので、該当箇所を示すように修正
- 2020.5.2 node8が使えるようになったため、enginesを追加するように修正
手順
0.firebase toolsをインストールしておく
$ npm install -g firebase-tools
1.適当なディレクトリを作成し、firebase initしてfirebaseプロジェクトを作成
$ firebase init
2.スペースバーでfunctionsとhostingを選択し、Enter
3.Select a default Firebase project for this directoryで、Firebaseプロジェクトを選択し、そのあとの質問は全てEnter
4.一旦、以下のコマンドでローカルサーバを起動
$ firebase serve --only functions,hosting
5.localhost:5000にアクセスして以下の画面が表示されるか動作確認する。
6.確認できたら、一度Control+cで止める。
7.ディレクトリ内のfunctions内にある、pacakage.jsonの名前をpackage_bak.jsonに変更
-ファイル名はなんでもいいです。次のexpressインストール時に上書きされてしまうので、バックアップを取っておく。
8.Functionsディレクトリ内で、次のコマンドでExpressをインストールする
$ npm install express --save
9.次のコマンドでexpress-generatorを使ってejsをインストールする
$ express --view=ejs
destination is not empty, continue? [y/N]
と聞かれたら、yを入力しEnter
-express-generatorをまだインストールしていない場合
$ npm install express-generator -g
$ express --view=ejs
10.packages.jsonを開き、先ほど取っておいたpackages.jsonのバックアップのscriptsとdependenciesのfirebase関連のものをコピーして新しくできたpackages.jsonにペーストする
(2020.5.2追加)node8が使えるようになったため、enginesもコピペしておく。
"scripts": {
"serve": "firebase serve --only functions",//ここをコピペ
"shell": "firebase functions:shell",//ここをコピペ
"start": "npm run shell",//ここをコピペ
"deploy": "firebase deploy --only functions",//ここをコピペ
"logs": "firebase functions:log"//ここをコピペ
},
"engines": {//ここをコピペ
"node": "8"//ここをコピペ
},//ここをコピペ
"dependencies": {
"cookie-parser": "~1.4.3",
"debug": "~2.6.9",
"ejs": "~2.5.7",
"express": "~4.16.0",
"http-errors": "~1.6.2",
"morgan": "~1.9.0",
"firebase-admin": "~7.0.0", //ここをコピペ
"firebase-functions": "^2.2.0"//ここをコピペ
}
この際scriptsの"start": "node ./bin/www"は削除
11.functions内のindex.jsにapp.jsをまるごとコピペして、app.jsを削除
12.index.jsの1行目に以下を記載
var functions = require('firebase-functions');
13.index.jsの最終行をコメントアウトまたは削除して、以下に変更
// module.exports = app;から以下に変更
exports.app = functions.https.onRequest(app);
14.cd ../で1階層上に戻り、firebase.jsonのpublicとignoreの間にrewritesを追加する
"rewrites": [{
"source": "/**",
"function": "app"
}],
15.functionsディレクトリに戻り、npm installする
$cd functions
$npm install
16.次にfirebaseでは動的コンテンツよりも静的コンテンツが優先されるため、静的コンテンツのファイルを削除しておく必要があります。静的ファイルはpublicフォルダに保存されているのでこれを削除(2019.9.30復活)
$ cd ../
$ rm -rf public/*
→firebase tools 7.2.2では、publicがなくなり、index.htmlだけになったので、プロジェクトフォルダ直下のindex.htmlを削除すればいい(2019.8.3)
→firebase tools 7.4.0では、publicが復活したので、以前同様publicフォルダ内の静的コンテンツを削除する必要があります(2019.9.30)
17.firebaseサーバを起動させて、以下の画面が出るかどうか確認する
$ firebase serve --only functions,hosting
18.functionsエミュレーターのfirebase-functions-testをインストールしろと言われるので、functionsディレクトリに移動して、以下のコマンドでインストール(2019.9.30復活)
$ npm install --save-dev firebase-functions-test
→firebase tools 7.2.2では不要になったようです。(2019.8.3)
→firebase tools 7.4.0では復活したので、インストールする必要があります。(2019.9.30)
→firebase tools 7.6.1では不要になったようです。(2019.10.26)
19.http://localhost:5000 にアクセスして動作確認して、以下の画面が表示されればOK
20.あとは、色々弄ってデプロイするだけです。
$ firebase deploy