Closed23
Azureで独自ドメインを適用してフロントアプリを表示するまで
nakashi94ドメイン購入した
nakashi94pnpm を使用して初期状態のNext.jsアプリ作成
nakashi94とりあえずStaticWebAppsのリソースを作成した。
nakashi94Static Web AppsのデフォルトドメインでNext.jsのページを開けた。
nakashi94カスタムドメインを割り当てたい
nakashi94やること
- DNSゾーンを作成する。
- そのドメインをStatic Web Appsのカスタムドメインに追加する
nakashi94nytest-piyo.xyzのDNSゾーンを作成した。
nakashi94下記URLにはアクセス可能。
現状お名前.comのページ
nakashi94お名前.comでSSL証明書のみを発行しようとしたら26,000円ほどかかるらしいから自分で発行する。
nakashi94certbotを使用しましょう
nakashi94ローカルPCにcertbotがインストールされていなかったから
brew install certbot
nakashi94Static Web Apps のカスタムドメインには無料でSSL証明書が自動的に割り当てられる
nakashi94とう言うことで証明書を手動で発行する必要はなさそう
nakashi94ここまでは進んだ。
お名前.comで購入したドメインのデフォルトで設定されていたネームサーバーをAzure DNS（nytest-piyo.xyz）のネームサーバーに変更した。
nakashi94
上記にアクセスでうまくいかない
nakashi94Static Web Apps で追加したカスタムドメインが検証中になっていた。
少し待ちかな。
nakashi94WindowsやとDNSのキャッシュクリアはこれ
ipconfig /flushdns
nakashi94DNSチャレンジ（ドメイン検証）に時間がかかっているからTXTレコードのTTLを10秒にする。
nakashi94変更したらすぐ行けた
nakashi94SSL証明書もAzureのドキュメント通り自動で適応されている
nakashi94上記までは
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秒に変更するとドメイン検証がすぐに終わる）
- 設定したカスタムドメインを規定値に設定する
nakashi94終わってからこんなのを見つけた
nakashi94作った構成
このスクラップは13日前にクローズされました