質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.48%
Firebase

Firebaseは、Googleが提供するBasSサービスの一つ。リアルタイム通知可能、並びにアクセス制御ができるオブジェクトデータベース機能を備えます。さらに認証機能、アプリケーションのログ解析機能などの利用も可能です。

SendGrid

SendGridは、米SendGrid社のクラウド型メール配信サービス。アカウントを作成するだけですぐに利用することが可能です。さらに到達率向上のための送信ドメイン認証対応や、柔軟性のあるスケーラビリティなど多くの機能を有します。

Nuxt.js

Nuxt.jsは、ユニバーサルなSPAが開発可能なVue.jsベースのフレームワーク。UIの描画サポートに特化しており、SSRにおけるサーバーサイドとクライアントサイドのUIレンダリングなどさまざまな機能を持ちます。

Q&A

0回答

2616閲覧

Cloud FunctionsとSendGridでメール送信したい

Khy

総合スコア118

Firebase

Firebaseは、Googleが提供するBasSサービスの一つ。リアルタイム通知可能、並びにアクセス制御ができるオブジェクトデータベース機能を備えます。さらに認証機能、アプリケーションのログ解析機能などの利用も可能です。

SendGrid

SendGridは、米SendGrid社のクラウド型メール配信サービス。アカウントを作成するだけですぐに利用することが可能です。さらに到達率向上のための送信ドメイン認証対応や、柔軟性のあるスケーラビリティなど多くの機能を有します。

Nuxt.js

Nuxt.jsは、ユニバーサルなSPAが開発可能なVue.jsベースのフレームワーク。UIの描画サポートに特化しており、SSRにおけるサーバーサイドとクライアントサイドのUIレンダリングなどさまざまな機能を持ちます。

0グッド

0クリップ

投稿2020/04/14 02:34

Nuxt.jsで作ったお問い合わせフォームの送信ボタンを押すとCloud Functionsを呼び出して、SendGrid経由でメールを送るという機能を実装しようとしております。

Cloud Functionsの呼び出しはできているのですが、メールが送られてこず、Cloud Functionsのログは以下のようになっておりました。

sendMail Function execution started 3:27:12.971 午前 sendMail Function execution took 62 ms, finished with status code: 204 3:27:13.235 午前 sendMail Function execution started 3:27:13.426 午前 sendMail 送信失敗! 3:27:15.038 午前 sendMail Function execution took 1804 ms, finished with status code: 200

どこに原因があるのか丸一日悩んでも全く見当がつかないのですが、もし何か分かる方がおられましたらお知恵をお貸しいただけると助かります、、!

以下SendGridでの設定です。

  • API KeyのPermissionはFull Accessに設定
  • Settings > Mail Settings > Event Webhook

HTTP Post URLをhttps://<userName>:<password>@us-central1-<Project ID>.cloudfunctions.net/sendgridWebhookに設定
→userNameとpasswordは適当に設定して大丈夫との記事が多かったので適当に設定しております。

  • Temeplateを作成

また、Cloud Functionsの環境変数にはAPIキーを問題なく設定できております。

vue

1// pages/contact.vue 2 3<template> 4 <v-form> 5 <v-text-field v-model="form.name.contents" /> 6 7 <v-text-field v-model="form.email.contents" /> 8 9 <v-select v-model="form.subject.contents" :items="items" /> 10 11 <v-textarea v-model="form.message.contents" /> 12 13 <v-btn @click="sendMail()">Send</v-btn> 14 </v-form> 15</template> 16 17 18<script> 19import firebase from 'firebase' 20 21export default { 22 data() { 23 return { 24 items: [ 25 'お仕事のご依頼', 26 'その他のお問い合わせ' 27 ], 28 form: { 29 name: { contents: '' }, 30 email: { contents: '' }, 31 subject: { contents: '' }, 32 message: { contents: '' } 33 } 34 } 35 }, 36 methods: { 37 sendMail() { 38 const send = firebase.functions().httpsCallable('sendMail') 39 send(this.form) 40 .then((data) => { 41 alert('送信しました。') 42 }) 43 .catch((error) => { 44 console.log(error) 45 alert('送信に失敗しました。') 46 }) 47 } 48 } 49} 50</script> 51

js

1// functions/index.js 2 3const sendgrid = require('@sendgrid/mail') 4const functions = require('firebase-functions') 5 6exports.sendMail = functions.https.onCall(async function(data, context) { 7 // SendGridのAPIキーをセット 8 sendgrid.setApiKey(functions.config().sendgrid.key) 9 10 const msg = { 11 to: 'example@gmail.com', 12 from: data.email.contents, 13 subject: 'ホームページお問い合わせ', 14 15 templateId: 'd-xxxxxxxxxxxxxxxxxxxxxxxxxx', 16 dynamic_template_data: { 17 name: data.name.contents, 18 email: data.email.contents, 19 subject: data.subject.contents, 20 message: data.message.contents 21 } 22 } 23 24 try { 25 await sendgrid.send(msg) 26 console.log('送信成功!') 27 } catch (e) { 28 console.log('送信失敗!') 29 return e.message 30 } 31}) 32

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

まだ回答がついていません

会員登録して回答してみよう

アカウントをお持ちの方は

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.48%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問