Zenn
🙄

sendgridとfirebase cloud functionsでメール作成

2021/12/16に公開
4件
Firebase
SendGrid
Vue 3
tech

メール送信の一例を投稿しました。
以下パターンを作成しました。
順番は簡単にできる順です。

  • httpリクエストよりメール受信
  • 問い合わせフォームからのメール受信
  • メール文をテンプレート化してメール受信
  • 自動返信

前提

環境

  • node
  • firebase v9 cloud functions
  • sendGrid
  • axios
  • vue3

準備

  • 環境構築は割愛
  • sendgridはログインできること
  • firebase cloud functionsはhttpリクエストが出来る状態であること

内容

httpリクエストよりメール受信

1.sendgridより、apiKey取得

  • ログイン後の画面から、Settings Api Key1をクリック
  • Create API Keyをクリック
  • Api Key Name入力して、Create&Viewをクリック
  • Api Keyをコピー（あとで使いますので、メモ等にて保存しといてください）

2.cloud functions用のコード

const functions = require("firebase-functions");
const sgMail = require('@sendgrid/mail')

exports.sendMail=functions.https.onRequest(async (req,res)=>{
 sgMail.setApiKey('*******************')　　//←sendgirdで生成したApi Key 
 
 res.set('Access-Control-Allow-Origin', '*');
 const msg = {
   to: '****@****.***',              //←受信したいメールアドレス
   from: req.query.mail, 
   subject: '問い合わせ',
   text: req.query.content,
   html: `<strong>${req.query.content}</strong>`, 
 }
 sgMail
   .send(msg)
   .then(() => {
     res.send('成功')
   })
   .catch((error) => {
     res.send('失敗',error)
   })
})

3.ブラウザから送信
cloud functionsで作成したリクエストhttps://～の後ろに、
?name=hibimosaku&mail=aaa@aaa.jp&content=testつけて送信
4.結果

問い合わせフォームからのメール受信

1.vueのソースコード

<template>
    名前<input type="text" v-model="name"><br>
    メール<input type="email" v-model="email"><br>
    内容<input type="text" v-model="content"><br>
  <button @click="submit">メール送信</button>
</template>
<script>
import { ref } from "vue";
import axios from "axios"
export default({
  setup() {
    const name=ref()
    const email=ref()
    const content=ref()

    const submit=()=>{
      axios({
        baseURL: "https://us-central1********",//←上で作成したfunctionsのURL  
        method: 'post',                    
        params:{
          name:name.value,
          mail:email.value,
          content:content.value
        }
      })
      .then(()=>{
        console.log('成功')
      })
      .catch((e)=>{
        console('失敗',e)
      })
    }
    return{
      name,
      email,
      content,
      submit
    }
  },
})
</script>

2.作成したフォームから送信

3.結果

メール文をテンプレート化してメール受信

1.sendgridでのテンプレート作成
1-1.Legacy Templatesをクリック

1-2.Create Templateをクリックして、nameを入力後、Add Versionをクリック

1-3.code Editorを選択して、Continueをクリック

1-4.以下コードを入力して、Save Templateをクリックして、「←」をクリック

<html>
<head>
</head>
<body>
{{name}}様より問い合わせがありました。。
<br /><br/>
<p>内容</p>
<p>{{content}}</p>
<br /><br/>

</body>
</html>

1-5. 作成後id取得（メモ等にコピーして保存）

2.cloud functions コード作成

const functions = require("firebase-functions");
const sgMail = require('@sendgrid/mail')

exports.sendMail=functions.https.onRequest(async (req,res)=>{
 sgMail.setApiKey('*******************')　　//←sendgirdで生成したApi Key
 sgMail.setSubstitutionWrappers('{{', '}}'); 
 
 res.set('Access-Control-Allow-Origin', '*');
 const msg = {
   to: '****@****.***',              //←受信したいメールアドレス
   from: req.query.mail, 
   subject: '問い合わせ',
   text: req.query.content,
   html: `<strong>${req.query.content}</strong>`, 
   template_id: '***************', //←1-5.で取得したid
    substitutions: {
      name: req.query.test,
    }, 
 }
 sgMail
   .send(msg)
   .then(() => {
     res.send('成功')
   })
   .catch((error) => {
     res.send('失敗',error)
   })
})

3.vueコード
「問い合わせフォームからのメール受信」と同じ
4.作成したフォームより送信

5.結果

自動返信

  1. sendgrid テンプレート作成
    作成方法は、「メール文をテンプレート化してメール受信」を参照
