はじめに

ECサイトで購入ボタンをクリックすると、
設定したメールに購入完了メールが送られるという実装中に沼った話です。

上記のURLを参考にしましたが、私の環境下で起こった話です
別の環境下によっては問題なく実装できる場合もあります
結論があっさりしており
確定的な原因を特定できたわけではありません

上記2点ご了承ください

仕様

請求先住所に設定した以下の内容をテンプレートを使ってメールを送信する

ユーザ名
注文番号
商品ごとの商品名、個数、小計
購入金額合計

購入処理までの機能フロー

購入ボタンクリック
- 請求先住所、支払い方法フォーム作成
- カートIDを取得
- カートID内の商品を取得
- カート内に商品がない場合はカートページへ戻る
- バリデーションエラー時にカート内商品を保持する処理
  - 空の辞書を用意
  - カート内商品をループで回す
  - カート内商品の商品名を変数に格納
  - 商品名から4つ取得する → 小計、商品ID、商品価格、商品個数
- バリデーションエラーになったらカートページへ戻す（以降 ValidationError→VE）
  - 請求先住所のVE
  - 支払い情報のVE
  - カート内の商品情報
  - 購入予定の合計金額
  - 購入予定の商品の種類
- トランザクション開始（以降フォームチェック→FC）
  - FCした請求先住所をDBに保存
  - FCした支払い情報をDBに保存
  - 注文情報をDBに保存
    - 請求先住所 ID
    - 支払い情報 ID
  - OrderItemテーブルで商品情報を管理
    - 注文ID（外部キー）
    - 商品名
    - 商品価格
    - 商品個数
    - 商品ごとの小計
    - 合計購入金額
  - メール送信処理
  - 取得したカートを削除
  - サクセスメッセージを作成
  - リダイレクトで商品一覧ページへ遷移する
商品一覧ページでサクセスメッセージが出力される
- カートが削除されているため、カート内の商品個数が0になっている

DB設計

cart (カート)

カラム名（論理）	カラム名（物理）	型	NOT NULL	その他制約	説明
ID	id	serial	True	PRIMARY KEY
セッションID	session_id	char(32)	True

order (注文)

カラム名（論理）	カラム名（物理）	型	NOT NULL	その他制約	説明
ID	id	serial	True	PRIMARY KEY
請求先住所	billing_address_id	integer	True		請求先住所の外部キー
支払い情報	payment_id	integer	True		支払い情報の外部キー

billing_address (請求先住所)

カラム名（論理）	カラム名（物理）	型	NOT NULL	その他制約	説明
ID	id	serial	True	PRIMARY KEY
姓	last_name	char(20)	True
名	first_name	char(20)	True
ユーザー名	username	char(20)	True	unique
メールアドレス	email	char(30)	False
国	country	char(100)	True
州/県	state_prefecture	char(100)	True
郵便番号	zip	char(7)	True		今回のみ7桁の郵便番号
住所1	address1	char(255)	True		市区町村＋番地
住所2	address2	char(255)	False		マンション、アパート名＋部屋番号等
請求先=配送先	same_address	boolean	False	default=False
配送先住所を保存	save_address	boolean	False	default=False

payment (支払い)

カラム名（論理）	カラム名（物理）	型	NOT NULL	その他制約	説明
ID	id	serial	True	PRIMARY KEY
カード名義	card_holder	char(32)	True
カード番号(ハッシュ化)	card_number_hash	char(19)	True		4桁-4桁-4桁-4桁間のハイフン含める
カード下4桁	card_last4	char(4)	True
有効期限	expiration_date	char(5)	True		MM/YY 形式

order_item (購入商品)

カラム名（論理）	カラム名（物理）	型	NOT NULL	その他制約	説明
ID	id	serial	True	PRIMARY KEY
注文ID	order_id	integer	True		注文情報の外部キー
商品名	name	char(30)	True		購入時の商品名
価格	price	integer	True		購入時の商品の価格
個数	quantity	integer	True		購入時の商品個数
商品ごとの小計	subtotal	integer	True		MM/YY 形式

