第6回 Cloudflareでbringain.comを取得してAstroサイトへ接続する

Astroブログの公開先として使ってきたURLは、Cloudflare Workersから発行された次のアドレス。

https://yumaru-site.yumaru.workers.dev

サイトの作成、GitHubとの連携、記事の自動公開まで確認できたため、次の段階として独自ドメインを取得。ドメインの購入先には、サイトの公開先と同じCloudflareを利用する。

今回取得したドメインはこちら。

bringain.com

この記事では、Cloudflare Registrarでの検索から購入、Workersへの接続までを画面付きで整理する。

Cloudflareのドメイン登録画面を開く

Cloudflareへログインし、左側のメニューから「ドメイン」→「登録」を選択。

まだCloudflareでドメインを取得していない場合は、「まだCloudflareに登録されたドメインはありません」と表示される。画面右上の「ドメインを購入」、または中央の検索欄から登録手続きへ進む。

Cloudflare Registrarでドメインを新規登録する画面

Cloudflare Registrarは、Cloudflare上でドメインの検索、取得、更新、DNS管理まで行えるサービス。サーバーとドメインを同じCloudflareアカウントで管理できるため、今回の構成と相性がよい。

候補名と取得費用を確認

最初に検討した名前はyuma-labo。検索欄へ入力すると、.com、.net、.org、.aiなど、取得可能な候補と年額が一覧表示される。

yuma-laboで検索したドメイン候補と年間料金

同じ文字列でも、末尾のトップレベルドメインによって料金は大きく異なる。検索時点ではyuma-labo.comが年額10.46ドル、yuma-labo.netが年額11.86ドル。.aiや.ioは比較的高額な設定。

候補を比較した結果、最終的には以前使っていた「ブリングイン」という名称を再利用。表記をbringainとして、取得可能だったbringain.comを選択する。

bringain.comの登録内容を確認

購入画面で確認した内容は次のとおり。

項目 内容
ドメイン bringain.com
登録期間 1年
登録時の表示価格 10.46ドル
有効期限 2027年9月5日
自動更新 有効

bringain.comの登録期間、料金、自動更新設定の確認画面

登録者情報と支払情報を入力し、購入を確定。自動更新は有効のまま進めた。更新忘れによるドメイン失効を防げる一方、不要になった場合は更新日前に設定の見直しが必要になる。

なお、記事用画像には氏名、住所、メールアドレス、カード情報などが写らない範囲だけを使用している。

ドメイン取得処理の完了を待つ

決済後は「ドメインは取得手続き中です。」という画面へ移動。bringain.comに緑色のチェックが表示され、管理画面からDNSやWHOISプライバシー、自動更新の設定へ進める状態になる。

bringain.comの取得手続き中画面

この時点でドメインの購入操作は完了。続いて、公開中のWorkerへドメインを割り当てる。

Workersへ独自ドメインを追加

Cloudflareの「Workers & Pages」からyumaru-siteを開き、上部の「ドメイン」を選択。

追加前の画面には、従来のWorker URLとプレビューURLだけが表示されている。「カスタムドメインとルーティングする」の右側にある「ドメインを追加」を選択する。

独自ドメイン追加前のyumaru-siteドメイン設定

入力欄へbringain.comを指定して追加。CloudflareのCustom Domainでは、対象ドメインのDNSレコードと必要な証明書が自動的に作成される。

Workersとの接続を確認

追加後、カスタムドメイン一覧へbringain.comが表示された。

yumaru-siteへbringain.comを追加した後のドメイン一覧

画面上の表示内容は次のとおり。

名前：bringain.com
タイプ：本番
ゾーン：bringain.com

これで、Cloudflare上のドメインとyumaru-siteの関連付けが完了。追加直後は既存のyumaru-site.yumaru.workers.devも有効な状態。独自ドメインの表示確認後、記事末尾の手順で旧URLを無効化する。

Astro側のサイトURLを変更

独自ドメインで運用する場合は、Astroのastro.config.mjsにあるsiteも確認する。

export default defineConfig({
  site: 'https://bringain.com',
});

siteはサイトマップ、RSS、canonical URLなどの生成に使われる。以前のworkers.devまたはサンプルURLが設定されている場合は、https://bringain.comへ変更してからビルドとpushを実行する。

npm run build
git add .
git commit -m "独自ドメインにサイトURLを変更"
git push

GitHub連携による自動デプロイ完了後、次の項目を確認する。

  • https://bringain.comでトップページが開くこと
  • 記事ページへ移動できること
  • ブラウザにHTTPSの警告が表示されないこと
  • サイトマップとRSSのURLが独自ドメインになっていること

今回の結果

  • Cloudflare Registrarでbringain.comを取得
  • 登録期間1年、自動更新を有効化
  • yumaru-siteの本番カスタムドメインとして追加
  • DNSとHTTPS証明書をCloudflare側で管理
  • 独自ドメインの確認後、workers.devの本番URLとプレビューURLを無効化

ドメインの購入からWorkerへの追加まで、別サービスのネームサーバー設定や証明書発行作業は不要。Astro、GitHub、Cloudflare Workersに独自ドメインが加わり、サイト公開の基本構成が一通りそろった。

追記：workers.devの旧URLを無効化

https://bringain.comでサイトが開くことを確認した後、Cloudflareのyumaru-siteに残っていたworkers.devのURLを無効化。

操作場所は「Workers & Pages」→yumaru-site→「ドメイン」。Worker URL欄にある次の2つのスイッチをOFFにする。

  • プロダクション：yumaru-site.yumaru.workers.dev
  • プレビュー：*-yumaru-site.yumaru.workers.dev

workers.devのプロダクションURLとプレビューURLをOFFにした画面

画面下のカスタムドメイン一覧には、bringain.comが「本番」のまま表示されている。Worker本体やカスタムドメインは削除せず、Cloudflareから発行された旧URLだけを停止する設定になる。

今後のデプロイでも無効状態を明示する場合は、wrangler.jsoncへ次の設定を追加する。

{
  "workers_dev": false,
  "preview_urls": false
}

これで公開URLをhttps://bringain.comへ一本化。workers.devのアドレスを知っている人が、旧URLから直接アクセスする経路も閉じられた。