3
2

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

お題は不問!Qiita Engineer Festa 2024で記事投稿!
Qiita Engineer Festa20242024年7月17日まで開催中!

自分の好きなドメインでwebサイトを公開してみよう[AzureにカスタムドメインでWebアプリをデプロイする]

Posted at

自分の好きなドメインでWebサイトを公開したくないですか?
例えば
herokuなら
https://yourappname-00000000000.herokuapp.com
とか
Azureのデフォルトなら
https://name-00000000000.eastus-01.azurewebsites.net
のようになる.

どうせならお名前.comなどで取得したドメインを使用したいですよね?

例えばtarakokko3233test.comとか(アクセスしても何もないよ)

本記事ではドメインの取得からDNSサーバーの設定,Webアプリのデプロイ,カスタムドメインの設定までをAzureで行う方法について記載する.

ドメインの取得

お名前.comにアクセスして自分の取得したいドメインを入力する.
スクリーンショット 2024-06-25 22.12.28.png

その後,.com.netなど希望するものを選択する.○がついたものが利用可能なドメインである.

スクリーンショット 2024-06-25 22.12.45.png

使用目的を選択する.
スクリーンショット 2024-06-25 22.14.44.png

この後にお名前IDでのログインと決済情報を入力してドメインを取得する.

AzureでWebアプリを作成

Azureにアクセスし,サインインする.登録がまだの方は登録する.
Azure Portalにアクセスしたら,リソースの作成を押す.

スクリーンショット 2024-06-25 22.30.08.png

Webアプリ作成を押す.
スクリーンショット 2024-06-25 22.30.45.png

必要事項を入力する.リソースグループは初めての方はないと思うので新規作成から任意のリソースグループ名を入力する.

リソースグループとは
Microsoft Azureクラウドプラットフォームにおいて,関連するリソース(仮想マシ,、ストレージアカウント,ネットワークサービスなど)を整理し,管理するためのコンテナ.リソースグループを使用することで,異なるリソースを一括して管理,監視,アクセス制御設定が可能となる.これにより,効率的かつ効果的にリソースを扱うことができる.

Webアプリ名
任意の名前

公開
コード自体をGithubからデプロイする場合は,コードを選択.
Dockerコンテナなどでアプリケーションをパッケージ化したものをデプロイする際は,コンテナを選択.
静的ファイル(HTML、CSS、JavaScript)を使用して構築されたWebサイトやアプリケーション,つまり,静的サイトジェネレーターやSPAフレームワーク(React、Angular、Vue.jsなど)によって構築されたアプリケーションをデプロイするのならば静的webアプリを選択.

ランタイムスタック
コードを選択したらランタイムスタックを選択することになる.ランタイムスタックはデプロイするWebアプリの言語を指定する.

スクリーンショット 2024-06-25 22.31.38.png

その後,継続的デプロイを基本は有効化を選択して良いと思う.その下のGithub設定でデプロイするGithubリポジトリとブランチを設定する.
スクリーンショット 2024-06-25 23.33.37.png

コンテナを選択したら,どのコンテナをデプロイするかを選択する.基本的にはAzure Container Registryまたは,DockerHubにあるコンテナを読み込むのが良いだろう.
スクリーンショット 2024-06-25 23.32.59.png

詳しくは以下の記事で説明する.
[鋭意製作中]

これで確認および作成を選択し,作成を押せばWebアプリが作成される.コードを選択した際はGithubリポジトリ上に.github/workflowsにymlファイルが作成し,自動的にデプロイするようになる.

デプロイログの作成や手動デプロイをするにはAzurePortalにアクセスし,AppServiceを選択し,作成したwebアプリ名を選択する.
スクリーンショット 2024-06-25 23.46.47.png

その後,デプロイセンターを選択する.
スクリーンショット 2024-06-25 23.48.25.png

ここでデプロイログを確認できたり,同期を押すと手動デプロイができる.
スクリーンショット 2024-06-25 23.49.03.png

カスタムドメインの設定

AzurePortalにアクセスし,AppServiceを選択し,作成したwebアプリ名を選択する.
スクリーンショット 2024-06-25 23.46.47.png

その後,カスタムドメインを選択する.
スクリーンショット 2024-06-25 23.48.25.png

このページにあるIPアドレスカスタムドメインの検証IDを控えておく.
スクリーンショット 2024-06-25 23.53.13.png

DNSゾーンの設定

AzurePortalにアクセスし,DNSゾーンを選択する.

スクリーンショット 2024-06-25 23.55.17.png

