MuuMuuDomeain で IDN を取得して Render.com の Web アプリのカスタムドメインとして適用した際のメモ

:::note warn
* 大変内容が荒くて申し訳ございませんがメモとして参考程度に見てください
* MuuMuuDomain の申込内容でもしかしたら不要な設定があるかもしれません
:::

# 前提について
1. Render.com を言語 Ruby で利用
1. Rails の Web アプリをデプロイ済み
    * `XXXXX.onrender.com` のようなデフォルトの URL を押下すると問題なく Web アプリが表示される状態
1. 独自ドメイン取得には MuuMuuDomain さんを利用

https://muumuu-domain.com/?utm_source=google&utm_medium=cpc&utm_content=2305domain&utm_campaign=search&gad_source=1&gclid=CjwKCAiArva5BhBiEiwA-oTnXVJd4Qzw6lOqFkvVei9Xf9aLlHnDL7Z5ANLLrmgfnldYWQC287djURoCG0MQAvD_BwE

# 手順の流れ
## はじめに
* 基本は Render.com から提示されている [Custom Domains on Render](https://docs.render.com/custom-domains) というマニュアル準拠で問題ありません
    * 今回は IDN なのでマニュアル内の注意書きにある通り、 **Punycoder に変換する** 点は念頭に置いておく必要あり
# 【1】プロバイダー側（今回は MuuMuuDomain 利用）
## 独自ドメインの取得
1. MuuMuuDomeain さんの公式ページから取得したいドメインを検索して取得する設定に入る
    * この記事では「サンプル.com」というドメインを検索して取得しようとしております
1. 「高度な設定：ネームサーバー（DNS）を設定する」ボタンを押下。その後、"ムームーDNS"を選択して申し込み
1. 取得したドメインについて確認できるダッシュボードが確認できるようになる

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3518714/ca90d838-201e-fd8c-649d-56c35ef4ecbe.png)

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3518714/a9003f07-b76e-8a47-5d7b-c5b95f19f398.png)

:::note warn
この時点で登録したメールアドレス宛に何点かメールが届くので申込内容の不備が無いかを確認しておくことを強くオススメします
:::

## （重要）この後使います【メモ1】
1. `ドメイン管理 ＞ ドメイン操作 ＞ ドメイン一覧` を選択
1. 取得したドメイン名をクリックして詳細を開く
1. ドメイン情報の **PUNYコード** をメモする
    * これを以下【メモ１】と呼ぶ

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3518714/80bc480b-f6a7-40c0-8067-a936c66c83d4.png)


# 【2】Render.com 側
## カスタムドメインを設定する

