前回は、作成したプロジェクトを FIrebase Hosting へデプロイしました。

今回は、Firebase Functions を使用します。

まずは、Firebase へアクセスし、プロジェクトの Functions を選択します。

image2

Functions を使用するには、無料プランではなくなるので、ご注意ください。

『プロジェクトをアップグレード』をクリックします。

とりあえず 100 円にしておいて、『続行』をクリックします。

image3

『購入』をクリックします。

image4

『始める』をクリックします。

image5

Firebase ツールをインストールしていなければ、ターミナルで npm install -g firebase-toolsを実行します。

『次へ』をクリックします。

ターミナルでプロジェクトのディレクトリへ移動し、firebase initを実行します。

どのサービスを使うかを聞かれるので、Functions、Hosting、 Emulators の項目にスペースキーを押して選択します。

image6

『Use an existing project』を選択します。

image7

プロジェクトの Firebase を選択ます。

image8

今回は、JavaScript を選択します。

image9

ESLint を有効にするかを聞かれるので、『N』を選択します。

image10

npm の依存関係をインストールするかを聞かれるので、『Y』を選択します。

image11

public directory は、React をビルドしている『build』にします。

image12

SPA にするかを聞かれるので、『y』を選択します。

image13

GitHub に自動でデプロイするか聞かれるので、『N』を選択します。

image14

index.html を上書きするか聞かれるので、『N』を選択します。

image15

どのエミュレータを使うか聞かれるので、Functions Emulator と Hosting Emulator をスペースキーを押して選択します。

image16

port は、そのまま選択します。

image17

エミュレータの UI は、『Y』を選択します。

image18

エミュレータをダウンロードするか聞かれるので、『y』を選択します。

image19

プロジェクトを見ると、functions フォルダが作成されていました。

image20

functions フォルダの index.js に移動します。

コメントアウトしているコードのコメントアウトを解除しましょう。

image21

ターミナルで、functions のディレクトリに移動し、npm run serveを実行します。

サーバーが立ち上がるので、ターミナルで表示されている以下の URL にアクセスすると、

image22

image23

ブラウザに表示されました。

ターミナルに戻って、デプロイしてみます。

サーバーを切断します。

ターミナルで、npm run deployを実行します。

デプロイ完了後、Firebase へアクセスします。

Functions を確認すると、

image24

プロジェクトで作成した関数が作成されていました。

次回は、Firebase Database からデータを取得する関数を Firebase Functions で作成し、ローカル環境サーバーで試します。

ブログ一覧