2020/05/13
Firebaseでデプロイしてみた。
プロジェクトの作成と設定
プロジェクトの作成
ブラウザから Firebase にログインし、プロジェクトを作成します。
ロケーションの設定
Firestoreなどを使うためにはロケーションの設定が必要になるので、 プロジェクトの設定からロケーションを設定します（東京の場合、asia-northeast1。参照: https://firebase.google.com/docs/projects/locations#location-r）。
データベース(Firestore)の作成
コンソール > Database > データベースの作成 からデータベースを作成します。 データベースは Cloud Firestore と Runtime Database の2種類から選択できます。 今回は Cloud Firestore で作成します。 最初はセキュリティルールをテストモードにします。
firebase-toolsのインストール (初めてfirebase-toolsを使う場合)
|
1 | npm install -g firebase-tools |
firebaseへログイン
|
1 | firebase login |
プロジェクトのディレクトリでfirebase初期化
|
1 | firebase init |
こちらを実行すると、対話式でオプションを設定していくことになります。
|
1 2 3 4 5 6 7 8 | ? Which Firebase CLI features do you want to set up for this folder? Press Space to select features, then Enter to confirm your choices. ○ Database ⦿ Firestore ⦿ Functions ⦿ Hosting ○ Storage ○ Emulators |
必要なものを選択します。 静的なファイルを扱うだけであれば Hosting だけでOK。
|
1 | ? What file should be used for Firestore Rules? firestore.rules |
そのままEnter
|
1 | ? File firestore.rules already exists. Do you want to overwrite it with the Firestore Rules from the Firebase Console? Yes |
そのままEnter
|
1 2 3 | ? What language would you like to use to write Cloud Functions? JavaScript > TypeScript |
オプションで Functions を選択した場合に、Functions の言語を JavaScript、TypeScriptから選べます。
|
1 | ? Do you want to use TSLint to catch probable bugs and enforce style? Yes |
オプションで Functions を選択した場合に、Lintを使うかどうか選択します。
|
1 | ? Do you want to install dependencies with npm now? Yes |
オプションで Functions を選択した場合に、Functions の npm モジュールをこのタイミングでインストールしておくかどうかを選択します。
|
1 | ? What do you want to use as your public directory? public |
デプロイしたいディレクトリ（フォルダ）を指定します。
|
1 | ? Configure as a single-page app (rewrite all urls to /index.html)? No |
SPA（シングルページアプリケーション）の場合は Yes を選択します。
Firebaseのデプロイ実行
|
1 | firebase deploy |
このとき、自分は以下のエラーに遭遇しました。
|
1 2 | sh: tsc: command not found sh: tslint: command not found |
? What language would you like to use to write Cloud Functions?
で TypeScript を選択し、
? Do you want to use TSLint to catch probable bugs and enforce style?
で Yes を選択した場合、グローバルで typescript と tslint がインストールされている必要があったみたいです。
そこで、
|
1 | sudo npm install -g typescript tslint |
を実行。
更にこの後、
|
1 2 3 | src/index.ts:1:28 - error TS2307: Cannot find module 'firebase-functions'. 1 import * as functions from 'firebase-functions'; |
というエラーにも遭遇。 Functionsを有効にしていたにもかかわらず、 利用していなかったために起こっていたエラーでした。 そこで、 functions/src/index.ts の1行目をコメントアウト。
functions/src/index.ts
|
1 | // import * as functions from 'firebase-functions'; |
これでようやくFirebaseのデプロイ成功。
無事アップが確認できました。
Author Profile
SHARE
