Help us understand the problem. What is going on with this article?

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

福岡から世界中の"むずかしい"を簡単にする株式会社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とは

51b03178ac54a85f.png

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!"が表示されます。
スクリーンショット 2019-11-29 23.50.41.png
サーバーの構築もなく、コーディングもほぼなくて、ここまで本当に簡単です。

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>

functions.httpsCallable([関数名])で、APIを関数として取得し、呼び出すことができます。
関数の引数に値を入れることで、リクエストのパラメータもとして渡せます。
戻り値には、API側でreturnした結果がresponseとして帰ってきます。

5.Nuxt.jsを起動して、http://localhost:3000/hello を開きます。
スクリーンショット 2019-11-30 0.53.42.png

これだけのコードでHTTPリクエスト、レスポンスの処理ができ、認証したアカウントの情報が取れました!

CloudFunctionsにデプロイ

1.フロントエンドをジェネレートします。

$ yarn generate:prod

2.firebase.jsonがあるディレクトリで、デプロイコマンドを実行してデプロイします。

$ firebase deploy

3.デプロイが完了し、FirebaseHositingのURLで、FIrebaseCloudFunctionsに接続ができます。

4.firebaseのコンソール画面からfunctionsの管理画面を開くと、functionsのデプロイも確認できます。
スクリーンショット 2019-11-30 12.22.27.png

CloudFunctionsの入門編は以上です。
次回はCloudFunctionsからCloudSQLのMySQLにアクセスする手順について解説します!

最後に

この記事は「Nuxt.jsとFirebaseとCloudFunctionsでWebアプリ開発」シリーズとして、連載していきます。
続きはアドベントカレンダー「diffeasyCTO西の24(にし)日連続投稿チャレンジ Advent Calendar 2019」に掲載していきます。

Nuxt.jsとFirebaseなどを使ってWebアプリケーション開発にチャレンジしたい方、是非Qiitaアカウントかtwitterをフォローしていただき、ツッコミやいいね!お願いします!

#advent_24のハッシュタグでフィードバックいただけると嬉しいです!

_takeshi_24
株式会社OneSmallStepの代表取締役CTOです。 FLAPTALKという共感で繋がる(けどなかなか繋がらない)マッチングプラットフォームを運営しています。 https://flaptalk.app
https://flaptalk.app
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away