Cloudflare Email RoutingとResend、Gmailを用いて無料で独自ドメインのメールアドレスを作成する方法

# はじめに
今回初めて記事を書くので、読みづらい点が多々あると思いますがご容赦ください。

本記事では以下の条件をクリアしたうえで、独自ドメインのメールアドレスを取得、メールの送受信をすることを目的としています。
- 別途メールサーバーを用意しなくてもよい
- 迷惑メール対策
- ドメイン取得、維持費用以外無料

# 事前準備
- [Cloudflare](https://www.cloudflare.com/ja-jp/)アカウントの作成
- [Resend](https://resend.com/home)アカウントの作成
- [Gmail](https://www.google.co.jp/mail/help/intl/ja/about.html?vm=r)を使用するためのGoogleアカウントの作成（既存のアカウントを使用する場合は不要）
- ドメインの取得、および、Cloudflareへの登録

アカウントの作成については本記事では割愛します。

:::note
説明用として画像中では以下のように記載しています
- Cloudflareアカウント名: your_name
- ドメイン: `your-domain.com`
- Gmailアカウント: `your-gmail-address@gmail.com`
:::

# Cloudflare Email Routingとは
[Cloudflare Email Routing](https://www.cloudflare.com/ja-jp/developer-platform/products/email-routing/)(以下、Email Routing)とは、Cloudflareが無料で提供しているメール転送サービスです。
Cloudflareにて管理しているドメインのメールアドレスのみ使用可能です。

# Resendとは
[Resend](https://resend.com/home)とは、EメールをAPI経由で送信するサービスです。
3000件/月まで無料で送信でき、開発者向けということもあって様々な機能を提供しています。

# ドメインの取得
まずは、独自ドメインの取得をします。
![無題.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3712103/e2529057-3e34-2f32-5161-9a63124f1b00.png)
Cloudflareにログインしたら、ダッシュボード右にあるサイドメニューから**ドメイン登録＞ドメインの登録**を選び、取得したいドメインを検索します。
その後、画面の指示に従ってドメインの購入手続きを行ってください。

Cloudflareでのドメイン取得に関しては、こちらの記事を参考にしていただくとわかりやすいです。
 
https://qiita.com/khayama/items/fdda7884033b519aa1fe

# Cloudflare以外で取得したドメインの設定
Cloudflare以外（お名前ドットコム等）で取得したドメインについては、まず、ダッシュボードのアカウントホームから、ドメインを追加する、または、画面右上にある**追加＞既存のドメイン**から設定を行います。
![無題.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3712103/7a3d76de-dd60-8bd0-bd22-97d908b85f27.png)

次に、設定予定のドメインを入力し、続行を押します。
![無題.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3712103/0943efff-56cf-515d-482e-558438a146e9.png)

次に、プラン設定の画面に移るので、特に理由がなければ**Free**を選択し、続行を押します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3712103/33e91879-ddf4-8bb7-a07d-325d8e1dfedd.png)

次に、ネームサーバーの設定に移ります。
画面に移っている設定手順に従って登録しているレジストラの設定画面にて設定してください。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3712103/65ce9db2-35b8-7184-3457-b565e3beb40e.png)
例として、お名前ドットコムの場合は、お名前.com Naviの**ドメイン＞ドメイン機能一覧＞ネームサーバー設定**から、設定するドメインにチェックを入れ、そのほかのサービスからCloudflareにて割り当てられたサーバーアドレスを入力します。
![無題.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3712103/a0ef2cc6-6ddf-60d0-cf49-8ad1a3eee709.png)

設定が完了したら、Cloudflare側でネームサーバーの確認が行われ、以下のようなメールが届きます。
このメールが届いたら設定完了です。
![無題.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3712103/9cfc5f25-6479-13ac-a72b-a2a1d863e7b7.png)

# Email Routingの設定
Cloudflareのダッシュボードを開き、登録したドメインを選択します。
![無題.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3712103/9ecb2e42-7745-f290-1149-248329b3808b.png)

次に、サイドメニューの**メールアドレス＞Email Routing**を選択します。
![無題.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3712103/949abbd2-ba0b-a3b7-0537-f54257965142.png)

次に、**Email Routing を有効にする**を選択し、次の画面で**レコードを追加して有効にする**を選択します。
![無題.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3712103/cd4c68a9-b7eb-039d-dff3-81d5b00748da.png)
![無題.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3712103/e1ff867d-af35-51e6-da38-a3b01cfe1172.png)

次のように設定されていれば成功です。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3712103/b6dad84b-18d2-e36e-4f92-211700be8374.png)

次に、宛先アドレスの設定を行います。
**宛先アドレス**にある**宛先アドレスを追加**を選択し、事前準備で作成したGmailのメールアドレスを入力し保存します。
![無題.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3712103/933abae4-296b-0bb0-aa35-b021e50d12ba.png)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3712103/58878323-5dd0-4d27-ba29-ccb014567313.png)

以下のメールが届いたら、**Verify email address**を押して、認証します。
![無題.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3712103/6da4dd53-b82e-b9d8-21f6-935e9f9fcc4b.png)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3712103/7785116f-5bba-7c07-0ba2-751f8e1143e0.png)

次に、メールアドレスの設定を行います。
**ルーティングルール**にある**アドレスを作成**を選択します。
![無題.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3712103/20756dc9-c45e-e07b-390a-e2d23aa6b73f.png)

次に、カスタムアドレスを好みのものに設定し、アクションを**メールに送信**、宛先を先ほど設定したGmailアドレスに設定し保存します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3712103/4bbcbe7d-0429-b79f-a28c-bdd30ce81d24.png)

