お名前.com × Cloudflare × Heroku で「wwwなし → wwwあり」リダイレクト＆SSL化してみる

はじめに

勉強のために個人開発しているをしているのですが、「https://my-app.herokuapp.com ではなく、自分のドメインで公開したいなあと思いました。
さらにさらに、「wwwなしでアクセスする場合も、安全にwww付きURLに統一できたらいいな」とも思いました。
お名前.comで取得した独自ドメインを使って、Herokuアプリに HTTPS（SSL）で接続 し、Cloudflareでセキュアに統一運用 するという工程、トラブルを交えてまとめて備忘録として残します。

最終的にできたこと

https://my-app.com（wwwなし）→ 自動で https://www.my-app.com（wwwあり）に転送
すべてのアクセスが SSL（HTTPS）で暗号化
Cloudflare経由で高速化、DDoS防御
SSL証明書は自動更新

前提条件

項目	状態
Heroku アカウント	作成済み、アプリ（my-app）がデプロイ済み
お名前.com ドメイン	取得済み（例：my-app.com）
ターミナル操作	macOS / Linux で実行可能
Cloudflare アカウント	これから作成します

STEP 1：Heroku側でカスタムドメインを登録

まず、Heroku側でドメインを紐付ける

heroku domains:add my-app.com
heroku domains:add www.my-app.com

登録状況を確認

heroku domains

出力例

Domain Name          DNS Record Type  DNS Target
───────────────────  ───────────────  ──────────────────────────────────────────────
my-app.com           ALIAS or ANAME   example-root-0000000.herokudns.com
www.my-app.com       CNAME            example-www-0000000.herokudns.com

重要： この DNS Target（2つのURLS） をメモする。この後、Cloudflareとお名前.comで何度も使用するので。

STEP 2：Cloudflareアカウントを作成

Cloudflareは「CNAME Flattening」という技術に対応しており、ルートドメイン（wwwなし）でも CNAME を設定できる。

https://dash.cloudflare.com/ にアクセス
無料アカウントを作成（Google / Apple / GitHub / メールで可能）
ログイン

STEP 3：CloudflareにドメインをAdd（追加）

Cloudflare ダッシュボードで

「Add a site」をクリック
my-app.com を入力
「Add site」をクリック
プランは Free Plan（無料） を選択
「Continue」をクリック

Cloudflareが既存DNS設定をスキャンしようとしますが、タイムアウトになることもある。
その場合は「手動で入力」を選んで進めてよい。

STEP 4：Cloudflare側でHeroku用のDNSレコードを追加

DNS管理画面で、Heroku向けのCNAMEレコードを 2つ追加

4-1. ルートドメイン用（my-app.com）

項目	値
タイプ	CNAME
名前	@
ターゲット	example-root-0000000.herokudns.com
プロキシ	🟠 Proxied（オレンジ）
TTL	オート

重要： プロキシは 必ずON（オレンジ雲） にする。Cloudflareのリダイレクトルールが有効になる。

4-2. www付きドメイン用（www.my-app.com）

項目	値
タイプ	CNAME
名前	www
ターゲット	example-www-0000000.herokudns.com
プロキシ	🟠 Proxied（オレンジ）
TTL	オート

保存すると、DNSレコード一覧に以下のように表示される

@   CNAME   example-root-0000000.herokudns.com       Proxied
www CNAME   example-www-0000000.herokudns.com        Proxied

STEP 5：Cloudflareのネームサーバーをお名前.comに設定

Cloudflareの DNS タブを見ると、ページ下部に以下が表示される

Cloudflareネームサーバー

liberty.ns.cloudflare.com
vicky.ns.cloudflare.com

このネームサーバーを、お名前.com側に設定

お名前.com 側の操作手順

お名前.com Navi にログイン
メニューから「ドメイン」→「ネームサーバー / DNS」→「ネームサーバーの設定」
ドメイン一覧から my-app.com を選択
「その他のサービス」または「カスタムネームサーバー設定」を選択
以下を入力

ネームサーバー1：liberty.ns.cloudflare.com
ネームサーバー2：vicky.ns.cloudflare.com

「確認」→「設定する」をクリック

** 反映時間：** 2〜6時間（最大72時間）らしい。（私の場合は、10分もかからなかった）

お名前.comから「ネームサーバー変更完了」メールが届く

STEP 6：Cloudflareでリダイレクトルールを作成（wwwなし → wwwあり）

Cloudflareダッシュボードで

左メニューから「Rules」→「Redirect Rules」をクリック
「Create new Single Redirect」をクリック
以下の内容を設定

