CloudFunctionsにHTTPリクエストで動作させるための手順をまとめます。

環境はmacとなります。

0.事前準備

以下のコマンドで事前に必要なものをインストールします。

Node.jsのバージョン管理用のツールnvmをインストール

brew install nvm

実行するとgccが不足すると言われることがあるので、エラーが出た場合は以下のコマンドを実行する。

brew install gcc

さらにgccのインストールする際にXcode CLTが無いまたはバージョンが古いと言われる場合があるので、その際には以下のコマンドでインストールする

xcode-select --install

1.node.jsのインストール

推奨バージョンのnode.jsのインストールを行う(2020/2/8現在8.15.0 が元になっているとなっている)

以下のコマンドを実行する

nvm install v8.15.0

2.npmでFireBase-Toolをインストールする

npm install -g firebase-tools

3.firebase-toolsからログインを行う

firebase login

実行するとブラウザが立ち上がりGMailのログインが求められます。メールアドレスとパスワードでログインするとダッシュボードが開きます。

4.プロジェクトの作成

他のページではここからコンソールでプロジェクトを作成する手順が書かれていましたが、私の環境ではエラーが発生し正常に終了できなかった。
(何も無いディレクトリで実行したのに既にコンテンツがあると言われた。何故だ?)

なのでブラウザでプロジェクトを作成します。

4.1 ブラウザの左メニューからFunctionsを選択

4.2 プルダウンからプロジェクトの作成を選択

4.3 プロジェクト名を入力

4.4 Googleアナリティクス連携の設定(設定しなくても作成できる)
設定するとGAで見れるらしいが、今回は省略します。
いずれ解析した結果とか見て見たい(何が見れるかわからないけど)

4.5 1分ぐらいでプロジェクトは作成される

5.ローカル環境を構築

macの中に編集するためのディレクトリを作成します

6.作成ずみのプロジェクトをローカルにも展開する

以下のコマンドを実行する

firebase init

実行すると以下のような選択肢が出てきます。

◯ 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

ここからFunctionsを選択する

Use an existing project
Create a new project
Add Firebase to an existing Google Cloud Platform project
Don’t set up a default project

選択すると4つの選択肢が出てくるのでここから「Use an existing project」を選択
(最初はCreate a new projectを実行しようとするとエラーとなりました)

ここに既に作成ずみのプロジェクトが一覧で出てくるので、作成ずみのプロジェクトを選択する。

さらに使用する言語が純粋なJavascriptとTypeScriptから選びます。

Javascriptを選ぶとそのまま作成されます。TypeScriptを選ぶと必要なモジュールがダウンロードされて作成されます。

7.HolloWorldの表示

[Javascriptの場合]

作成されたファイルの中にindex.jsがあります。そのままでは何も動きませんが、サンプルが書かれています。
なのでコメントアウトさえ外せば動きます。
外すのはこの下の部分です。

exports.helloWorld = functions.https.onRequest((request, response) => {
  response.send("Hello from Firebase!");
 });

このhelloWorldは関数名となります。

[TypeScriptの場合]

TypeScriptの場合も同じようにファイルの編集なります。ファイル名はindex.tsです。
コードはJavascriptと同じです。

8.デプロイ

最後にデプロイです。以下のコマンドを5で作成したディレクトリで実行する。

firebase deploy

1分程度でデプロイが完了します。「Deploy complete!」と表示されます。

ブラウザでみるとプロジェクトにholloWorldの行が表示されています。

そこにURLが表示されているのでそのURLを実行してみるとHello from Firebase!と表示されると正しくデプロイされた状態です。(HTTPリクエストで動作したことになります)

 

スクリーンショット 2020-02-08 20.36.09

参考にさせていただいたページは以下の通りです。

0からFirebase Cloud FunctionsとNode.jsとTypeScriptとVSCode開発環境の構築

Mac Homebrewでgccのインストールに時間がかかる場合はXcode Command Line Tool (CLT)をインストールしておけば良い


コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です