Closed23
Azureで独自ドメインを適用してフロントアプリを表示するまで

ドメイン購入した

pnpm を使用して初期状態のNext.jsアプリ作成

とりあえずStaticWebAppsのリソースを作成した。

Static Web AppsのデフォルトドメインでNext.jsのページを開けた。

カスタムドメインを割り当てたい

やること
- DNSゾーンを作成する。
- そのドメインをStatic Web Appsのカスタムドメインに追加する

nytest-piyo.xyzのDNSゾーンを作成した。

下記URLにはアクセス可能。
現状お名前.comのページ

お名前.comでSSL証明書のみを発行しようとしたら26,000円ほどかかるらしいから自分で発行する。

certbotを使用しましょう

ローカルPCにcertbotがインストールされていなかったから
brew install certbot

Static Web Apps のカスタムドメインには無料でSSL証明書が自動的に割り当てられる

とう言うことで証明書を手動で発行する必要はなさそう

ここまでは進んだ。
お名前.comで購入したドメインのデフォルトで設定されていたネームサーバーをAzure DNS(nytest-piyo.xyz)のネームサーバーに変更した。

上記にアクセスでうまくいかない

Static Web Apps で追加したカスタムドメインが検証中になっていた。
少し待ちかな。

WindowsやとDNSのキャッシュクリアはこれ
ipconfig /flushdns

DNSチャレンジ(ドメイン検証)に時間がかかっているからTXTレコードのTTLを10秒にする。

変更したらすぐ行けた

SSL証明書もAzureのドキュメント通り自動で適応されている

上記までは
Static Web Appsにお名前.comで購入した独自ドメインを適応するというお話
手順としては
- お名前.comでドメインを購入する。
- Azure PortalからDNSゾーンを 1 で購入した名前で作成する。
- 1 で購入したドメインで使用されているネームサーバーを、2 で作成したDNSのネームサーバーに変更する。
- Azure PortalからStatic Web Appsを作成する。
- 4 で作成したStatic Web Appsにカスタムドメインを追加する。設定はAzureのDNSゾーンで、作成したDNSゾーンの名前を入力する。
- 自動でドメイン検証とStaic Web AppsへのIPアドレスが示されたAレコードが登録される。(ドメイン検証に時間がかかるため、ドメイン検証のために自動で作成されたTXTレコードのTTLを10秒に変更するとドメイン検証がすぐに終わる)
- 設定したカスタムドメインを規定値に設定する

終わってからこんなのを見つけた

作った構成
このスクラップは2024/04/21にクローズされました