More than 3 years have passed since last update.

Nuxt.jsとCloudFunctionsでサーバーレスアプリ開発入門編

Posted at 2019-12-06

福岡から世界中の"むずかしい"を簡単にする株式会社diffeasyCTOの西@_takeshi_24です。

この記事はアドベントカレンダー「diffeasyCTO西の24(にし)日連続投稿チャレンジ Advent Calendar 2019」の6日目の記事です。

この記事は「Nuxt.jsとFirebaseとCloudFunctionsでWebアプリ開発」シリーズとして、連載していきます。
Nuxt.jsとFirebaseなどを使ってWebアプリケーション開発にチャレンジしたい方、是非Qiitaアカウントかtwitterをフォローしていただき、ツッコミやいいね！お願いします！

はじめに

こちらの記事は、「Nuxt.jsとFirebaseとCloudFunctionsでWebアプリ開発」シリーズとして連載していますので、過去の記事もご覧ください。

##CloudFunctionsとは

CloudFunctionsとはGoogleが提供するイベントドリブンなサーバーレスコンピューティングプラットフォームです。
 サーバー構築不要で、HTTPリクエストなどのイベントをトリガーとして、サーバーレスで対応するバックエンドコードが実行されます。

サーバーレスなので、自動的にスケーリングされます。

常にサーバーが稼働しているわけではないので、コードを実行した時間分だけ課金されます。

その他詳細はこちらに解説があります。

##開発の準備
今回はNuxt.jsでフロントエンドを作成し、バックエンドをCloudFunctionsで開発します。
開発のための準備は以下の記事を参考にしてください。

##Node.jsでAPI開発
今回CloudFunctionsの開発はNode.jsで行います。
まずはローカルのCloudFunctionsのエミュレータでCloudFunctionsを起動して、Nuxt.jsのフロントエンドからAPIをコールしてみましょう！

1.エミュレーターを起動します

$ firebase emulators:start --only functions
✔  functions: Emulator started at http://localhost:5005
i  functions: Watching "/path/to/functions" for Cloud Functions...
✔  All emulators started, it is now safe to connect.

2.まずは、コメントになっている、helloWorldのコメントを外して、リージョンを東京(asia-northeast1)に設定するためのコードを追加します。

/functions/index.js

const functions = require("firebase-functions");
const https = functions.region("asia-northeast1").https;
const admin = require("firebase-admin");
admin.initializeApp();

// // Create and Deploy Your First Cloud Functions
// // https://firebase.google.com/docs/functions/write-firebase-functions
//
exports.helloWorld = https.onRequest((request, response) => {
  response.send("Hello from Firebase!");
});

3.保存するとエミュレーターでhelloWorldAPIが起動します。

✔  functions[helloWorld]: http function initialized (http://localhost:5005/sample-xxxxx/asia-northeast1/helloWorld).

4.表示されたURLにアクセスすると、"Hello from Firebase!"が表示されます。

サーバーの構築もなく、コーディングもほぼなくて、ここまで本当に簡単です。

##FirebaseAuthenticationで認証
HelloWorldは簡単に出ましたが、Webアプリケーションではログインは必須です。
CloudFunctionsでは、FirebaseAuthenticationでログインしたユーザーの認証情報も簡単に取得できます。

先ほどはonRequest関数でリクエストを受けましたが、今回はonCall関数を使います。
onCallを使うことで、フロントエンドのFirebaseSDKからAPI呼び出しが簡単にできるようになり、FirebaseAuthenticationでの認証情報の取得も容易です。

それでは早速サンプルコーディングを始めます。

1.先ほどのfunctions/index.htmlに以下の関数を追加します。

functions/index.html

exports.hello = https.onCall(async (data, context) => {
  return { message: `Hello, ${data.name}`, uid: context.auth.uid };
});

dataにはリクエストデータが入り、contextにはFirebaseAuthenticationの認証情報が自動でセットされます。

2.次に、フロントエンドを修正します。env.development.jsにリージョンの設定とエミュレーターのORIGINの設定を追加します。

/env.development.js

  FB_REGION: "asia-northeast1",
  EMULATOR_ORIGIN: "http://localhost:5005"

ポート番号などは、functionsを立ち上げたポートに合わせてください。

3./plugins/firebase.jsに以下の行を追加します。

/plugins/firebase.js

const firebaseFunctions = firebase.app().functions(process.env.FB_REGION);
if (process.env.EMULATOR_ORIGIN) {
  firebaseFunctions.emulatorOrigin = process.env.EMULATOR_ORIGIN;
}

export const functions = firebaseFunctions;

4.フロントのnuxt-sampleに新たに、/pages/hello/index.vueを以下の内容で作成します。

/pages/hello/index.vue

<template>
  <div>
    <p>{{ message }}</p>
    <p>{{ uid }}</p>
  </div>
</template>
<script>
import { functions } from "~/plugins/firebase";

export default {
  data() {
    return {
      message: "",
      uid: null
    };
  },
  mounted() {
    this.hello();
  },
  methods: {
    async hello() {
      const hello = functions.httpsCallable("hello");
      const result = await hello({ name: "takeshi" });
      this.message = result.data.message;
      this.uid = result.data.uid;
    }
  }
};
</script>