Shopifyで"CNAMEレコードがありません"と表示される原因とその解決法(Cloudflare編)

Shopifyで"CNAMEレコードがありません"と表示される原因とその解決法(Cloudflare編)
Photo by 傅甬 华 / Unsplash

はじめに

Shopifyで独自ドメイン(今回は shop.sakashita.page)を接続した際に、「CNAMEレコードがありません」というエラーが出続けて困った経験、ありませんか?

実際に私もこのエラーに直面し、Cloudflare側の設定を見直すことで解決したので、その詳細と原因、対処法をこの記事でまとめます。


結論:Cloudflareの"CNAMEフラット化"が原因だった!

Shopifyの管理画面でCNAMEレコードが正しく設定されているにもかかわらず警告が出る原因は、 Cloudflareの"CNAMEフラット化(CNAME Flattening)"という機能が有効になっていたからでした。

この機能が有効だと、CNAMEレコードの“名前”を返すのではなく、解決済みのIPアドレス(Aレコード)を返してしまうため、 Shopify側では「CNAMEが見つからない」と判断されてしまいます。


CNAMEフラット化とは?

CNAME(Canonical Name)レコードは、あるドメイン名を別のドメイン名に別名として割り当てる仕組みです。

例えば:

shop.example.com → shops.myshopify.com

このように“名前 → 名前”の関連を作るのがCNAMEですが、DNSの仕様上、ルートドメイン(apex domain)にはCNAMEを使えないという制約があります。

そこで登場するのがCNAMEフラット化です。

CloudflareのようなDNSサービスでは、ユーザーがCNAMEを設定していても、外部からの問い合わせに対してはIPアドレス(Aレコード)として返すことができます。 これにより、

  • ルートドメインでもCNAMEのような運用ができる
  • ブラウザのレスポンスが高速化する という利点があります。

ただし、“CNAMEがあるかどうか”をチェックするサービス(今回のShopifyなど)には、CNAMEが存在しないように見えてしまうというデメリットがあります。

メリット:

  • 高速な名前解決が可能
  • ApexドメインでもCNAME的な挙動を実現できる
  • 一部のCDNやクラウドサービスと相性が良い

デメリット:

  • CNAMEレコードがクライアントから見えない
  • Shopifyのように“CNAMEの存在”を前提とする仕組みと相性が悪い

私の設定環境|サブドメインのセットアップ

そもそもですがサブドメインのセットアップは正常に行われていることを確認してください。以下の公式ページを参考にしてください。

そして以下が私の設定環境です。

  • ドメインプロバイダー:Cloudflare
  • 使用ドメイン:shop.sakashita.page
  • Shopifyストアの接続先:shops.myshopify.com
  • DNSレコード:
    • shop サブドメインに CNAME を設定
    • CNAME先は shops.myshopify.com
    • プロキシ(オレンジの雲):オフ(DNSのみ)
    • それでも警告が消えない状態でした

試したこと一覧(すべて失敗)

  • Aレコードを使ってみる → Shopifyは動くが、警告は消えず
  • サポートに連絡 → 「www を使え」など的外れな回答
  • ローカルのDNSキャッシュ削除 → 解決せず

解決した方法

Cloudflareの設定画面にある以下の項目をオフにしました:

"すべての CNAME レコードの CNAME フラット化"

これをオフにすることで、DNSクライアントやShopify側からもCNAMEが明示的に見えるようになり、 即座にShopify管理画面上の警告が消えました。

成功画面のキャプチャ

フラット化ってそんなに悪いの?

実はそんなことはなく、通常のWebサイト運営では高速化や安定性のために有効な機能です。 ただし今回のように、「CNAMEの存在」を検出するシステムとの相性が悪いことがあるというだけ。


まとめ

  • Shopifyが"CNAMEがない"と表示するのはCNAMEレコードがないのではなく、見えていないだけの可能性がある
  • Cloudflareを使っている場合は"CNAMEフラット化"をオフにすることで解決できる
  • Shopifyサポートよりも自力で調査した方が早い場合も…(笑)

おまけ:技術的検証に使ったコマンド(Windows PowerShell)

# DNSキャッシュをクリア
Clear-DnsClientCache

# CNAMEレコードの確認
Resolve-DnsName shop.sakashita.page -Type CNAME

# Aレコードの確認
Resolve-DnsName shops.myshopify.com -Type A

この記事が役立つ人

  • Shopifyでカスタムドメインを使っていて、接続はできているのにエラーが出る人
  • Cloudflareを使ってDNSを管理している人
  • サポートに問い合わせたけど解決しなかった人

もしこの記事が役立ったら、ぜひシェアやブックマークをお願いします! あなたの時間を少しでも節約できますように ☕

Read more