:::note info
[1. Add your domain in the Render Dashboard](https://docs.render.com/custom-domains#1-add-your-domain-in-the-render-dashboard) からの手順を参考に進めていきます
:::

1. [+ Add Custom Domain] ボタンを押下
1. 【メモ1】を入力してから [Save] ボタンを押下
    * ここまでで [1. Add your domain in the Render Dashboard](https://docs.render.com/custom-domains#1-add-your-domain-in-the-render-dashboard) の手順３まで進行

:::note info
[1. Add your domain in the Render Dashboard ＞ [4]Click Save. Your custom domain now appears in the list:](https://docs.render.com/custom-domains#1-add-your-domain-in-the-render-dashboard) になります。画像も提示されているので併せてご確認ください。
:::

* 以下の２種類の文言が表示されたのが確認できたかと思います

```:文言A
Add a CNAME record for www pointing to
[現状のWebアプリのURL].onrender.com
```

```:文言B
Add an ANAME or ALIAS record pointing to
[現状のWebアプリのURL].onrender.com

If your DNS provider does not support ANAME
or ALIAS records, use an A record pointing to
216.24.57.1
```

:::note alert
文言Bにある通り "ANAME"、"ALIAS" がサポートされていないわけでは無いのですが、"A" を選択して `216.24.57.1` をコピペするだけで済むならそれの方が簡単と思って "A" にしております

:::

# 【3】再びプロバイダー側へ
## DNSレコードの設定更新

:::note info
* 以下の手順を基に作業を進めます
    * [ムームーDNSカスタム設定](https://support.muumuu-domain.com/hc/ja/articles/360046453854-%E3%83%A0%E3%83%BC%E3%83%A0%E3%83%BCDNS%E3%82%AB%E3%82%B9%E3%82%BF%E3%83%A0%E8%A8%AD%E5%AE%9A)
:::

1. `ドメイン管理 ＞ ドメイン操作 ＞ ムームーDNS` を選択
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3518714/16ef9e5b-956c-4e16-d07b-1ba2da8fb37d.png)

1. 対象のドメイン名の行にある [変更] ボタンを押下する
1. [カスタム設定] ボタンを押下
1. "設定２"の設定をしていく<br> ⇒ **設定１は変更なし**

:::note warn
設定１ ... 内部での連携関連
設定２ ... 外部サービスとの連携関連
:::

:::note info
以下の通り、設定２に設定内容を入力してください

| サブドメイン | 種別 | 内容 |
|:--|:--|:--|
| (空欄でOK) | A | 216.24.57.1 |
| www | CNAME | 現状の Render.com にデプロイした Web アプリの URL |

※"内容"の部分はタイポしないように Render.com からしっかりコピペしてください
:::

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3518714/a277e445-9789-4472-3c7d-59a5f37b859a.png)

1. ここまで入力したら [セットアップ情報変更] や [OK] ボタンを押して内容を確定する
1. ここまで MuuMuuDomain 側の設定は完了となります

# 【4】再び Render.com 側へ
* しばらく待つと以下マニュアルにあるように `Verified` といった表示に変われば成功です 

https://docs.render.com/custom-domains#:~:text=If%20verification%20succeeds%2C%20Render%20issues%20a%20TLS%20certificate%20for%20your%20domain%20and%20updates%20the%20verification%20status%3A

手順は以上になります

# 注意事項
## 1. 一連の設定後は 1 日以上は待った方が良い
* 以下の引用の通り、カスタム設定をした場合には設定の反映に時間がかかる
    * 数時間ではなくて数日単位でかかるようです

> カスタム設定をした場合、ネームサーバーの情報がインターネット上に反映され、ドメインをご利用いただき、正常にサイトに接続される状態になるまでに【 24～72時間 】程度お時間がかかる場合がございます。

https://support.muumuu-domain.com/hc/ja/articles/360045803834-%E3%82%B5%E3%82%A4%E3%83%88%E3%81%8C%E8%A1%A8%E7%A4%BA%E3%81%95%E3%82%8C%E3%81%BE%E3%81%9B%E3%82%93




---
### 補足など
1. SSL 通信では無い場合だとエラーが発生しますが、MuuMuuDomain さんだとそこは自動で適用されていたので別途何か対応が必要だったことはありませんでした
1. こういった手順を記事にされている方の内容を参考にしてみると、 `config > enviroment > product.rb` の内容に取得したドメインを追加するような内容を書かれている方が散見されましたが、MuuMuuDomain の場合は不要でした

---
### 所感
* 私自身訳があって お名前.com さんと MuuMuuDomain さんのどちらも利用したのですが、どちらかで独自ドメインの適用方法の感じを掴めればどちらのプロバイダーさんであっても問題なく作業できるようになる感覚が得られました
    * 手順に大きな差異が無いので各々のサービスの特色で選んだりしても面白いかもしれません

<details><summary>余談</summary>
　当初は お名前.com さんを利用して IDN  ではない普通の独自ドメインを取得して Render.com のドメイン変更をして成功していたのですがどうも個人的には お名前.com さんに使いにくさを覚えてしまって解約してからの MuuMuuDomain さんの利用でした。
　個人的に お名前.com さんは豊富なオプションが追加できたりする点が玄人向けな感じがして難しく感じてしまいました。
 　MuuMuuDomain さんの場合だと今回のような作業を簡単に行えました。具体的には SSL 証明書を別途申請しなくとも取得できた＆Punycoder に変換した文字列を表示してくれたりとすんなり Render.com が認識してくれて一日で済みました。
  こういったサービスにも使い分けがあること大変勉強になりました。
</details>

---
### 参考資料
https://docs.render.com/custom-domains

https://zenn.dev/eic/scraps/58bcb70c911c26

https://zenn.dev/s17w09/articles/31cc8a15817ff3

https://qiita.com/kumaryoya/items/fa0debae1da92eb125a2

https://qiita.com/iijima-naoya-45b/items/97ddee422241384599fe

https://support.muumuu-domain.com/hc/ja/articles/360045803834-%E3%82%B5%E3%82%A4%E3%83%88%E3%81%8C%E8%A1%A8%E7%A4%BA%E3%81%95%E3%82%8C%E3%81%BE%E3%81%9B%E3%82%93