SendGridをHeroku経由で使えるように設定する

以下の手順でSendGridを設定していきました。

SendGridのアドオン追加

以下のコマンドからHeroku経由でSendGridをアドオンする

heroku addons:create sendgrid:starter

情報を入力する

今回は Compny Name の部分に個人利用であることを記載
Webサイトは X のURLを記載

これで Get Started! をクリックするとダッシュボードが立ち上がる
以下のコマンドでも立ち上げ可能

heroku addons:open sendgrid

APIキーの作成

以下の画像のように

Settings→API Keyにアクセス
Create API Keyをクリック
Full Accessを選択して Create & Viewをクリック

API Keyが出力されます。コピーしておきましょう。
Doneをクリックすると二度と出力されません。

その後、API Keyを作成できる画面に戻りまして
先ほど作成したAPI Keyが出力されています。

Senderを設定する

Settings→Sender Authenticationにアクセス
Verify a Single Senderをクリック
メールアドレス等を設定して Create ボタンをクリック
認証メールが届いて認証を通す

gmail, yahoo, icloudだと警告が出ますが問題なく作成できます。

上記で設定したアドレスに認証メールが届くので、
「Verify Single Sender」をクリックして、認証が通ると下記画面が表示される

環境変数の設定

APIキーの発行後、Herokuの環境変数に設定する。
今回はコマンドから設定していきます。
（-a以降はなくてもOK）

heroku config:set SENDGRID_API_KEY=[作成したAPIキー] -a [アプリ名]

これでダッシュボードから確認もできます

メール実装

Django公式からAnymailを使用するのが良さげなので
こちらを導入します。

まずはAnymailをインストールします。

pip install django-anymail
pip install django-environ

pip freeze >> requirement.txt

setttings.pyに下記設定を追記します。

settings.py

...
INSTALLED_APPS = [
    # ...
    "anymail",
    # ...
]
...
# SendGridを使用
EMAIL_BACKEND = "anymail.backends.sendgrid.EmailBackend"

ANYMAIL = {
    ...
    # SendGridのAPIキー
    "SENDGRID_API_KEY":  env("SENDGRID_API_KEY")
}

# メールの送信サーバー（SMTPサーバー）
EMAIL_HOST = env.str("EMAIL_HOST")
# SMTP のポート番号
EMAIL_PORT = env.int("EMAIL_PORT")
# TLS の使用
EMAIL_USE_TLS = env.bool("EMAIL_USE_TLS")
# SendGrid使用する場合は「apikey」
EMAIL_HOST_USER = env.str("EMAIL_HOST_USER")
# SMTP 認証のパスワード
# SendGrid の場合、SMTP 経由でメールを送信するときは API キーをパスワードとして使用する
EMAIL_HOST_PASSWORD = env.str("EMAIL_HOST_PASSWORD")
# 送信元メールアドレス
DEFAULT_FROM_EMAIL = env.str("DEFAULT_FROM_EMAIL")

.env

# < >←は不要
SENDGRID_API_KEY=<My API Key>
EMAIL_BACKEND = "django.core.mail.backends.smtp.EmailBackend"
EMAIL_HOST=smtp.sendgrid.net
EMAIL_PORT=587
EMAIL_USE_TLS=True
EMAIL_HOST_USER=apikey
EMAIL_HOST_PASSWORD=<API Key>
DEFAULT_FROM_EMAIL=<My Email>

ここからviews.pyとmodels.pyを記載

views.py

