WebflowにCloudflare経由でサブドメインを追加する方法
WebflowとCloudflareは、それぞれWebサイトのデザインとパフォーマンスの向上に役立つ強力なツールです。
Webflowで作成したWebサイトをCloudflare経由でサブドメインに追加することで、サイトの速度やセキュリティをさらに向上させることができます。
今回の記事では、Cloudflareを経由してWebflowにサブドメインを追加する具体的な手順を解説します。
最初に準備すべきこと
作業を始める前に、以下の準備を整えておきましょう。これにより、スムーズな設定作業が可能になります。
Webflow
まずWebflowのアカウントを作成します。また、サブドメインの利用は有料のため、有料のサイトプランにアップグレードしておきましょう。
Cloudflare
サブドメインのDNS管理を行うため、Cloudflareのアカウントを作成します。
Webflowでサブドメインを設定する
最初に、Webflowでサブドメインを設定する手順について説明します。
ホスティング設定に移動
プロジェクトダッシュボードの「Settings」タブをクリックし、「Hosting」セクションに移動します。
カスタムドメインの追加
まず「Add a Custom Domain」をクリックします。次に「Manually add domain」をクリックして追加したいサブドメインを入力します。
※今回は「recruit.igni7e.jp」のサブドメインに接続する。
CloudflareでDNSレコードを設定する
サブドメインを入力して接続すると、「Verification required（検証が必要です）」というメッセージとDNSレコードの情報が表示されるのでCloudflareのDNS設定にも追加する必要があります。以下では、DNSレコードの設定方法について詳しく解説します。
TXT（テキストレコード）の追加
「Verification required」に表示されたDNSレコード情報をそれぞれコピーします。
- Type：TXT
- Name：_webflow.recruit
- Content（required）：one-time-verification=XXXXXXXXXXXXXXXXXXXX
※Content（required）では、Webflowで表示されたDNSレコード情報のValueに記載されたコードをコピーしましょう。
CNAMEの追加
1. DNSレコード情報のコピー
「Verification required」に表示されたDNSレコード情報をそれぞれコピーします。
- Type：CNAME
- Name：recruit
- Target（required）：proxy-ssl.webflow.com
※Target（required）では、Webflowで表示されたDNSレコード情報のValueに記載されたコードをコピーしましょう。
2. Proxy Statusの変更
Cloudflareでは、Proxy StatusをDNS onlyにしておくことがおすすめなので変更しましょう。
コネクトの確認
Webflowのダッシュボードで「Verify Domain」ボタンをクリックし、「Custom domain verified」と表示されたら、Webflowのサブドメインが正常に設定されたことが確認できます。
最後にサブドメインをブラウザで開き、サイトが正しく表示されるか確認したら「Publish」ボタンを押して完了となります。
まとめ：Webflow×Cloudflareでより高速で安全なWebサイトを構築しよう
今回の記事では、WebflowにCloudflare経由でサブドメインを追加する方法について詳しく解説しました。
WebflowとCloudflareの強力な組み合わせにより、サイトのパフォーマンスとセキュリティを向上させることができます。
これらを参考に、WebflowにCloudflare経由でサブドメインを追加してみましょう。
サブドメインの追加に関して不明点があれば、Webflowの公式サポートや弊社にお気軽にお問い合わせください。