ここまで設定出来たら、試しに作成したメールアドレス宛にメールを送ってみてください。
設定した宛先アドレスに対してメールが送られてきます。

:::note warn
送られてこない場合は、設定を見直してください
:::

# Resendの設定
Resendにログインしたら、ダッシュボード右にあるサイドメニューの**Domains**を選択し、**Add domain**を選択します。
![無題.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3712103/7f63eab9-28a6-ff62-3fd2-59f9865a141d.png)

ドメインを入力したら、**Add**を選択します。

:::note warn
Freeプランの場合、Regionの選択はできません
:::
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3712103/24c1f257-29c2-d03c-33f7-42119e5fd9b5.png)

次に、Resendでメールを送信するために必要なMXレコードと迷惑メール対策に必要なTXTレコードを、CloudflareのDNSレコードに設定します。
まず、Resend側にある設定をコピーします。
![無題.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3712103/49455b9e-a530-ff7c-4f27-660d7916e354.png)

コピーした情報をCloudflareダッシュボードの**DNS＞レコード**にある**レコードの追加**から設定し、保存します。
![無題.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3712103/27d4295a-9e94-e700-3cab-0667c4a6d442.png)
![無題.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3712103/09c09c55-6d75-32e8-afff-6e99b9940497.png)

すべて設定すると、以下のようなレコード設定になっていると思います。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3712103/e69af5f6-689d-ab16-07ab-563a1bb25100.png)

:::note warn
既に、別の用途で使用している場合、もともと設定してあるレコードに加えて、今回行った必要な設定があるかを確認してください
:::

設定が完了したらResend側のDNSレコード設定が書いてある画面にある、**Verify DNS Record**を選択して設定の検証を行います。
![無題.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3712103/1286fb64-810a-109d-a2fa-4d52269aeb98.png)

検証中の画面
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3712103/c2fcd3ca-f9a7-7ca1-a0f5-733028a67d75.png)

この画面になれば成功です。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3712103/d0141e28-d3da-9323-05a6-031b9a5aa505.png)

:::note warn
検証に失敗した場合、設定を見直してください
:::

次に、API Keyの作成を行います。
Resendのダッシュボード右にあるサイドメニューの**API Keys**を選択し、**Create API Key**を選択します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3712103/2fa9c621-12b6-a735-0273-e8170e70ad9c.png)

設定項目には以下のように設定し、**Add**を選択します。
- Name: わかりやすい任意の名前
- Permission: **Sending access**
- Domain: **All domains**または**設定した独自ドメイン**
Addを選択した後、APIをコピーして任意の場所（メモ帳など）に必ずペーストして保存してください。

:::note warn
**API Key**は一度しか表示されません！
メモを忘れた場合は再度作り直してください
:::
入力例
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3712103/8634c6dc-01a3-5e02-da98-334fd9e2b26b.png)


# Gmailの設定
ここまで来たらあと少しです！

`your-gmail-address@gmail.com`アドレスのGmailを開き、画面右上にある設定(歯車マーク)を開き、**すべての設定を表示**を選択します。
![無題.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3712103/7a2c084b-7025-d219-0097-7342b4b2f743.png)

次に、**アカウントとインポート**にある**他のメールアドレスを追加**を選択します。
![タイし.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3712103/3411471c-a88f-405b-3ee7-ea803a84cf4f.png)

別タブで**自分のメールアドレスを追加**画面が開くため以下のように設定し、**アカウントを追加**を選択します。
- 名前: 任意の名前
- メールアドレス: Email Routingにて設定したメールアドレス
![無題.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3712103/d9432cde-507d-c1cd-22a5-80fbdd8cd0d3.png)

- SMTPサーバー: **smtp.resend.com**
- ユーザー名: **resend**
- パスワード: Resendで作成した**API Key**
![無題.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3712103/3336dd51-9aed-b9d4-cca6-66007ecceb85.png)

設定が完了すると、Email Routingにて設定したメールアドレス宛に確認メールが送信されます。
確認メールの件名は「**Gmail からのご確認 - example[]()@your-domain.com を差出人としてメールを送信します**」になっているはずです。

:::note warn
今回は、Email Routingにて設定したメールアドレスの転送先と送信元のGmailを同じにしているため、`your-gmail-address@gmail.com`に送られてきます。
:::

確認メールの指示に従って確認が終われば、これですべての設定は完了です！
実際に**メールの差出人**一覧に追加したメールアドレスがあり、メールの送受信が問題なくできることを確認出来たら成功です！

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3712103/aca944c8-5017-4399-0165-61f79f031465.png)

# おわりに
最後まで読んでいただきありがとうございます。
初めてということもあり、セクション分けや文章、画像等、どんな風にやればいいのか手探り状態で...
見づらくなってしまったらどうしようかと

それはさておき、今回取り上げたResendはAPI経由でメール送信できるのが強みであり、アプリケーションに組み込みやすいのが特徴です！
App開発者にも、ただ独自のアドレスが欲しいだけの人にもオススメです！

# 追記
プログラム等からresendに対してAPIを叩いてメール送信したい場合は、[公式のAPIリファレンス](https://resend.com/docs/api-reference/introduction)にいくつかの言語、ツールでの送信方法が掲載されています。

例:Python
```python
import resend

resend.api_key = "re_123456789"

params: resend.Emails.SendParams = {
  "from": "Acme <onboarding@resend.dev>",
  "to": ["delivered@resend.dev"],
  "subject": "hello world",
  "html": "<p>it works!</p>"
}

email = resend.Emails.send(params)
print(email)
```
レスポンス
```
{
  "id": "xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx"
}
```