第1回 独自ドメインのメールアドレスを作る―Cloudflare Email Routingで受信できるようにする

「Astro＋Cloudflareでサイトを作る」では、Astroでサイトを作り、Cloudflare Workersへ公開し、bringain.comを独自ドメインとして使えるところまで進めた。

サイト自体は公開できたので、ここからは公開後の運用を進める。

新しい連載名は「サイトを作ったら ― 運用・SEO・SNS」。

独自ドメインメール、検索エンジンへの登録、アクセス解析、SNS、SEOなど、サイトを公開したあとに実際に設定した内容を順番に残していく。

第1回はメール。

bringain.comを使っているなら、問い合わせ用のアドレスもcontact@bringain.comにしたい。

CloudflareにはEmail Routingがあり、独自ドメイン宛のメールを普段使っているメールアドレスへ転送できる。contact@bringain.comで受信できるところまで設定する。

なお、Email Routingで独立したメールボックスを作るわけではない。今回作るのは、contact@bringain.comへ届いたメールを既存の受信先へ転送する仕組み。

ゴールは、独自ドメイン宛のメールを受信できる状態まで。

bringain.comのDNSを確認#

メール用のDNSレコードを追加するので、最初に現在のDNSを確認した。

CloudflareのDNS > レコードを開く。

この時点で登録されているのは、bringain.comをCloudflare Workersのyumaru-siteへ向けているレコードだけ。

画面上にも、

メールが @bringain.com アドレスに届かず、なりすましの可能性があります

という推奨事項が表示されている。

既存のMXレコードはなく、別のメールサービスも使っていないため、Cloudflare Email Routing用のレコードを追加して進める。

既にGoogle WorkspaceやMicrosoft 365などで独自ドメインメールを運用している場合は、ここをそのまま置き換えると既存メールへ影響する。今回の環境にはその設定がないことを確認してから進めた。

Email Routingへbringain.comを追加#

Cloudflareの管理画面からメールサービス > Email Routingを開く。

まだ設定していない状態では「メールルーティングを有効化」と表示される。

「ドメインをオンボード」を押す。

対象ドメインとしてbringain.comを選択する。

続行すると、Cloudflareがメールルーティングに必要なDNSレコードを提示する。

画面では、bringain.comへ3つのMXレコードが追加されることを確認できる。

route1.mx.cloudflare.net.
route2.mx.cloudflare.net.
route3.mx.cloudflare.net.

優先度もそれぞれ設定されている。

さらにDKIM用のTXTレコードも追加される。

Cloudflareの公式ドキュメントでは、Email Routingのオンボード時に、受信用のMX、ルーティング用SPF、転送メールを認証するDKIMのDNSレコードを設定する構成になっている。

Cloudflare側が提示した内容を確認し、そのまま有効化した。

DNSを自分で1件ずつ入力するのではなく、Cloudflare DNSを使っているドメインなのでEmail Routing側から必要なレコードを追加できる。

転送先のメールアドレスを認証#

次に、contact@bringain.comへ届いたメールをどこで受け取るか決める。

Email Routingでは、転送先として使うメールアドレスを先に登録し、認証する必要がある。

宛先アドレスを開いて、普段使っているメールアドレスを登録した。

Cloudflareから確認メールが届くので、メール内の認証リンクを開く。

認証が完了すると、管理画面のステータスが検証済みになる。

この転送先アドレスはCloudflareアカウント内で管理され、Routing Ruleを作るときに選択できる。

ここで作っているのはcontact@bringain.comそのものではない。

先に、

Cloudflareがメールを転送する先

を登録している。

contact@bringain.comのルーティングルールを作成#

転送先が認証できたので、ルーティングルールから新しいルールを作る。

メールパターンにはcontactを入力する。

ドメインはbringain.com。

アクションはメールに送信として、先ほど認証した転送先を指定した。

設定内容は次の形になる。

contact@bringain.com
        ↓
Cloudflare Email Routing
        ↓
認証済みの転送先メールアドレス

保存するとcontact@bringain.comのルールが追加され、有効になった。

Catch-allは無効のままにしている。

contact@bringain.comだけを使うため、存在しない任意のアドレスまで全部転送する設定は必要ない。

CloudflareのRouting Ruleは、メールパターンと認証済みの転送先を組み合わせる形になっている。別の用途が必要になれば、例えばinfoやsupportなどのルールを追加することもできる。

別のメールアカウントから送って確認#

ルールを作っただけでは実際に届くか分からないので、最後に受信テストを行う。

転送先とは別のメールアカウントから、contact@bringain.com宛にテストメールを送った。

件名は「転送テスト」。

本文も確認用の短い内容だけにして送信した。

その後、Email Routingで登録した転送先を確認する。

メールは転送先へ届いた。

これで、

外部のメールアカウント
↓
contact@bringain.com
↓
Cloudflare Email Routing
↓
普段使っているメール

という受信経路を確認できた。

転送先のメール画面では、認証情報のドメインとFromアドレスのドメインが一致していないという警告も表示された。

今回の目的であるメール転送自体は正常に完了している。

CloudflareのEmail Routingでは、転送時にARCで元の認証結果を保持し、SRSでEnvelope Senderを書き換えて転送する仕組みが使われている。受信側のメールサービスがどの情報を使って警告を出すかは別に確認する必要があるので、今回は表示された事実だけ残しておく。

新連載用のカテゴリとシリーズも追加#

今回から新しい連載になるため、記事を追加する前にゆまラボ側のtaxonomyも追加した。

既存サイトではsrc/data/taxonomy.tsのlabelsで、カテゴリ、サブカテゴリ、シリーズのslugと表示名を管理している。

今回追加したのは次の3つ。

category
site-operation
→ サイト運用

subcategory
email
→ メール・ドメイン

series
site-operation-seo-sns
→ サイトを作ったら ― 運用・SEO・SNS

旧連載のastro-cloudflare-site-buildは変更していない。

シリーズ一覧と詳細ページは記事のFrontmatterから自動生成されるため、第1回では次の値を指定する。

category: 'site-operation'
subcategory: 'email'
series: 'site-operation-seo-sns'
seriesOrder: 1

taxonomy追加後は、

npx astro sync --force
npm run build
node scripts/verify.mjs
git diff --check

を実行。

ビルドは成功し、検証スクリプトもPASSになった。

新しいカテゴリとシリーズを追加したことで、独自ドメインメールの記事を既存のWEB制作へ無理に入れず、サイト運用 > メール・ドメインとして分けられるようになった。

独自ドメイン宛ての受信を確認#

contact@bringain.com宛のメールを、Cloudflare Email Routing経由で既存のメールアドレスへ転送できるようになった。

今回行った作業をまとめる。

• bringain.comの既存DNSを確認
• Cloudflare Email Routingへbringain.comをオンボード
• Email Routing用のDNSレコードを追加
• 転送先メールアドレスを登録して認証
• contact@bringain.comのRouting Ruleを作成
• 別アカウントからテストメールを送信
• 転送先で受信できることを確認
• 新カテゴリsite-operationを追加
• サブカテゴリemailを追加
• 新シリーズsite-operation-seo-snsを追加
• Astroのビルドとtaxonomy検証を実行

これでcontact@bringain.com宛のメールを、Cloudflare Email Routing経由で普段使っているメールアドレスへ転送できるようになった。

独自ドメインをサイトのURLだけでなく、問い合わせ用のメールアドレスとしても使える状態になった。

参考#

• Cloudflare Email Service - Domain configuration
• Cloudflare Email Service - Email routing rules and addresses
• Cloudflare Email Service - Email lifecycle