class OrderView(View):
    def post(self, request):
        # 請求先住所フォームと支払いフォームを生成
        billing_address_form = BillingAddressForm(request.POST)
        payment_form = PaymentForm(request.POST)
        # カートIDを取得、ない場合エラーを返してリダイレクト
        cart = Cart.get_or_create_cart(self.request)
        cart_products = cart.cart_products.select_related("product")

        if not cart_products:
            messages.error(request, "カート内に商品がありません")
            return render(request, "cart/cart_page.html", {
                "billing_address_form": billing_address_form,
                "payment_form": payment_form,
            })

        # エラーになった際にカート内の商品情報を保持すための処理
        product_data = {}
        for cart_product in cart_products:
            product_name = cart_product.product.name
            product_data[product_name] = {
                "subtotal": cart_product.sub_total_price(),
                "id": cart_product.id,
                "price": cart_product.product.price,
                "quantity": cart_product.quantity,
            }
        
        # どちらかがエラーの場合、エラーメッセージと共に元の画面へリダイレクト
        if not billing_address_form.is_valid() or not payment_form.is_valid():
            messages.error(request, "入力に間違いがあります")
            return render(request, "cart/cart_page.html", {
                "billing_address_form": billing_address_form,
                "payment_form": payment_form,
                "product_data": product_data,
                "total_cart_price": cart.total_price,
                "total_type_products": len(product_data),
            })
        
        # トランザクション内でDB処理を一括実行
        with transaction.atomic():
            # フォームチェックした請求先住所をDBに保存
            billing_address = billing_address_form.save()
            # フォームチェックした支払い方法をDBに保存
            payment = payment_form.save()
            # 注文情報をDBに保存
            order = Order.objects.create(
                billing_address=billing_address,
                payment=payment
            )
            # カート内の商品をOrderItemテーブルに保存
            for product_name, product_info in product_data.items():
                order_item = OrderItem.objects.create(
                    order=order,
                    name=product_name,
                    price=product_info["price"],
                    quantity=product_info["quantity"],
                    subtotal=product_info["subtotal"]
                )
            # ここから本題
            # メールを設定していたらメール送信
            try:
                if billing_address.email:
                    order.send_email(
                        username=billing_address.username,
                        order_id=order.id,
                        order_items=product_data,
                        total_price=sum(item["subtotal"] for item in product_data.values()),
                        email=billing_address.email
                    )
                print("メール送信完了")
            except:
                print(("メール送信できませんでした")
            # カートを削除
            Cart.objects.filter(id=cart.id).delete()
        messages.success(request, "ご購入ありがとうございます")

        return redirect(reverse("products:index"))

models.py

from django.core.mail import send_mail

...
def send_email(self, username, order_id, order_items, total_price, email):
        # テンプレート側で使えるように必要な情報をcontextに追加
        context = {
            "username": username,
            "order_id": order_id,
            "order_items": order_items,
            "total_price": total_price
        }

        subject = "【購入確定メール】野球魂"
        text_content = render_to_string("email/order_confirmation.txt", context)  # テキスト版
        html_content = render_to_string("email/order_confirmation.html", context)  # HTML版

        email = send_mail(
            subject=subject,
            message=text_content,
            from_email=env.str("DEFAULT_FROM_EMAIL"),
            recipient_list=[email],
            html_message=html_content, 
            fail_silently=False,
        )

        return True

これでカートに商品を追加して
購入ボタンをクリックして
「メール送信完了」のデバック出力とサクセスメッセージが出力されました！！

私はここで詰まりました。
ずっとSendGrid側のActivityがProcessedのままでした

原因を考える

結論だけ知りたい方は飛ばしてください

環境変数の確認
- 全て確認済み
print()でデバック
- 1行ずつ確認してもエラーになる部分がありませんでした
dockerを再起動
- 再起動後、改めて購入ボタンをクリックしてもメールが送られませんでした
APIキーの再生成
- 再生成も意味なし
gmailを不使用にする
- yahooメール, icloudメールを使用しても意味なし
pip install django-anymailを再インストール
- 意味なし

結論

アカウントを新しく作成し直して新しいAPI Keyを作成しました。
そうするとメールが送信できました。

嬉しくて何回も送ってしまいました!!!!

憶測ですが、Heroku経由からSendGridを作成したことが
バグにつながったのではないかと考えております。