項目	設定値
ルール名	Redirect root to www
受信リクエストが一致する場合	カスタムフィルター式を選択
フィルター式	`http.host eq "my-app.com"`
アクション	URL リダイレクト
タイプ	動的
式（Expression）	`concat("https://www.my-app.com", http.request.uri.path)`
ステータスコード	301（恒久リダイレクト）
クエリ文字列を保持	✅ チェック

「保存してデプロイ」をクリック

式の意味

http.host eq "my-app.com" → wwwなしでアクセスされたリクエストだけを対象
concat("https://www.my-app.com", http.request.uri.path) → パス（例：/about）を保持したまま www 付きに転送
301 → 恒久的リダイレクト

STEP 7：DNS反映確認

Cloudflareのドメイン管理画面では、ネームサーバーが反映されるまで「無効なネームサーバー」という警告が出ることがある。

数時間後、以下のように自動で「Active（有効）」に変わる。

Status: Active
Nameservers: liberty.ns.cloudflare.com, vicky.ns.cloudflare.com

ターミナルでも確認できる

dig my-app.com
dig www.my-app.com

期待される出力

my-app.com. 300 IN CNAME example-root-0000000.herokudns.com.
www.my-app.com. 300 IN CNAME example-www-0000000.herokudns.com.

STEP 8：HerokuでSSL（HTTPS）を自動有効化

CloudflareのDNS反映が完了したら、Heroku側でSSL証明書を自動発行

SSL自動管理を有効化

heroku certs:auto:enable

出力例

=== Your certificate will now be managed by Heroku.
Check the status by running heroku certs:auto.

SSL発行状況を確認

少し待ってから確認（5〜15分程度）

heroku certs:auto

成功時の出力

=== Automatic Certificate Management is enabled on my-app

Renewal scheduled for 2026-12-16 12:38 UTC.

Certificate details:
Common Name(s): www.my-app.com, my-app.com
Expires At:     2027-01-16 12:38 UTC
Issuer:         /CN=R12/O=Let's Encrypt/C=US
Starts At:      2025-10-18 12:38 UTC

 Domain                   Status           
 ────────────────────── ──────────────── 
 www.my-app.com          Cert issued 
 my-app.com              Cert issued

両方とも「Cert issued」なら大丈夫

STEP 9：リダイレクト確認

ターミナルで以下を実行

curl -I https://my-app.com

成功時の出力

HTTP/2 301 
date: Sun, 19 Oct 2025 12:17:04 GMT
content-type: application/x-msdownload
location: https://www.my-app.com/
server: cloudflare
via: 2.0 heroku-router
cf-cache-status: DYNAMIC
cf-ray: 991035ccfff8d480-NRT

確認ポイント

項目	成功の目印
HTTP ステータス	301 → 永続リダイレクト成功
location ヘッダ	`https://www.my-app.com/` → 転送先が正しい
server	cloudflare → Cloudflare経由でアクセス
via	heroku-router → Herokuバックエンドが稼働

STEP 10：ブラウザで動作確認

ブラウザで以下にアクセスして、すべてが正常に機能しているか確認

https://my-app.com

→ 自動で以下にリダイレクトされる

https://www.my-app.com

SSL通信ができているみたい

起こったエラーについて

エラー：このルールはあなたのトラフィックには適用されない可能性がありますという表示

原因： ルートドメイン（@）が「DNS only（グレー）」のままでCloudflareプロキシが有効になっていない

対処法：

Cloudflare → DNS タブを開く
@（ルートドメイン）のレコードを探す
雲アイコンをクリックして ☁️ グレー → 🟠 オレンジ（Proxied）に変更
保存（自動）

エラー：「Unable to resolve DNS」

原因： ネームサーバーがまだ反映されていない、または DNS設定が誤っている

対処法：

ネームサーバー反映まで 24〜72時間待つ
Cloudflareのプロキシ設定が両方とも 🟠 オレンジになっているか確認
反映後に再試行

heroku certs:auto:refresh

エラー：「ブラウザで接続できません」

原因： DNS反映待ちまたはCloudflareの設定タイミング

対処法：

1〜2時間待つ
ブラウザキャッシュをクリア（Cmd+Shift+Delete）
別のブラウザで試す

最終構成図

ユーザーが https://my-app.com にアクセス
            ↓
       Cloudflareが受け取る
            ↓
   リダイレクトルール実行
            ↓
https://www.my-app.com にリダイレクト
            ↓
    Cloudflareプロキシ（SSL）
            ↓
Heroku上のRailsアプリ
            ↓
   ユーザーにレスポンス返却

参考リンク

初学者のため、間違えていたらすいません。