firebase functions + Hosting + vue のメモ

前も下記にメモりましたが、やるたびに忘れるのでメモります。

https://blog.logicky.com/2019/01/06/021305 — blog.logicky.com

Hosting, Functions

$ firebase init

下記でプロジェクトを切り替えられます。切り替えられるプロジェクトは.firebasercに書いてあります。firebase use —add的なもので追加できます。直接書いてもOKです。

$ firebase use dev

切り替えたプロジェクトに対してデプロイできます。

$ firebase deploy --only hosting
$ firebase deploy --only functions

vue-cliでの環境切り替え

Firebaseの開発環境・本番環境の切り替えは、vue cliの場合、下記が使えます。

.env.development
.env.production

yarn serve すると、.env.developmentが使われます。 yarn buildすると、.env.productionが使われます。中身は例えば下記のようになります。

VUE_APP_VERSION = "0.1.0"
VUE_APP_FB_API_KEY = "AAI*************************AhubyA"
VUE_APP_FB_AUTH_DOMAIN = "*****.firebaseapp.com"
VUE_APP_FB_DATABASE_URL = ""
VUE_APP_FB_PROJECT_ID = "*******"
VUE_APP_FB_STORAGE_BUCKET = ""
VUE_APP_FB_MESSAGING_SENDER_ID = ""
VUE_APP_STRIPE_PUBLIC_KEY = "********"

VUE_APPをつける必要があります。例えば、下記のように呼び出せます。

import firebase from 'firebase/app'
import 'firebase/firestore'
import 'firebase/storage'
import 'firebase/auth'
import 'firebase/functions'

const config = {
  apiKey: process.env.VUE_APP_FB_API_KEY,
  authDomain: process.env.VUE_APP_FB_AUTH_DOMAIN,
  databaseURL: process.env.VUE_APP_FB_DATABASE_URL,
  projectId: process.env.VUE_APP_FB_PROJECT_ID,
  storageBucket: process.env.VUE_APP_FB_STORAGE_BUCKET,
  messagingSenderId: process.env.VUE_APP_FB_MESSAGING_SENDER_ID
}
firebase.initializeApp(config)
export const db = firebase.firestore()
export const storage = firebase.storage()
export const auth = firebase.auth
export const functions = firebase.functions()

Functions + Hosting利用の際の注意点

Functionsのリージョンは、東京に設定できますが、Hosting に接続されている関数は us-central1 に配置する必要があります。。

Functionsの環境設定

下記のようにすると設定できます。 json形式なら入れられるので、jsonファイルを2番目のように読み込むことができます。

firebase functions:config:set hoge="hoge"
firebase functions:config:set hoge="$(cat functions_const.json)"

jsonファイルは例えば下記のような感じです。

{
  "mailgun": {
    "api_key": "key-2*************************",
    "domain": "mg.******.com",
    "from_address": "****@*****.com",
    "admin_address": "****@*****.com"
  }
}

下記のように利用できます。

const functions = require('firebase-functions');
const apiKey = functions.config().const.mailgun.api_key;
const domain = functions.config().const.mailgun.domain;
const mailgun = require('mailgun-js')({apiKey: apiKey, domain: domain, timeout: 10000});

exports.contactform = functions.https.onCall((data, context) => {
  try {
    return new Promise (resolve => {
      const sendData = {
        from: functions.config().const.mailgun.from_address,
        to: data.email,
        subject: 'お問合わせありがとうございます',
        text: createMessage(data)
      };
      mailgun.messages().send(sendData, (error, body) => {
        if (error) {
          console.log(error);
          return resolve({success: false, message: ''});
        } else {
          return resolve({success: true, message: ''});
        }
      });
    });
  } catch (err) {
    console.log(err);
    return {success: false, message: ''};
  }
});