Shopifyにカスタムドメインを追加する|Cloudflare編

Shopifyにカスタムドメインを追加する|Cloudflare編
Photo by Huy Phan / Unsplash

はじめに

Shopify を活用してオンラインストアを構築すると、まずは無料で利用できる “myshopify.com” ドメインが付与されます。しかし、事業の規模拡大やブランド力を強化するためには、独自ドメインへの移行が欠かせません。そこで注目されるのが、Cloudflare を併用した高度なドメイン管理とパフォーマンス向上施策です。Cloudflare を組み込むことで、セキュリティの向上サイト速度の改善、さらには柔軟な DNS 管理が実現し、EC サイト運営をより専門的な水準へ引き上げられます。

eCommerceサイトのセキュリティとパフォーマンス
サイトのパフォーマンスとセキュリティを優先するeコマースプラットフォームは、より多くの顧客を維持し、より多くの売上を生み出します。サイトの パフォーマンスは、全体的なユーザーエクスペリエンスとコンバージョン率の両方に影響します。 デリケートな顧客データを扱うオンライン小売業者にとって、セキュリティ対策は重要です。

本ガイドでは、Cloudflare で取得あるいは管理しているドメインを Shopify に接続する際に押さえておくべき要点を網羅的に解説します。セキュリティ対策やキャッシュ設定の衝突など、トラブルの発生要因を回避しながら、最適な運用モデルを組み立てるための指針となるでしょう。


まずはドメインを取得または移管しよう

Shopify と Cloudflare を連携するにあたって大前提となるのが、Cloudflare 上でドメインを管理することです。すでに別サービスで取得したドメインを Cloudflare に移管する場合と、Cloudflare を利用して新規ドメインを購入する場合の 2 パターンがあります。

1. Cloudflare でドメインを新規購入する

ドメイン登録と管理 | Cloudflare Registrar
Cloudflare Registrarでドメイン名を安全に登録。 Cloudflareは利益を上乗せせず、ドメイン名を原価で提供します。 Cloudflare Registrarにドメイン名を移管しましょう。
  1. Cloudflare アカウント作成・ログイン: まずは Cloudflare の公式サイトからアカウントを作成し、ログインします。
  2. Registrar(ドメイン登録)タブへ移動: Cloudflare ダッシュボードの Registrar セクションで、新しく取得したいドメイン名を検索します。
  3. 購入可能か確認: 希望のドメインが利用可能であれば、料金が表示されます。Cloudflare の特徴として、更新料も初年度の登録料と同額である場合が多く、明快な料金体系を提供しています。
  4. 決済を完了し登録: カートに追加し、クレジットカードなどの支払い情報を入力して購入を確定します。登録後、Cloudflare 上のあなたのアカウント内にドメインが追加され、DNS 管理も同一のダッシュボードで行えるようになります。

2. 他社ドメインを Cloudflare に移管する

すでに別のレジストラ(お名前.com やムームードメインなど)で購入済みのドメインを、Cloudflare に移管して一本化したい場合は、以下のような手順を踏みます。

Cloudflareのブログによる公式セットアップガイド

  1. ドメインのロック解除: 現在のレジストラ側でドメインロックを解除し、移管(トランスファー)に必要な認証コード(Auth Code 等)を取得します。
  2. Cloudflare に移管リクエスト: Cloudflare ダッシュボードの「Registrar」機能から、移管したいドメインを指定します。認証コードを入力すると移管手続きが進みます。
  3. DNS 設定の引き継ぎ: Cloudflare が自動で DNS を検出してくれる場合が多いですが、必要に応じて手動で設定を確認・修正します。
  4. 移管完了待ち: ドメイン移管は数日~ 1 週間ほどかかることがあります。移管完了後は、Cloudflare 側でドメインの更新や設定が一元管理可能となります。

移管の利点として、Cloudflare 側でセキュリティ対策や CDN 機能をまとめて制御できるほか、更新管理の手間が簡略化されることが挙げられます。デメリットとしては、移管時に数日の停止リスクや、移管不可(取得後 60 日以内のドメインなど)といった制限がある点に留意が必要です。


Cloudflare の主な特長と導入検討の背景

1. Shopify との統合性

Shopify は、裏側で Cloudflare のインフラを一部活用していることが知られています。そのため、両者を併用したときの互換性は比較的良好です。EC サイトに不可欠な高速化や安定稼働のニーズに応えるため、Cloudflare の導入は有効なオプションとなるでしょう。そしてなんといっても、Cloudflareはドメインの購入費を除けば無料で利用可能です。

Shopify & Cloudflare | Customer Story
Shopify reduces complexity while securing and personalizing the online shopping experience for millions worldwide with Cloudflare