作成を押し,
スクリーンショット 2024-06-25 23.54.55.png

任意のリソースグループを選択し,取得したドメイン名を入力する
**例:**tarakokko3233test.com
スクリーンショット 2024-06-25 23.57.49.png

これで作成を押して作成する.

再度,AzurePortalの,DNSゾーンにアクセスし,作成したDNSゾーンを選択する.
概要のページにあるネームサーバー1ネームサーバー2ネームサーバー3ネームサーバー4を控えておく.
その後,レコードセットを選択する.
スクリーンショット 2024-06-26 0.01.57.png

追加を押し,
スクリーンショット 2024-06-26 0.03.10.png

このレコードの作成画面に以下の3つのレコードを入力する
Aレコード

  • 名前: @
  • 種類: A
  • IPアドレス:AppServiceのWebアプリのカスタムドメインで控えておいたIPアドレス
    スクリーンショット 2024-06-26 0.03.34.png
    これで追加を押す.
    CNAMEレコード
  • 名前: www
  • 種類: CNAME
  • エイリアス:取得したドメイン名
    スクリーンショット 2024-06-26 0.06.58.png
    これで追加を押す.

TXTレコード

  • 名前: asuid
  • 種類: TXT
  • 値:AppServiceのWebアプリのカスタムドメインで控えておいたカスタムドメインの検証ID
    スクリーンショット 2024-06-26 0.08.15.png
    これで追加を押す.

DNSレコードの設定

お名前.comNaviにアクセスする.
そこでネームサーバー設定からドメインのDNS設定を押す.
スクリーンショット 2024-06-25 22.23.51.png
その後取得したドメイン名を選択し,次へを押す.

ネームサーバーの変更を選択する.
スクリーンショット 2024-06-25 22.27.50.png

他のネームサーバーを使用を選択し,1プライマリネームサーバーから順に4つ,DNSゾーン
概要のページで控えたネームサーバー1ネームサーバー2ネームサーバー3ネームサーバー4を入力する.

各ネームサーバーの最後に.(ピリオド)がついている場合は削除して入力すること.

スクリーンショット 2024-06-26 0.13.11.png

入力したら確認画面へ進むを押して確認し,設定する.

次に,DNS設定/転送設定を押し,取得したドメイン名を選択する.
スクリーンショット 2024-06-26 0.51.26.png

DNSレコード設定を利用する設定するを選択.
スクリーンショット 2024-06-25 22.25.53.png

ここで以下の2つのレコードを追加する.
Aレコード

  • ホスト名: (空)
  • TYPE: A
  • VALUE: AppServiceのWebアプリのカスタムドメインで控えておいたIPアドレス
    スクリーンショット 2024-06-26 0.53.46.png
    設定したら追加を押す.

TXTレコード

  • ホスト名: asuid
  • TYPE: TXT
  • VALUE:AppServiceのWebアプリのカスタムドメインで控えておいたカスタムドメインの検証ID
    スクリーンショット 2024-06-26 0.56.56.png
    設定したら追加を押す.

最後に画面下の確認画面へ進むを押して設定する.

カスタムドメインの適用

AzurePortalにアクセスし,AppServiceを選択し,作成したwebアプリ名を選択する.
スクリーンショット 2024-06-25 23.46.47.png

その後,カスタムドメインを選択する.
スクリーンショット 2024-06-25 23.48.25.png
ドメインプロバイダーはその他の全てのドメインサービスを選択し,
ドメインには取得したドメイン名を入力
その後,検証を押して問題がなければ追加を押す.
スクリーンショット 2024-06-26 1.00.17.png

これでカスタムドメインを使ったWebアプリのAzureへのデプロイが終了である.

カスタムドメインがうまく検証できない時はドメインやDNSが世界に広がるのを待つために最大48時間かかる場合があるのでしばら決まってみることをお勧めする

よくあるエラー例

Deployment Failed, Package deployment using ZIP Deploy failed. Refer logs for more details.

このエラーはタイムアウトしている可能性があるのでデプロイセンターから再デプロイすると良い.
それでもうまくいかない場合はこちらから

https://stackoverflow.com/questions/72280118/deployment-failed-with-error-package-deployment-using-zip-deploy-failed-refer

Deployment Failed, Error: Failed to deploy web package to App Service. Conflict (CODE: 409)

これはデプロイプロセスが重複しているので同時に起きているデプロイ結果を確認して,もう一回デプロイすること.ただし,デプロイする際は他のワークフローがないことを確認すること

3
2
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
3
2

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?