Google Cloud上のSPAに問い合わせフォームを作る！SendGridによるメール送信

Cloud StorageやApp EngineにデプロイしたSPA(Single Page Application)に問い合わせフォームを作りたいという方は多いはずです。

また、問い合わせページを作成したけど、どのようにメールを送信するべきか迷う方もいらっしゃると思います。

そういった方を対象に、Google Cloudの公式ドキュメントで推奨している方法を利用して、問い合わせフォームからメールを送信する方法を紹介します！

完成物のイメージです。

Cloud Functionsにメール送信用のAPIを公開（python）
SendGridのWebAPIを利用したメール送信
1ヶ月12,000通のメールまで無料

目次非表示

概要
- SendGridとは
- Cloud Functionsの利用理由
メール送信機能の実装
SPAとの連携
まとめ

概要

この記事で紹介する方法では、Cloud FunctionsにSendGridを利用したメール送信機能を持つアプリケーションをデプロイし、デプロイしたアプリケーションに対してSPAからリクエストを送信することで問い合わせ機能を実現します。

まず、SendGridやCloudFunctionsnを利用する理由や利点について説明します。

実装方法だけ知りたいという方はこの章は飛ばしてください。

SendGridとは

SendGridは、クラウドベースのSMTPプロバイダで、メール送信が可能なwebサービスです（公式サイト：https://sendgrid.kke.co.jp/）。

2021年6月では、Google CloudにはAWSのAmazon SESのようなサービスはありません（ないよね…？）。

そのため、メール送信方法として、公式ドキュメントにおいてもSendGrid, Mailgun, Mailjetといったサードパーティのメールサービスを利用した方法を紹介しています（例：SendGrid でのメールの送信）。

これらの中でも、下記の利点があるので、個人的にはSendGridの利用がおすすめです。

毎月12,000通まで送信無料
リファレンスがしっかりと整備されている（公式リファレンス：https://sendgrid.kke.co.jp/docs/API_Reference/index.html）
githubに公式が複数の言語に対してサンプルプログラムを公開している（github：https://github.com/sendgrid/）
WebAPIにリクエストするだけでメール送信可能

SendGridのgithubには、python, PHP, java, nodejsなどの言語ごとにリポジトリが作成されており、READMEに簡単なサンプルプログラムが公開されています。

READMEを読むだけで公式の推奨利用方法がわかるので、非常に助かりますね。

また、毎月12,000通まで無料で利用できるというのも非常に嬉しいです。

Cloud Functionsの利用理由

GCPの公式ドキュメントではCompute Engine(CE)を利用した方法を紹介していますが、CEではゼロスケーリングができないのでお金がかかってしまいます。

従量課金性＋ゼロスケーリング可能＋メール送信機能のみという特徴を考慮して、Cloud Functionsにメール送信アプリケーションをデプロイすることにしました。

ただ、CEやCloudFunctionsの他にAppEngineでも利用可能なはずなので、好きなプラットフォームで良いと思います。

メール送信機能の実装

それでは作成していきます、全体の流れは下記になります。

SendGridのアカウント作成
SendGridのAPIキーの取得
プログラムの作成
Cloud Functionsへのデプロイ

SendGridのアカウント作成

公式サイトからアカウントの作成を行います（https://sendgrid.kke.co.jp/）。

気をつけるべきポイントとして、アカウントの作成に約1営業日かかります。

アカウントは早めに作成しましょう。

SendGridのAPIキーの取得

SendGridでアカウント登録後、アカウント名が送られてくるので、そのアカウントでログインします。

ログイン後、”Settings”タブから”API Keys”をクリックします。API Key Nameを入力して、Full Access権限でキーを作成します。

1. 左タブの”Settings”から”API Keys”を選択して、右上のボタンから作成

プログラムの作成

Cloud Functions上で動作するプログラムを作成します。

まず、プログラムはこちらです。リクエストのバリデーションなどは自分で追加してください。

from flask import Flask, request, make_response
import os
import sendgrid
from sendgrid.helpers.mail import Email, To, Content, Mail


def sample(request):
    # 取得したAPIKeyを環境変数SENDGRID_API_KEYにいれる
    SENDGRID_API_KEY = os.environ.get('SENDGRID_API_KEY')
    TO_EMAIL = os.environ.get('TO_EMAIL')
    FROM_EMAIL = os.environ.get('FROM_EMAIL')

    req_args = request.args
    sg = sendgrid.SendGridAPIClient(api_key=SENDGRID_API_KEY)
    message = (
        'from: {}\n'
        'Email: {}\n'
        'msg:\n{}'.format(
            req_args["name"],
            req_args["email"],
            req_args["msg"])
    )

    mail = Mail(
        Email(FROM_EMAIL),
        To(TO_EMAIL),
        "Email from Cloud Functions",
        Content("text/plain", message)
    )

    _ = sg.client.mail.send.post(request_body=mail.get())
    return make_response('', 200)


if __name__ == '__main__':
    app = Flask(__name__)

    @app.route('/sample', methods=['GET'])
    def call_function():
        return sample(request)

    app.run(debug=True, host='0.0.0.0', port=5000)

Cloud Functionsへのデプロイで必要なrequirements.txtは下記です。

blinker==1.4
click==8.0.1
Flask==1.0.2
itsdangerous==2.0.1
Jinja2==3.0.1
MarkupSafe==2.0.1
mccabe==0.6.1
pycodestyle==2.7.0
pyflakes==2.3.1
python-http-client==3.3.2
sendgrid==6.7.0
starkbank-ecdsa==1.1.1
toml==0.10.2
Werkzeug==2.0.1

あとは、ローカル環境で動作確認後、Cloud Functionsにデプロイしましょう。

下記では.env.yamlを利用してAPIキーを環境変数に代入していますが、SecretManagerを利用するほうがセキュリティ的には正しいと思います。

# ローカル環境でのテストリクエスト例
$ curl -v "http://localhost:5000/sample?email=test@gmail.com&msg=hoge&name=huga"

# 問題がなければ、Cloud Functionsへデプロイ
# デプロイコマンドの例
$ gcloud functions deploy sample_for_sendgrid \
    --runtime python38 \
    --trigger-http \
    --allow-unauthenticated \
    --region=us-central1 \
    --env-vars-file .env.yaml

# Cloud Functionsに対して、動作確認
$ curl -v "https://.../sample?..."

SPAとの連携

連携というほどのものではありませんが、、、

SPAの問い合わせフォームのボタンを押したときに、上記で作成したCloud FunctionsのエンドポイントへGETリクエストを送信するように変更しましょう。

上記では、クエリパラメータとしてemail, msg, nameを適当に使いましたが、このあたりは各自適当に変更してください。

まとめ

この記事では、Cloud Functions + SendGridを利用してメール送信機能を持つAPIを作成しました。

SPAから作成したエンドポイントに対してリクエストを送ることで、問い合わせフォームからメールを送信することが可能になります。

Google検索でGCP上のメール送信方法を調べると、Firebase＋gmailを利用した方法が多く見られます。ただ、Google Cloudで完結可能なので、わざわざFirebaseを利用する必要はないです（実際にはFirebaseもGoogle Cloud上で動作していますが…）。

また、Gmailのアカウント情報＋信頼性の低いアプリケーションからのログインを許可する必要があるので、セキュリティ的にもよろしくないかなと個人的には考えています。