はじめに
現在私は未経験からプログラミング学習中で、執筆時点で約5ヶ月が経過しました。
個人開発しているRailsアプリをMVPリリースし、Renderで公開しています。
これまでは Render が発行してくれるhttps://xxxxx.onrender.com
というURLでアクセスしていました。
本リリースに向けて、
- 独自ドメインで公開したい
- HTTPSが有効な状態にしたい
- ポートフォリオとしての完成度を上げたい
と思い、Cloudflareでドメインを取得し、Renderに設定しました。
正直に言うと、DNSまわりが一番怖かったです。
この記事では、
- 自分の備忘録として
- 初学者でも迷わず進められるように
実際の画面ベースで手順をまとめます。
想定読者
- RailsアプリをRenderで公開している方
- 独自ドメインを設定したいけれどDNSが不安な方
- ポートフォリオの完成度を上げたい初学者の方
- Cloudflare × Render の構成で迷っている方
前提
本記事は、私自身の開発環境（Rails × Render × Cloudflare）で実際に行った手順をまとめた備忘録です。
- 環境や構成によっては、手順や設定値が異なる場合があります。
- 他にもより良い方法がある可能性もあります。
- 記事内に登場する
mabatalk.comは、現在私が開発中のアプリのURLです。
あくまで一例として、参考にしていただければ幸いです。
なお、以下の状態を前提としています。
- RailsアプリがRenderにデプロイ済み
- https://xxxxx.onrender.com でアクセスできる
※ Railsのデプロイ方法やRenderの基本操作は扱いません。
全体の流れ
やることは、実は4つだけです。
- Cloudflareで独自ドメインを購入
- CloudflareでDNSレコードを設定
- RenderでCustom Domainを追加
- HTTPS（証明書）が発行されたことを確認
この4ステップです。
1. Cloudflareで独自ドメインを購入
Cloudflareの「Registrar」からドメインを購入しました。
赤枠で囲っている「ドメインを検索」のところに、自分が取得したいURLのドメインを入力します。
例：mabatalk.com
たくさん関連するドメインがでてきます。
希望のドメインを選択して、Purchaseをクリックします。
※ドメイン名によって金額が前後するので、金額は要チェックです。
ログイン前であれば、ログイン画面が表示されます。
Cloudflareアカウント作成前であれば、この画面からログインしてそのまま進んでOKです。
ログイン後、個人情報や支払い情報を入力する画面が表示されるので記入します。
購入時に入力する項目で少し迷いました。
First name / Last name
- First name = 名（下の名前）
- Last name = 姓（苗字）
Address
日本語でいいかわからなかったので、英語で住所入力しました。
- Address line 1: 番地・町名
- Address line 2: 建物名・部屋番号
- City: 市区町村
- State/Province: 都道府県
- Postal Code: 郵便番号
- Country: 国
参照元：英語での「住所」の書き方｜名刺や郵便で使えるビル名・部屋番号の順序
入力後に「This field must contain at least one letter」と出る場合は、
数字だけではなくアルファベットを含めればOKです。
VAT/GST
個人で日本在住の場合、基本的に空欄で問題ありません。
2. CloudflareでDNSレコードを設定
ドメイン購入ができたら、次はDNS設定です。
Cloudflare DNS 画面を開く
購入直後は、DNSレコードが0件の状態です。
ここで、Renderから指定された2つのレコードを追加します。
Render 側で Custom Domain を追加する
Renderから指定される2つのレコードを確認するため、
Renderの自分のサービスプロジェクト内の、
「Settings」＞Custom Domainsの「Add Custom Domain」をクリックします。
Domain nameの箇所に自分のサイトのドメインを入力して「Add Domain」をクリック
ここで表示される「Hostname、Target value」をCloudflare側に入力します。
(※現段階で「Verify」はクリックしません)
CloudflareのDNS Records画面へ入力
さきほど表示された「Hostname、Target value」をCloudflareのDNS Redcordsへ入力します。
レコード①：www用（CNAME）
| 項目 | 値 |
|---|---|
| Type | CNAME |
| Name | www |
| Content | mabatalk.onrender.com(自身のURL) |
| Proxy status | DNS only（グレー雲） |
| TTL | Auto |
これは、www.mabatalk.comを Render のアプリに向ける設定です。
Contentはご自身のアプリのURLをご記入ください。
👉 最終的に通信を受け取るホスト名（別名の本体）
レコード②：ルートドメイン用（Aレコード）
| 項目 | 値 |
|---|---|
| Type | A |
| Name | @ |
| Content | 216.24.57.1(自身のIPアドレス) |
| Proxy status | DNS only（グレー雲） |
| TTL | Auto |
@ はルートドメイン（mabatalk.com）を意味します。
つまり、mabatalk.comを Render の指定IPに向ける設定です。
- Contentは、さきほどのRender側 Add Custom Domain画面の
「Hostname、Target value」の下「target value:」のところに記載されています。
👉 Renderが管理しているサーバーのIPアドレス
よくある勘違い
- 「Search DNS Records」は検索欄であって、追加する場所ではない
- Proxystatus：はオレンジ雲にしない。DNS onlyでOK
Proxy（オレンジ雲）を有効にしなかった理由
CloudflareのDNS設定には「Proxy（オレンジ雲）」という機能があります。
-
これはCloudflareが通信を仲介し、CDNやセキュリティ機能を提供するモードです。
-
しかし今回は、Render側で自動的にSSL証明書を発行させたかったため、Cloudflareは「DNS only（グレー雲）」に設定しました。
-
DNS onlyにすると、通信は直接Renderに届き、Render側で証明書が正常に発行されます。
まずはシンプルな構成で動作確認することを意識しました。
3. RenderでCustom Domainを追加
Renderの自分のサービスプロジェクト内の、
「Settings」＞Custom Domains を確認します。
DNS設定が正しければ、ステータスが
- Verified
- Certificate Issued
という表示に変わります。
「Waiting for DNS」と表示されたら？
削除せずに待ちます。
これは単なるDNS伝播待ちです。
数分〜15分ほど待てば、Verified になります。
ずっと待っても変わらなければ、一度更新してみましょう。
4. HTTPSの確認
ステータスが：Certificate Issued になったら、ブラウザで確認します。
- https://mabatalk.com にアクセス
- 鍵マークが表示される
- www付きのURLでアクセスしても、最終的に wwwなしのURLに自動で飛ばされる
これで完了です。
onrender.com はどうなる？
https://xxxxx.onrender.com はそのまま生きています。
これはRenderの仕様で、特に削除しなくてOKみたいです。
公開用URLを独自ドメインに統一すれば問題ありません。
※ 独自ドメインに変更した場合、GoogleログインなどのOAuth連携を使っている方は、Google Cloud側のリダイレクトURIも忘れずに更新してください。
まとめ
独自ドメイン設定は、
- DNSが怖い
- 失敗しそう
- 消したら終わりそう
という不安がありますが、実際にやることはシンプルでした。
- CNAMEを1つ
- Aレコードを1つ
- RenderでVerify
- 少し待つ
これだけです。
個人開発でも、独自ドメイン＋HTTPSで公開すると、プロダクトとしての完成度が一段上がるイメージです。
同じところで迷っている方の参考になれば嬉しいです。