Closed2024/04/21にクローズ23

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

独自ドメイン

ドメイン購入した

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

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

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

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

やること

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

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

下記URLにはアクセス可能。
現状お名前.comのページ
http://nytest-piyo.xyz/

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

certbotを使用しましょう
https://certbot.eff.org/

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

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

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

ここまでは進んだ。

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

http://nytest-piyo.xyz/

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

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

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

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

変更したらすぐ行けた
https://nytest-piyo.xyz

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にクローズされました