この記事の目的
Azure Static Web Apps を Azure Devops からデプロイしてカスタムドメインを構成する手順を解説します。
👇アクセスイメージ（Azure Static Web Apps上のReact サンプルページにカスタムドメインでアクセスします。）
Azure DevOps の設定
Azure DevOpsへアクセスし、組織を作成または作成済組織を選択します。
以下説明では解説用組織sample1128を使用します。
Azure DevOps Parallelism Requestへアクセスし、情報を入力します。
※ 本記事記載時点ではこの手順を実施しないと、後続の手順でエラーが発生します。
入力する内容
| 項目 | 入力値 | 例 |
|---|---|---|
| What is your name? | 氏名を入力 | Azusa Wakui |
| What is your email address? | メールアドレスを入力 | someone@test.com |
| What is the name of your Azure DevOps Organization? | Azure Devops組織のURLを入力 | https://dev.azure.com/sample1128 |
| Are you requesting a parallelism increase for Public or Private projects? | Privateを選択 | Private |
入力後「送信」ボタンを押します。
処理には数日程度かかります。（本記事記載時点では下記完了メール受信まで２日間かかりました。）
処理が完了すると、下記のようなメールが届きます。
[タイトル]
Free tier request was completed
[本文]
Hi ******,
We've received your request to increase free parallelism in Azure DevOps.
Please note that your request was Completed
Request Details:
Name *******
Email *******
Organization Name https://dev.azure.com/*******
Parallelism Type Private
personal access tokenの作成
Azure DevOpsへアクセスし、ユーザ設定メニューからpersonal access tokensを選択します。
New Tokenを選択します。
Nameに任意の名称、ScopesにFull accessを指定し、Createをクリックします。
ここで表示されるコードがpersonal access tokenです。後で利用しますので、コピーしてメモしておきます。
Azure DevOps Projectの作成
Azure DevOpsへアクセスし、Projectを作成します。
Project name にweb-static-app-sampleを入力し、Createをクリックします。
Reposメニューを選択し、Import repositoryをクリックします。
Clone URLにhttps://github.com/staticwebdev/react-basic.gitを入力し、Importをクリックします。(参考)
リポジトリが表示された状態でブラウザに表示されているリポジトリURLをメモします。(後の手順で利用します)
[リポジトリURL]
https://dev.azure.com/{組織}/{プロジェクト}/_git/{リポジトリ}
本記事の例の場合下記
https://dev.azure.com/sample1128/web-static-app-sample/_git/web-static-app-sample
Static Web Apps を作成する
下記コマンドでStatic Web Appsを作成します。
az staticwebapp create^
--name web-static-app-sample^
--resource-group resource_group_sample^
--location "eastus2"^
--source https://dev.azure.com/sample1128/web-static-app-sample/_git/web-static-app-sample^
--branch main^
--app-location "/"^
--api-location ""^
--output-location "build"^
--login-with-ado^
--token 12345XXXXXXXXXXXXXXXXXXX
下記コマンドでStatic Web AppsのDNS名を取得します。
az staticwebapp show --name web-static-app-sample --query "defaultHostname"
下記のような出力が得られます。
"proud-sky-*******.*.azurestaticapps.net"
上記出力の先頭にhttps://を付与してアクセスURLを作成します。
https://proud-sky-*******.*.azurestaticapps.net
上記URLにアクセスし、ブラウザにHello Worldと表示されることを確認します。
カスタムドメインの構成
※ 以下の解説はApp Service ドメインが構成されていることを前提とします。
下記コマンドでCNAMEレコードセットを作成します。
--cnameには上記で取得したStatic Web AppsのDNS名を指定します。
az network dns record-set cname set-record^
--record-set-name www^
--resource-group resource_group_sample^
--zone-name sample.com^
--cname proud-sky-*******.*.azurestaticapps.net
下記コマンドでStatic Web Appsのカスタムドメインを設定します。
az staticwebapp hostname set^
--resource-group resource_group_sample^
--hostname www.sample.com^
--name web-static-app-sample
カスタムドメインのアクセスURLでアクセスします。
https://www.sample.com
上記URLにアクセスし、ブラウザにHello Worldと表示されることを確認します。
👇関連記事
👇参考URL
- クイック スタート: 静的 Web アプリを初めてビルドする
- Azure DevOps
- Azure DevOps Parallelism Request
- az staticwebapp create
- Azure Static Web Apps で Azure DNS を使用してカスタム ドメインを設定する
- App Service ドメインを購入する
[keywords]
Azure Static Web Devops
Azure Static Web Apps を Azure Devops からデプロイしてカスタムドメインを構成する
更新日:2023/11/28