Firebase入門　Cloud Functionsでメール送信(SendGrid)

エンジニア向けのサービスならSlackなどの通知で問題ないのですが、一般人向けだとやっぱりメールで通知する必要があります。(理想はLINE) サービスでは欠かせない問い合わせ機能を作るためにメール送信の機能を調べました。

最初はGoogleのメールで対応しようと思ったのですが、ローカルのエミュレータからのメール送信がGoogle認証(Oauth)の部分でうまくいかず諦めてしましました。

失敗したパターンは

NodeMailrでメール送信(from:gmail)
gmail-nodeでメール送信(from:gmail)

です。

問い合わせメールは月に1万も発生しないと思うのでメール配信サービスの「SendGrid」を使う事にしました

この記事はReact Firebase入門シリーズです

よかったら他の記事も見てください。

やりたい事
事前作業
プログラム
感想
参考URL

やりたい事

メール送信

事前作業

メール送信には「SendGrid」というサービスを使って配信します。配信にはAPIキーが必要なので取得したいと思います。

SendGridとは

メール送信APIです
SendGridのメール送信APIを使って、数分でシステム連携。メール送信のノウハウが集約されたセキュアなインフラは高い到達率や配信状況が見える

プラン	値段	通数上限値	上限超過時
無料	0円	12000通/月	-
40K	1,900円	40,000通/月	0.125円/月
100K	3,800円	100,000通/月	0.094円/月
100K_Pro	10,000円	100,000通/月	0.106円/月
300K_Pro	25,000円	300,000通/月	0.065円/月
700K_Pro	50,000円	700,000通/月	0.056円/月
1.5M_Pro	87,500円	1,500,000通/月	0.056円/月
1.5M_Pro	119,000円	2,500,000通/月	0.056円/月

Proの特典

固定IPがもらえる
請求書払いができる
サブユーザーの作成ができる（サービス単位でやれるみたいなので大きくなったら必要だと思う）

無料でも独自ドメインの設定ができる所がいいと思います。

const sgMail = require('@sendgrid/mail')
sgMail.setApiKey(process.env.SENDGRID_API_KEY)
const msg = {
  to: 'test@example.com', // Change to your recipient
  from: 'test@example.com', // Change to your verified sender
  subject: 'Sending with SendGrid is Fun',
  text: 'and easy to do anywhere, even with Node.js',
  html: '<strong>and easy to do anywhere, even with Node.js</strong>',
}
sgMail
  .send(msg)
  .then(() => {
    console.log('Email sent')
  })
  .catch((error) => {
    console.error(error)
  })

なぜか公式のAPIのsourceはコピペできなかった。デベロッパーツールでclassを変更すればコピペできます

修正前

<div id="gistNNNNNN" class="gist">

修正後

<div id="gistNNNNNN" class="gxxxxist">

SendGridの登録

サイトにアクセスする
- 日本版
  sendgrid.kke.co.jp
- 本家
  sendgrid.com
  私は本家でやったみたいです
新規登録のボタンを押す
アカウント情報を入力
確認メールが届く
確認後にSMS認証する

すいません、画面キャプチャーをとっていませんでした

私だけかも知れないのですが、検索からいくログインページだとログインできず・・・
https://sendgrid.kke.co.jp/app?p=login.index

appの部分のログインだとうまくいくという不思議な状況・・・
https://app.sendgrid.com/login?redirect_to=%2F

APIキーの発行

管理画面にアクセスする
https://app.sendgrid.com/
メニューの「Settings」→「API Keys」とアクセスする
「Create API Key」のボタンを押す
「API Key Name」に適当な名前をいれる
アクセス許可をFull Accessを選択する
作成後にキーが表示される（１回しか発行されないみたいなので必ずコピーする）

送信者認証の登録

必須というはわけではないのですが、私みたいにFromのアドレスが「masalib@gmail.com」なのに「SendGrid」で送る場合など送信ドメインと送信の表示アドレスが違う場合には登録した方がいいです。（ドメインのDNS設定にアクセスできない場合）
ドメイン認証と違って１つのアドレス単位で登録しないといけません。

管理画面にアクセスする
https://app.sendgrid.com/
メニューの「Settings」→「Sender Authentication」とアクセスする
「Verify a Single Sender」のボタンを押す
「Create New Sender」のボタンを押す
フォームの内容を入力する
認証がうまくいくとリストで認証になります

できていないけど本番では必要な事

ドメイン登録（SPFレコードの追加）

サービスとして使う場合はサービスのドメインがあると思います。そのドメインを「SendGrid」に登録した方がいいです。必須ではないのですが、迷惑メールフォルダにいかないようにするためにできる事はやった方がいいです。

プログラム

モジュールのインストール

SendGridが提供してくれているモジュールをインストールします

$ cd funcions
$ npm install @sendgrid/mail

環境変数の設定

githubで公開している関係でAPIキーをsourceに直接記載するわけにはいかないので登録します

$ cd Project_homeFolder
$ firebase functions:config:set sendgrid_service.key="XXXXXXXXXXXXAPIkeyXXXXXXXXXXXX"
$ firebase functions:config:set sendgrid_service.email="masalib@gmail.com"
$ firebase functions:config:set sendgrid_service.name="learn-firebase-masalib"
$ firebase deploy --only functions

エミュレータで環境変数を設定する

$ cd ProjectのhomeFolder
$ cd functions
$ firebase functions:config:get > .runtimeconfig.json

以下のようなファイルができていると思います

{
  "sendgrid_service": {
    "email": "masalib@gmail.com",
    "key": "XXXXXXXXXXXXAPIkeyXXXXXXXXXXXX",
    "name": "learn-firebase-masalib"
  }
}

runtimeconfig.jsonをgithubにアップしないようにするために無視リストに追加します

# firebase emulator .env
.runtimeconfig.json

プログラムの修正

前回と同じで/funcions/index.jsを修正します。プログラムは至ってシンプルです

const sendgrid  = require('@sendgrid/mail')
exports.sendMail = functions.https.onRequest(async (request, response) => {
    functions.logger.info("sendMail start");

    const apiKey = functions.config().sendgrid_service.key;
    const fromEmail = functions.config().sendgrid_service.email;
    const fromName = functions.config().sendgrid_service.name;

    sendgrid.setApiKey(apiKey);
    const msg = {
        to: "m-hirano@mediaseek.co.jp",
        from: `${fromName} <${fromEmail}>`,
        subject: `【${fromName}】問い合わせ受理メール`,
        text: `XXXX様
問い合わせありがとうございます。担当者が確認して返信したいと思いますので
少々お待ち下さい。

このメールには返信できません。`
    };

    sendgrid.send(msg).then((result )=>{
        functions.logger.info("sendMail success");
        response.send("sendMail success");
        return console.log("Successfully sent message:", result);
    })
    .catch((error)=>{
        functions.logger.error("sendMail error");
        functions.logger.error(error);
        response.send("sendMail error");
        return console.log("Error sending message:", error);
    })
    //return;
})