2. ドメイン管理コストの最適化

Cloudflare でドメインを取得する場合、購入費用と更新費用が同額で、余計な割引プランや煩わしいアップセルが少ないのが特長です。結果として、運用者は更新時のイレギュラーを回避しやすく、ビジネスに集中できます。料金体系をシンプルに保つことで、経理処理やコスト見込みの精度が向上する利点があります。

低価格ドメイン名 | 低価格ドメイン名レジストラ
Cloudflareは、追加手数料なしで低価格ドメイン名を提供しています。手頃な費用でドメイン名を登録したい方は、Cloudflare Registrarが最良の選択肢である理由をご覧ください。

3. CDN(コンテンツ配信ネットワーク)機能による高速化

Shopify のストアでは、商品画像やスクリプト・スタイルシートなど、様々な静的ファイルが読み込まれます。Cloudflare の CDN は世界各地に分散配置されたエッジサーバーにより、ユーザーに最も近いサーバーからこれらのリソースを配信します。その結果、特に海外からのアクセスに対して顕著な高速化効果が期待でき、ページ離脱率の低減につながる可能性が高まります。検索エンジンの評価という観点でも、サイト速度は無視できない要素です。

CDNサービス、コンテンツ配信ネットワーク
Cloudflare CDNは、次世代の技術を使用して高速かつ信頼性の高いCDNサービスを提供するコンテンツ配信ネットワークです。 クラス最高のCDNの詳細をご覧ください。

4. DDoS 攻撃への防御

大規模な不正アクセス(DDoS 攻撃)は、EC サイトの停止や売上機会の喪失につながります。Cloudflare の無料プランでも一定の防御機能が備わっており、疑わしいトラフィックを自動的にブロックする仕組みが初期段階から利用できます。加えて、Pro や Business プランを導入すれば、より洗練された攻撃検知やフィルタリングが行えるため、販売規模の拡大に合わせたアップグレードがしやすい点も評価に値します。

Cloudflareネットワークサービス | 企業ネットワーキング
Cloudflareのネットワークサービスで、企業ネットワークを接続、保護、高速化しましょう。WAN、SASE、FWaaS、DDoS攻撃対策ソリューション — SD-WAN統合も。

5. 先進的な DNS 管理

Cloudflare は、A レコードや CNAME レコード以外にも、CNAME Flattening、ALIAS レコードなどの拡張機能に対応しており、複雑なドメイン構成にも柔軟に対処可能です。複数のサブドメインを使い分ける場合や、WordPress など別サービスとのハイブリッド運用を行う場合でも、一貫性のある DNS 管理が実現しやすいでしょう。

1.1.1.1 — The free app that makes your Internet faster.
Install the free app that makes your phone’s Internet more fast, private, and reliable.

6. 無料 SSL 証明書の運用

Cloudflare の Universal SSL 機能により、独自ドメインを HTTPS 化するハードルが下がります。ただし、Shopify 自体も SSL を自動発行するため、二重の SSL 設定が競合しないように注意しなければなりません。とりわけ、Cloudflare がプロキシを介在させる場合、通信経路での暗号化モード選択を誤るとリダイレクトループを引き起こすなど、サイトダウンに直結するトラブルが発生しがちです。

無料プランの概要
無料プランでは、無料でのSSL証明書、CDN、DDoS攻撃対策、サイト保護など、必要な基本機能がすべて提供され、ウェブサイトを高速化します。今すぐチェック。

7. 運用管理の一元化

Cloudflare を利用することで、ドメイン取得、DNS レコード編集、CDN 設定、セキュリティ対策といった運用要素を単一プラットフォームで網羅できます。頻繁にサービスを切り替える必要がなくなるため、作業負担の軽減や設定の整合性確保に寄与します。この一元化は、システムアーキテクチャの単純化に資する要素といえるでしょう。

Shopify | Provider guides · Cloudflare for Platforms docs
Learn how to configure your zone with Shopify.

Shopify と Cloudflare を連携するステップ

ここでは、Shopify と Cloudflare の基本的な連携手順を 2 つのステップに分けて解説します。先に Cloudflare 側で DNS レコードを適切に構成し、その後に Shopify が独自ドメインを認識するという流れです。

Shopify独自ドメイン設定方法|外部ドメインをShopifyに接続する方法 - Shopify 日本
Shopifyでのネットショップに独自ドメインを設定する方法を紹介します。Shopifyではmyshopify.comのURLが付与されますが、それを独自ドメインに切り替える方法を、Shopifyでドメイン購入する場合と、外部で取得したドメインをShopifyで利用する場合の2通りで解説しています。