なぜ静止画に4:2:2は存在しないのか

なぜ静止画に4:2:2は存在しないのか

はじめに 動画のコーデックを扱う際、「4:2:2」や「4:2:0」といった表記を目にすることが多い。これらはクロマサブサンプリング(色差サブサンプリング)のパターンを示す記法である。しかし、静止画フォーマットであるJPEGにおいても同様のサブサンプリングが適用されていることは、意外と知られていない。 本稿では、クロマサブサンプリングの数理的基礎から、各画像フォーマットにおける実装まで、技術的に正確な理解を構築することを目的とする。特に、「なぜ写真の世界では4:2:2がほとんど存在しないのか」という問いに対して、技術的・歴史的観点から考察する。 色空間とサブサンプリングの分離 クロマサブサンプリングを理解するには、まず「なぜ色情報を間引いても画質劣化が少ないのか」という根本的な問いに答える必要がある。この答えは、人間の視覚系の生理学的特性に深く根ざしている。 RGB色空間の特性 RGB色空間は、赤(R)・緑(G)・青(B)の3つの加法混色成分によって色を表現する色空間である。これは、ヒトの網膜に存在する3種類の錐体細胞の分光感度特性に対応している。 * L錐体(長波長

By Sakashita Yasunobu
ブログで使うWeb用の画像のフォーマットについて検討する

ブログで使うWeb用の画像のフォーマットについて検討する

背景と目的 普段から写真撮影を行っていると、画像ファイルが占める容量は無視できない規模になる。現在はNASとAmazon Photosに保存しているため、容量的な制約は少ないものの、ファイルサイズが小さくできるのであれば小さくしておく方が合理的だ。特にWeb公開を前提とする場合、ファイルサイズはアップロード・ダウンロード、そしてページ表示時間に直結するため、可能な限り小さい方が望ましい。 これまでは現像ソフトからJPEG品質100で出力し、Web用途など容量削減が望ましいケースではWebPに変換してきた。RAWファイルは別途バックアップしてアーカイブとして保存している。目視で画質劣化が認められないのであれば、全てWebPで保存しても問題ないのではないかと考えたが、より優れたフォーマットが存在する可能性があるため、現在利用可能な画像フォーマットについて調査した。 主要な画像フォーマットの特徴 JPEG 最も広く普及している画像フォーマットで、互換性に関する信頼性は高い。しかし、規格自体が古く、現代的な圧縮技術と比較すると効率は劣る。 JPEGについて知っておくべきすべての

By Sakashita Yasunobu
WebpとAVIFをWindowsでローカルに使ってみる

WebpとAVIFをWindowsでローカルに使ってみる

ブラウザツールはいろいろあるのだが、ローカルでやるのがやはり便利なのでその方法を模索する。 sharpで画像を一括圧縮、WebP・AVIF変換する - Web production note画像変換ライブラリsharpを用いて、画像をまとめて圧縮や変換(Webp・AVIF・JPG・PNG)できる方法をまとめました。Web production note 非公式なコマンドラインツールなどもあるが、開発が最新のバージョンに追随していなかったりするので、おとなしく公式実装を使うのがよさそう。 PNGやJPEG画像をAVIFフォーマットへ変換してくれるコマンドラインツール「cavif」がリリース。PNGやJPEG画像をAVIFフォーマットへ変換してくれるコマンドラインツール「cavif」がリリースされています。詳細は以下から。AAPL Ch.AAPL Ch. Webp WebpはGoogleが作ったナウい画像形式。古臭いJPEGに比べて画質を保ったまま小さくできるのがウリ。 WebpのダウンロードはGoogle公式ページの「Windows版をダウンロード」から。 WebP のダ

By Sakashita Yasunobu
Webpの向き不向き

Webpの向き不向き

WebpにはLosslessとLossyの2つのオプションがある。常識的に考えて、Losslessはファイル容量がデカくなりがちで、ファイル容量を小さくしたければLossyを使えばいいと思うが、意外とそんなことないので、用途を考えて使い分けましょうという話。 ウェブ用の画像形式 | WebP | Google for Developersウェブ用により小さい画像を作成するこの画像形式の詳細や、G4 Converter のダウンロードやサポートのためのリンクを確認できます。Google for Developers 最近、ScanSnapのix1300で本をスキャンするようになった。白黒の最高解像度でスキャンをする場合、PDFで画像が出力される。PDFよりも汎用的な画像ファイルのほうが都合がいいので、pdfimagesで画像を抜き出している。 PDFから画像をTiffで抜き出す PDFが一個だけ $base = (Get-Item *.pdf).BaseName; pdfimages -tiff *.pdf temp; Get-ChildItem temp-*.tif | F

By Sakashita Yasunobu