やわらかテック

興味のあること。業務を通して得られた発見。個人的に試してみたことをアウトプットしています🍵

【デプロイまでわずか10分】JaveScriptでcloud-functionのデプロイまでを体験した

何かサーバーレスたるものが流行ると聞く

サーバーレスって何やねん
APIなどがcallされた時に動き出して、処理が終了したらまたさよなら
常時サーバーが起動してない。呼ばれた時にパッと現れパッと消える インフラを作る必要なし。コード(関数)のみをデプロイするだけで良いと

僕はインフラの構築が一番苦手なので助かります
コード(関数)の記述に集中できるのでありがたい

CloudFunctionを使うまでの準備

今回はこちらの動画を参考に
Node.js(TypeScript)でサーバーサイドを記述しますが、正直TypeScriptの知識いらないです
Node.jsをちょろっとしか書いた事ないですが問題なく行けました

インストール

Node.jsのインストール
僕はmacを使っているのでbrewコマンドで一発です

> brew install node
> node -v
v10.9.0

その他環境でのインストールについてNode.jsのダウンロードページから
インストーラーをダウンロードして手順に沿ってインストールしていけば良いかと思います

Firebase CLIのインストール
Node.jsをインストールした際にnpmも共にインストールされています

 >  npm -v
6.4.1

npmがインストールされていることを確認した後に「firebase-tools」をインストールします
グローバルインストールしたいので -g というオプションをつけます

> npm install -g firebase-tools

この時点でローカルでの準備は終了です

firebaseにプロジェクトを追加
プランはspark(無料プラン)を選択してFirebaseのコンソールから
新規のプロジェクトを追加をクリックしてこんな感じに設定していきます

f:id:takamizawa46:20190415080809p:plain:w450
Firebaseの新規プロジェクト設定

ロケーションは適当に選んでますが無料プランなのでまぁいいでしょう
これでクラウドでの準備も整いました

Firebaseプロジェクト(ローカル)での作成

ローカルにプロジェクトを作成します Firebaseの認証が通るように、というかマナー的な感じで下記コマンドを叩きログインします

> firebase login

現時点でログインしていない場合はブラウザの新規タブが開きログインしましたで
ってな文言が表示されます

すでにログインされていた場合には

> firebase login
Already logged in as sample@gmail.com

と表示されます
ではログインもしたところで作業ディレクトリしてFirebaseのプロジェクトを開始します

> mkdir sample-functions
> cd sample-functions
> firebase init

と進めているとエラーが...

Error: HTTP Error: 401, Request had invalid authentication credentials. Expected OAuth 2 access token, login cookie or other valid authentication credential. See https://developers.google.com/identity/sign-in/web/devconsole-project.

401なので認証が通ってないっぽい。ログインしたはずなのに...
このコマンドで解消されました。再認証することを明示的に伝える必要があるのか

> firebase login --reauth

改めてfirebase initを叩く
矢印(移動)とspace(選択)とenter(決定)で目的を選択する

流れに沿って順に選択していく

? Which Firebase CLI features do you want to setup for this folder? Press Space to select features, then Enter to confirm your choices.
(どのプロジェクトをセットアップします?)
Functions: Configure and deploy Cloud Functions

? Select a default Firebase project for this directory:
(標準の設定を選択しますか?)
[don't setup a default project]

? 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? (Tslint(構文チェックライブラリ)を使用しますか?)
Yes

? Do you want to install dependencies with npm now?
(npmの依存関係をインストールしますか?)
Yes

これでプロジェクトの準備は完了です
標準でpackage.jsonにfirebase-adminのfirebase-functionsバージョンが記載されていますが
最新でない場合があるそうなので

> cd functions
> npm install firebase-admin firebase-functions

と叩き、確実に最新バージョンにしておきましょう

いよいよデプロイする(もうデプロイする)

index.ts(もしくはindex.js)にすでにサンプルのコードが用意されているのでこちらを使用します
リクエストを受け取ったら"Hello from Firebase!"を送信する超シンプルな関数です

import * as functions from 'firebase-functions';

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

これコードの準備は終了したので後はクラウドのプロジェクトにデプロイするのみです このコマンドを叩くだけです。あっさり

> firebase deploy
> firebase deploy --project projectID(Firebaseの設定に記載されている)

僕の場合、「--project projectID」がないとエラーになったので--projectを付与していますが
firebase deployでもデプロイは通るみたいです

 ❯  firebase deploy --project cloud-function-114514

=== Deploying to 'cloud-function-114514'...

i  deploying functions
Running command: npm --prefix "$RESOURCE_DIR" run lint
:
:
✔  Deploy complete!

Please note that it can take up to 30 seconds for your updated functions to propagate.
Project Console: https://console.firebase.google.com/project/cloud-function-114514/overview

わちゃわちゃとよしなにやって頂いてデプロイが無事に完了したようです
一番最後の行にURLが記載されており、今デプロイしたコードがAPI化されこのパスから確認することが可能です

対象パスに飛んでみると

Hello from Firebase!

と表示されているでしょう
エンドポイントまでを自動生成。マジで便利すぎる...
たった10分ばかしでAPIの作成からデプロイまでが終了しました
技術の進歩は恐ろしいですね

次の記事ではFirebaseのDatabaseを使ってもう少しレベルアップしたAPIの作成をやってみます