Step 1: Cloudflare 側での DNS レコード設定

  1. Cloudflare にログインし、管理対象のドメインを選択して「DNS」セクションにアクセスします。
  2. 下表のように必要なレコードを追加または編集してください。
タイプ 名前 プロキシ設定
A @ 23.227.38.65 DNS only(灰色)
CNAME www shops.myshopify.com DNS only(灰色)
  • A レコード(@): ルートドメインを Shopify の IP(23.227.38.65)へ向けることで、example.com へのアクセスが Shopify を参照するようにします。必須ではありませんが、ルートドメインと www サブドメインの整合性を取るうえで多くのケースで設定されます。
  • CNAME レコード(wwwなど): www.example.com から Shopify がホストする shops.myshopify.com へバインドします。これにより、閲覧者が www 付きのドメインでアクセスできるようになります。
  • DNS only(灰色雲): 初期設定時はプロキシをオフにするのが推奨されます。そうしないと、Shopify が独自ドメインを検証する際に問題が発生し、SSL の自動発行が「保留」または「失敗」のまま止まる可能性があります。

CNAME Flattening について

Cloudflare の CNAME Flattening は、CNAME レコードを問い合わせる際、実際の IP アドレスを直接返す機能です。しかし、Shopify は CNAME から shops.myshopify.com のホスト名が返却されることを前提にドメインセットアップを行います。Flattening が有効だと、IP が直接返されてしまい、Shopify 側の設定が完了しないケースが報告されています。したがって、Flattening は無効にしておくのが望ましいでしょう。

Step 2: Shopify 側でのドメイン接続

  1. Shopify にログインし、管理画面左下の「設定」→「ドメイン」を選択します。
  2. 既存のドメインを接続する」をクリックし、該当のドメイン名(例: example.com あるいは www.example.com)を入力します。
  3. DNS レコードが正しく反映されていれば、Shopify は数分~最大 48 時間の間に独自ドメインを検証・登録し、SSL を自動的に発行します。
  4. ステータスが「接続済み」かつ SSL が「有効」になったら、独自ドメインでストアにアクセスして問題ないかテストしましょう。

補足

  • www をメインのアクセス経路とするのか、ルートドメインをメインにするのかは議論がありますが、Shopify の管理画面で簡単にプライマリードメインを変更できます。使用しないほうのドメインはリダイレクト先にすることで重複を防ぐのが一般的です。
  • DNS の伝播には地域差があるため、設定の有効化に数時間以上を要する場合があります。焦らずに待ってから再度ステータスを確認するとよいでしょう。

相互運用時の注意事項

Shopify と Cloudflare を併用する際は、以下の要素に留意して運用を進めることでトラブルを回避しやすくなります。

1. CDN(キャッシュ)競合

Shopify は独自のキャッシュロジックを備えており、製品画像やスクリプトの配信を最適化します。ShopifyはCloudflareのインフラを利用しているため、二重に使うことができません。そのため適切にセットアップがされている場合、Cloudflare のプロキシ(オレンジ雲)を有効化することができないはずです。これは二重キャッシュ状態となり、更新が反映されにくくなったり、カート機能でセッション問題が起こる可能性があります。

2. ページルールやリダイレクト設定

Cloudflare のページルール機能を活用すれば、特定ディレクトリのキャッシュ戦略を細かく制御したり、特定のパスを別の URL にリダイレクトするなど、柔軟な運用が可能です。ただし、Shopify にも独自のリダイレクト機能(オンラインストア → ナビゲーション → URL リダイレクト)があり、両者を重複設定すると予期しない挙動が生じる場合があります。Cloudflareではプロキシを利用できない上Cloudflareの機能を積極的に使うことは避けた方がいいでしょう。


トラブルシュート: 代表的な問題と具体策

  1. SSL が長時間保留状態で発行されない
    • 原因: Cloudflare 側でプロキシ(オレンジ雲)が有効のまま。Shopify が独自ドメインを正しく検証できず、証明書が発行されない。
    • 対策: A レコードと CNAME レコードを DNS only(灰色雲)にして設定を保存。Shopify の管理画面で SSL が有効化されるまで待機し、その後オレンジ雲に切り替えるか検討。
  2. リダイレクトループが発生
    • 原因: Cloudflare の暗号化モードが “Flexible” になっており、HTTP ⇄ HTTPS 切り替えを双方が行い合っている。
    • 対策: 暗号化モードを “Full” または “Full (strict)” に即時変更し、Shopify との通信を完全 HTTPS 化する。
  3. 特定ページで 404 エラーが頻発
    • 原因: 不要な DNS レコードが混在している、または Shopify 側でまだドメイン接続が完了していないなどの理由で正しく参照できていない。
    • 対策: Cloudflare の DNS タブから古い A レコードや CNAME を削除し、Shopify 上で「接続済み」ステータスを確認後に再テスト。
  4. 静的リソースの読み込みが遅い・不安定になる
    • 原因: Cloudflare と Shopify が同時にキャッシュ管理を行い、競合するケース。または、Cloudflare の海外ノードを介して配信されることで遅延が発生している可能性も。
    • 対策: 一時的に DNS only に切り替え、読み込み速度を比較。大幅な改善がみられる場合は、Cloudflare 側のキャッシュやルーティング設定を見直す必要がある。
  5. CNAME Flattening による認証エラー
    • 原因: ShopifyはDNSにCNAMEレコードでサブドメインを返却することを期待します。Flatteningされた場合Shopify が期待するホスト名ではなく IP アドレスが返却され、セットアップが失敗。
    • 対策: Cloudflare の DNS 設定画面で Flattening をオフにし、CNAME を標準的な形で維持する。

