🍣

Cloudflareで買ったドメインをWorkersに割り当ててみた

2025/01/16に公開

Cloudflareにてドメインを契約してみました!
今回はNuxtの初期ページをこのドメインで公開してみようと思います!

これからドメインを契約するか考えている方の参考になれば幸いです。

NuxtをWorkersでデプロイ

Cloudflare Docsの検索窓で「Nuxt」と検索すると、PagesとWorkersの両方でNuxtのプロジェクトを作成するためのページがヒットします。

実際のWorkersでNuxtのプロジェクトを作成するページはこちら

ページを開くとプロジェクトを作成するコマンドが書いてあるのでローカルで実行してみます。
my-nuxt-appの部分がプロジェクト名になるのでここは任意で変えましょう!

今回はdomain-testに変えて実行します。

# プロジェクト名は任意で変更
npm create cloudflare@latest my-nuxt-app -- --framework=nuxt --experimental

実行するとデプロイするかを聞かれます。
今回は初期のページが表示できたらOKなのでYesを選択しました。

╭ Deploy with Cloudflare Step 3 of 3
│
╰ Do you want to deploy your application?
  Yes / No

というわけでデプロイできました!
(1コマンドしか実行していない・・・素晴らしい!)

手動でドメインを割り当てる

デプロイしたワーカーのコンソールに移動して、「設定」タブをクリックします。

「ドメインとルート」を開きます。

「+追加」をクリックして、「カスタム ドメイン」を選択します。

Cloudflareにて契約したドメインを入力して、「ドメインを追加」をクリックします。

すると、先程のドメインとルートの項目に追加したドメインが増えています。

登録したドメインにアクセスすると・・・
Nxutの初期ページが表示されていることが確認できました!

workers.devプレビュー URLは必要なくなったので無効化します。

wrangler.tomlから設定する

以下のようにwrangler.tomlを設定することで上での設定と同じにすることができます。

#:schema node_modules/wrangler/config-schema.json
name = "domain-test"
compatibility_date = "2025-01-09"
main = "./.output/server/index.mjs"
assets = { directory = "./.output/public/", binding = "ASSETS" }

# 追加
preview_urls = false
routes = [
  { pattern = "hayatokojima.com", custom_domain = true }
]

[observability]
enabled = true

おわりに

特に迷うことなく設定することができました!
Cloudflareはドキュメントが充実していてコンソールも使いやすいのがいいですね!!

別のサービスでドメインを取得している場合の記事も見つけたので参考にどうぞ!
それでは!

https://qiita.com/akitkat/items/8aeaee639ba5f2bda141

Discussion