▶▶▶ 【最大補助3/4】
IT導入補助金特別枠(C類型)を使って越境ECサイトを構築しませんか?

LaunchCartな日々

LaunchCartとともに歩む日々を綴った
ブログです

Firebaseでデプロイしてみた。

テクニック

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を使う場合)

firebaseへログイン

プロジェクトのディレクトリでfirebase初期化

こちらを実行すると、対話式でオプションを設定していくことになります。

必要なものを選択します。 静的なファイルを扱うだけであれば Hosting だけでOK。

そのままEnter

そのままEnter

オプションで Functions を選択した場合に、Functions の言語を JavaScript、TypeScriptから選べます。

オプションで Functions を選択した場合に、Lintを使うかどうか選択します。

オプションで Functions を選択した場合に、Functions の npm モジュールをこのタイミングでインストールしておくかどうかを選択します。

デプロイしたいディレクトリ(フォルダ)を指定します。

SPA(シングルページアプリケーション)の場合は Yes を選択します。

Firebaseのデプロイ実行

このとき、自分は以下のエラーに遭遇しました。

? 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 がインストールされている必要があったみたいです。

そこで、

を実行。
更にこの後、

というエラーにも遭遇。 Functionsを有効にしていたにもかかわらず、 利用していなかったために起こっていたエラーでした。 そこで、 functions/src/index.ts の1行目をコメントアウト。

functions/src/index.ts

これでようやくFirebaseのデプロイ成功。
無事アップが確認できました。

この記事を書いた人
Ninomiyaのアイコン

Ninomiya

Webデザイナー兼コーダーです。 イラストを描くのも好きです。 SVGとCanvasを使ったWEBアプリにも興味があります。 よろしくお願いいたします。

資料ダウンロード

送信いただいたメールアドレス宛に、資料のダウンロードURLを送付いたします。