総括: 安定性と拡張性の両立

Cloudflare と Shopify を組み合わせることで簡単にあなたのShopifyショップにあなただけのドメインを追加することができます。

特に大規模な販売サイトやマルチロケーション対応が求められる事例では、Cloudflare の多彩な機能を活用することで、グローバル規模の高負荷にも耐えうる柔軟なインフラを構築可能です。じっさいにShopifyはそうした部分を見込んでバックエンドにCloudflareを利用しています。気づかないうちにその恩恵にあずかっていたわけです。

Shopify × Cloudflare の連携がうまく機能すれば、サイトの信頼性や管理を強化できます。事前の適切な設計と検証を行い、トラブルなく導入を進めることで、オンラインストアが大きく発展していくでしょう。

Read more

TailscaleのSubnet Routesを消す

SynologyのNASにTailscaleを導入し、便利に使っている。 TailscaleにはSubnet routersという機能がある。 これは、Tailscaleネットワークに接続されたデバイスが、そのデバイスが接続されているローカルネットワーク(サブネット)全体へのアクセスを他のTailscaleデバイスに提供できる機能だ。つまり、Subnet routerとして設定されたデバイスを経由することで、Tailscaleネットワーク上の他のデバイスから、そのローカルネットワーク内の機器にアクセスできるようになる。 Subnet routers · Tailscale DocsUse subnet routers to give devices outside your local network access to services within specific subnets. Extend your private network with Tailscale.Tailscale 便利そうだなと思って設定をしてみたものの、結局使うことがなかった。 公式ドキュメント

By Sakashita Yasunobu

Boids

群れに指揮者はいない 鳥の群れは、誰かが指示を出しているわけではない。魚の群れも同じ。それぞれが周囲を見て、少しだけ動く。その繰り返しが、全体として秩序ある動きを生む。 これを1986年にCraig Reynoldsがコードで再現した。名前は Boids(bird + oid)。個体に与えるルールは3つだけ。 1. Separation ── 近すぎたら離れる 2. Alignment ── 周囲と同じ方向を向く 3. Cohesion ── 群れの中心に寄る これだけで、群れは群れらしく動く。 なぜ作ったか 群れの動きは、見ていて飽きない。 * 単純なルールから複雑な動きが生まれる ── 創発(emergence)の典型例。設計していないのに、設計したかのように見える。 * 自分のブログに置きたかった ── 静的なページに、動くものがあると空気が変わる。 * Web Components で作りたかった ── どこにでも持っていける部品として。 設計の話 見えないときは止める 画面外でアニメーションを回し続けるのは無駄。Inte

By Sakashita Yasunobu

Days Elapsed

一年を「面」で見る 一年は365日。数字で見ると多いけど、並べてみると案外少ない。 12ヶ月を並べて、過去を塗りつぶして、今日を光らせる。それだけのカレンダーを作った。進捗バーが「一次元」なら、これは「二次元」の進捗表示。 Year Progress一年は50週ちょっとしかない 2026年を週で数えると、52週とちょっと。 カレンダーで見ると長そうなのに、週で数えると急に短くなる。そんな感覚を形にしたくて、このページの上の方に進捗バーを置いた。 やっていることは単純で、「今年が何%進んだか」をリアルタイムで表示しているだけ。 なぜ作ったか 理由は3つある。 1. 時間を「量」として見たかった ── イベントや予定ではなく、単純に「どれだけ経ったか」を数値で見たかった。 2. 目に見える形にしたかった ── 抽象的な「一年」を、動く数字に落とすとどう感じるか試したかった。 3. 自分の場所に置きたかった ── 誰かのツールを借りるのではなく、自分のブログに自分で作ったものを置きたかった。 実装の話 せっかく作るなら、

By Sakashita Yasunobu