Cloudflareで買ったドメインをWorkersに割り当ててみた
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はドキュメントが充実していてコンソールも使いやすいのがいいですね!!
別のサービスでドメインを取得している場合の記事も見つけたので参考にどうぞ!
それでは!
Discussion