<html>
<head>
</head>
<body>
{{name}}様。
<br /><br/>
<p>いつもお世話になっております。</p>
<p>内容受け付けました</p>
<p>回答は改めてご連絡いたします。</p>
<br /><br/>
<p>問い合わせ内容</p>
<p>{{content}}</p>
</body>
</html>
  1. cloud functions作成
const functions = require("firebase-functions");
const sgMail = require('@sendgrid/mail')

exports.sendMail=functions.https.onRequest(async (req,res)=>{
  sgMail.setApiKey('******************')     //←sendgirdで生成したApi Key
  sgMail.setSubstitutionWrappers('{{', '}}'); 
  
  res.set('Access-Control-Allow-Origin', '*');
  //メール受信内容
  const msgRecieve = {
    to: '*********',                        //受信先のメールアドレス
    from: req.query.mail, 　　　　　　　　　//問い合わせ先からのメール
    subject: `${req.query.name}様からの問い合わせ`,
    text: req.query.content,
    html: `<strong>${req.query.content}</strong>`,
  }
  //メール自動返信内容
  const msgReply = {
    to: req.query.mail,                 //自動返信先のメールアドレス
    from: '*************', 　　　　　　 //受信先のメールアドレス
    subject: `問い合わせありがとうございます`,
    // text: req.query.content,
    // html: `<strong>${req.query.content}</strong>`,
    template_id: '3bfa8e5c-6e02-4cc4-9b64-fe2ba14aeac1',
    substitutions: {
      name: req.query.name,
      content:req.query.content
    },  
  }
  await sgMail.send(msgRecieve)
  await sgMail.send(msgReply)
    .then(() => {
      res.send('成功')
    })
    .catch((error) => {
      res.send('失敗',error)
    })
})

3.vueコード
「問い合わせフォームからのメール受信」と同じ
4. 作成したフォームより送信

5. 結果

  • 受信メール
  • 自動返信メール

以上になります

Discussion

tomosuetomosue

sendgridとfirebase cloud functionsでメール作成
大変参考になりました。

表示さた、cloud functions用のコードを転記し、
sendgirdで生成したApi Keyを入れて

firebase deploy --only functionsでデプロイしましたが
デプロイ後のurlが取得できません 。

他のfunctionではデプロイ後にエラー無く、urlが取得できるのですが？

環境構築に問題があるのでしょうか？

こちらで問い合わせしてよろしいのでしょうか。

hibimosakuhibimosaku

tomosue様
問い合わせありがとうございます。

他のfunctionではデプロイ後にエラー無く、urlが取得できるのですが？

環境構築を記載してなく、分かりづらく申し訳ございません。
原因が分からず、回答が違うかもしれませんが、
functionsのpackage.jsonの中に@sendgrid/mailはありますでしょうか？
ない場合は、funcitonsフォルダに移動して、npm i @sendgrid/mailでインストールすれば解決すると思います。

functions/packeage.json
{
  "name": "functions",
  "description": "Cloud Functions for Firebase",
  "scripts": {
    "serve": "firebase emulators:start --only functions",
    "shell": "firebase functions:shell",
    "start": "npm run shell",
    "deploy": "firebase deploy --only functions",
    "logs": "firebase functions:log"
  },
  "engines": {
    "node": "16"
  },
  "main": "index.js",
  "dependencies": {
    "@sendgrid/mail": "^7.7.0",　　　　　　　//←これ
    "firebase-admin": "^10.0.2",
    "firebase-functions": "^3.18.0"
  },
  "devDependencies": {
    "firebase-functions-test": "^0.2.0"
  },
  "private": true
}

よろしくお願いします。

tomosuetomosue

返事、遅くなりました。

いろいろ試しました。
漸くurlが取得できました。
以下、試行ステップを記します。
お世話かけました。

私のfirebase　プロジェクトは、去年の前半の環境で、
firebase sdkが8.**でした。
そのプロジェクトを、新規作業フォルダーから
firebase deploy --only functionsでデプロイしました。
urlが取得できませんでした。

現在の、firebase sdkが9.**の環境で、新たにfirebaseプロジェクトを作成し、
firebase deploy --only functionsでデプロイしました 。
urlが取得できました。

hibimosakuhibimosaku

ご返信ありがとうございます。
私の回答ずれてました。申し訳ございません。
試行ステップを記載していただきありがとうございます。
確かに私もfirebaseはv9で実施しました。
投稿の「環境」に書いておけばよかったです（修正しました）。
勉強になりました。