【Nuxt/Express/GO】SendGridでメールを送信してみた

SendGridでメール送信する前に前提共有

• 今回開発したのはブログのようなサービス
• アメブロやFC2のような自分以外も利用するブログサービスのイメージ
• サービスを利用するオペレーターにメールアドレスを登録してもらっている
• エンドユーザーにはお問い合わせ時にメールアドレス等を入力してもらう
• お問い合わせ完了後にオペレーターとエンドユーザーにお問い合わせ内容がメールで届く
• オペレーターにメールを送信するがreply_to(返信先)はエンドユーザーとする※

※お問い合わせからのやり取りするまでの導線は、サービスを開発しているこちら側が作るけど、そこから先は関与しないよという運用を実現するためにreply_to(返信先)を用意しています。

SendGridでメール送信するにあたっての全体像

実装の全体像は以下です。

メールが送信されるまでの導線は以下となります。

1. エンドユーザーがお問い合わせページにアクセス
2. Nuxt.jsからaxiosでGOで開発したAPIにリクエスト
3. バックエンド側(GOとMySQL)からJson(オペレーターのメールアドレス込)をレスポンス
4. エンドユーザーがお問い合わせページで「名前・メールアドレス・お問い合わせ内容」を入力
5. エンドユーザーがお問い合わせページで情報を送信
6. Nuxt.js側からExpress.js側に入力情報をPOST
7. sgMail.send()でSendGridのAPIを呼び出す
8. SendGridからメールを送信

アーキテクチャの全体像は以下にまとめました。

参考：https://qiita.com/arthur_foreign/items/9007695c5ff02dd493cf

SendGridでメールを送信する実装手順の目次

• SendGridのアカウント登録
• API Keyの作成
• 独自ドメインの利用
• Nuxt.jsの実装(色々省略)
• Express.jsの実装

これから、上記手順の詳細をまとめていきます。

※GOの実装はリクエストを受け取ってSQL投げるだけで、特別なことは何もしていないので省略しました。

SendGridのアカウント登録

まずは、SendGridを利用するにあたってアカウントを登録をしました。

以下のリンクからアカウントを登録することが出来ます。

てっきり、登録した瞬間にSendGridが使えるのかと思ってましたが、1-2営業日くらいやり取りが発生した後利用できるようになりました。(詳細の説明は省略)

API Keyの作成

SendGridが有効化されたらログインします。

次に、以下に遷移しました。

「Settings ＞ API Keys」

遷移したら「Create API Key」をクリックしました。

適当な名前を入力しました。

また、「Full Access」だと全てのAPIにアクセス出来てしまうので、「Restricted Access」を選択しました。

「Mail Send」の権限だけを「Full Access」にしています。

設定が完了したら「Create & View」をクリックして、API Keysを作成しました。

SendGridのAPI Keyで出来る設定は以下が参考になりました。

参考：https://sendgrid.kke.co.jp/docs/User_Manual_JP/Settings/api_keys.html

また、SendGridのWeb APIを利用するにあたって、設定方法は以下を参考にしています。

メール送信だけ出来る設定に出来ればよかったため、非常に参考になりました。

参考：https://sendgrid.kke.co.jp/blog/?p=11818

独自ドメインの利用

独自ドメインを利用していたため、Sender Authenticationを利用しました。

Sender Authenticationを利用しない状態でメールを送信したら、メールアドレスの横に経由と表示されました。

送信者名の横に「経由」とドメイン名が表示される
送信元のドメインと [From] アドレスのドメインが一致しない場合。
引用：https://mail.google.com/

そのため、以下を参考にSender Authenticationを設定しています。

参考：https://support.sendgrid.kke.co.jp/hc/ja/articles/203703439-%E7%8B%AC%E8%87%AA%E3%83%89%E3%83%A1%E3%82%A4%E3%83%B3%E5%88%A9%E7%94%A8-Sender-Authentication-%E3%81%8A%E3%82%88%E3%81%B3%E8%A8%AD%E5%AE%9A%E6%99%82%E3%81%AEDNS%E3%83%AC%E3%82%B3%E3%83%BC%E3%83%89%E3%81%AB%E3%81%A4%E3%81%84%E3%81%A6-%E8%A9%B3%E3%81%97%E3%81%8F%E6%95%99%E3%81%88%E3%81%A6%E3%81%8F%E3%81%A0%E3%81%95%E3%81%84

「Settings ＞ Sender Authentication」に遷移しました。

次に、「Authentication Your Domain」をクリックしました。

利用しているDNSを選択しました。

僕の場合はRoute53を利用していたので、それを選択したという形です。

表示されるCNAMEレコードをRoute53で設定しました。

完了後、「Verify」をクリックして完了です。

Nuxt.jsの実装(色々省略)

Nuxt.jsでは、エンドユーザーからお問い合わせするページを用意しています。

<script>
export default {
  methods: {
    async submit() {
      const isValid = await this.$refs.observer.validate()
      if (isValid) {
        await this.$axios({
          method: 'post',
          url: '/contact-form',
          data: {
            inputName: this.inputName,
            inputEmail: this.inputEmail,
            inputMessage: this.inputMessage,
            operatorEmail: this.$props.operatorEmail // Pagesからpropsで受け取ったオペレータのEmailアドレス
          }
        }).then(this.$router.push('/contact/thanks'))
      }
    }
  }
}
</script>

お問い合わせの送信ボタンをクリックした後、Express.jsに入力された値がPOSTされて、サンクスページに遷移するような実装となっています。

お問い合わせフォームの作成方法は、バリデーションの実装込みで以下の記事にまとめました。

参考：https://qiita.com/arthur_foreign/items/a875b17328007935f5ec

Express.jsの実装

まずは、SendGridのライブラリをインストールしました。

$ yarn add sendgrid

次に、SendGridのライブラリ(Node.js)を利用して、エンドユーザーとオペレーターそれぞれにメールを送信します。

export default {
  serverMiddleware: ['~/server/contact-form.js']
}

const express = require('express')

const app = express()

const sgMail = require('@sendgrid/mail')

app.use(express.json())
app.use(express.urlencoded({ extended: true }))

app.post('/contact-form', (req, res) => {
  sgMail.setApiKey('SG.XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX')
  const messageToOperator = {
    // toはオペレーターのメールアドレス
    to: req.body.operatorEmail,
    // reply_toでオペレーターの返信先をエンドユーザーにする
    reply_to: req.body.inputEmail,
    from: '[email protected]',
    subject: '【BLOG-Service Support Team】',
    html: `${req.body.inputName}様より、以下のメッセージが届きました。<br><br>
          ========================================================<br><br>
          ${req.body.inputMessage}
          `
  }

  const messageToUser = {
    // toはエンドユーザーのメールアドレス
    to: req.body.inputEmail,
    from: '[email protected]',
    subject: '【BLOG-Service Support Team】',
    html: `${req.body.inputName}様、お問い合わせいただきありがとうございます。<br>
          以下のメッセージを送信しています。<br>
          ========================================================<br><br>
          ${req.body.inputMessage}
          `
  }

  sgMail.send(messageToOperator)

  sgMail.send(messageToUser)

  res.json({ message: 'success' })
})

module.exports = {
  path: '/',
  handler: app
}

SendGridのライブラリについては、以下のドキュメントが参考になりました。

参考：https://sendgrid.kke.co.jp/docs/Integrate/Code_Examples/v3_Mail/nodejs.html