LoginSignup
2
3

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 1 year has passed since last update.

@cslf-fh

Vue.jsでFirebase Functionsを使う

Posted at

と思ったときの個人用メモです。とりあえずFunctionsの動作を確かめたい場合の必要最低限です。Vue.jsのバージョンは2.xで事前にプロジェクトは作成済み、インストールするfirebaseのバージョンは9.xの体で書いています。

#開発環境

  • node.js : 14.18.3
  • vue-cli : 4.5.10
  • Firebase CLI : 9.16.5

#Firebaseプロジェクトの作成+α

  1. コンソールからプロジェクトの作成
  2. アプリを追加→ウェブからアプリを追加しSDKを取得
  3. Functionsを使うので、料金プランをBlazeに変更

#VueプロジェクトのFirebaseのセットアップ

Vue CLI UIが相も変わらず便利なので、こちらからfirebaseと後で行うHTTPリクエストに備えてaxiosをインストールします(fetchも併記しておくのでaxiosは必要に応じて)。そうでない場合はnpmなりyarnなりでインストールします。
インストールが終わったら、(必要であれば)ルートディレクトリに.env.localを、srcディレクトリ直下にpluginsディレクトリを作成しfirebase.jsを作成、それぞれ以下のようにします。

..env.local
VUE_APP_API_KEY="<MY-API-KEY>"
VUE_APP_AUTH_DOMAIN="<MY-AUTH-DOMAIN>"
VUE_APP_PROJECT_ID="<MY-PROJECT-ID>"
VUE_APP_STORAGE_BUCKET="<MY-STORAGE-BUCKET>"
VUE_APP_MESSAGING_SENDER_ID="<MY-MESSAGING_SENDER_ID>"
VUE_APP_APP_ID="<MY_APP_ID>"
src/plugins/firebase.js
import { initializeApp } from 'firebase/app';
import { getFirestore } from 'firebase/firestore';
import { getStorage } from 'firebase/storage';
import { getFunctions } from 'firebase/functions';
import { getAnalytics } from 'firebase/analytics';

const firebaseConfig = {
  apiKey: process.env.VUE_APP_API_KEY,
  authDomain: process.env.VUE_APP_AUTH_DOMAIN,
  projectId: process.env.VUE_APP_PROJECT_ID,
  storageBucket: process.env.VUE_APP_STORAGE_BUCKET,
  messagingSenderId: process.env.VUE_APP_MESSAGING_SENDER_ID,
  appId: process.env.VUE_APP_APP_ID,
  measurementId: process.env.VUE_APP_MEASUREMENT_ID,
};

const app = initializeApp(firebaseConfig);

const firestore = getFirestore(app);
const storage = getStorage(app);
const functions = getFunctions(app);
functions.region = 'asia-northeast1'; // regionの変更
const analytics = getAnalytics(app);

export { firestore, storage, functions, analytics };

今回はFunctionsしか使いませんが、折角なので一通り記述しておきました。Analyticsを使う場合はmain.jsに下記を追記。

src/main.js
import Vue from 'vue';
import App from './App.vue';
import { analytics } from './plugins/firebase'; // 追記

Vue.config.productionTip = false;

new Vue({
  analytics, // 追記
  render: (h) => h(App),
}).$mount('#app');

#Firebaseプロジェクトの初期化

を行います。Firebase CLIにまだログインしていない場合はfirebase loginでログインします。Functionsのセットアップをしましょう。

cd VUE-PROJECT
firebase init

... なんやかんや

初期化が終わったら、ルートディレクトリにfunctionsディレクトリが作成されているので、index.jsをコメントアウトしておきます。

#Functionsの動作確認

をしてみます。めっちゃ便利なエミュレータがあるので、こちらで動作確認をしてみましょう。

firebase emulators:start --only functions

そうしたらhelloWorldのエンドポイントが出てくるのでアクセスしてみましょう。http://localhost:5001/MY-PROJECT/us-central1/helloWorldみたいな感じになってると思います。Hello from Firebase !が確認できればおｋです。
確認出来たらレスポンスの内容を適当に書き換えてみましょう。もう一度アクセスすると変更されているはずです。これで開発が捗りますね！めっちゃ便利！

#Functionsの環境変数の設定

が必要であれば以下のように設定します。Functionsのエミュレータでも使用する場合は、.runtimeconfig.jsonを生成しましょう(上から順に、環境変数の設定、設定の確認、JSONファイルの生成)。

firebase functions:config:set <projectID>.<key>=<value>
firebase functions:config:get
firebase functions:config:get > .runtimeconfig.json

次いで設定した環境変数をFunctionsで使用する場合は以下を追記。

functions/index.js
const config = functions.config()
const env = config["projectID"]

env.keyにアクセスしてvalueが返ってくれば設定完了です。

#VueプロジェクトでFunctionsの動作確認

をします。index.jsを以下のようにします。とりあえず動作確認したいだけなのでCORS対応はめんｄあくまで動作確認なので、本番環境ではちゃんとしましょう。

functions/index.js
const functions = require('firebase-functions');

exports.helloWorld = functions
  .region('asia-northeast1')
  .https.onRequest((request, response) => {
    functions.logger.info('Hello logs!', { structuredData: true }); 
    response.set('Access-Control-Allow-Headers', '*');
    response.set('Access-Control-Allow-Origin', '*');
    response.set('Access-Control-Allow-Methods', 'GET, HEAD, OPTIONS, POST');
    response.send('Hello from Firebase !');
  });

exports.helloVue = functions
  .region('asia-northeast1')
  .https.onCall((data, context) => {
    const name = data.name;
    return `Hello ${name} from Vue !`;
  });

続いてVueのサンプルコードです。

App.vue
<template>
  <div id="app">
    <button @click="onRequest">on request</button>
    <p>{{ result.request }}</p>

    <input v-model="name" type="text" />
    <button @click="onCall">on call</button>
    <p>{{ result.call }}</p>
  </div>
</template>

<script>
import axios from 'axios';

import { functions } from '@/plugins/firebase';
import { httpsCallable, connectFunctionsEmulator } from 'firebase/functions';
// エミュレータを使用する
if (process.env.NODE_ENV === 'development') {
  connectFunctionsEmulator(functions, 'localhost', 5001);
}

export default {
  name: 'App',
  data: () => ({
    requestUrl: 'http://localhost:5001/MY-PROJECT/asia-northeast1/helloWorld', // HTTPリクエストのエンドポイント
    result: {
      request: '',
      call: '',
    },
    name: 'Taro',
  }),
  methods: {
    async onRequest() {
      const res = await axios.get(this.requestUrl);
      this.result.request = res.data;

      // fetch
      /*
      fetch(this.requestUrl)
        .then((res) => res.text())
        .then((data) => (this.result.request = data));
      */
    },

    async onCall() {
      const helloVue = httpsCallable(functions, 'helloVue');
      const data = await helloVue({ name: this.name });
      this.result.call = data.data;
    },
  },
};
</script>

ボタンを押して、無事レスポンスなり何なりが返ってくれば成功です！

#最後に

以下の記事を参考にさせていただきました。感謝！

[ドキュメント | Firebase - Google]
(https://firebase.google.com/docs?hl=ja)
[Firebase Javascript SDK v8→v9における進め方と注意事項]
(https://zenn.dev/mktu/articles/3905b13500ffb6)
[Firebase for Cloud Functionsで環境変数を使用する]
(https://zenn.dev/yonajs/articles/1318abb80680cd)

2
3
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
Sign upLogin
2
3

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?