Azure Static Web Apps を Azure Devops からデプロイしてカスタムドメインを構成する

## この記事の目的

Azure Static Web Apps を Azure Devops からデプロイしてカスタムドメインを構成する手順を解説します。  
👇アクセスイメージ（Azure Static Web Apps上のReact サンプルページにカスタムドメインでアクセスします。）  
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2708851/c6239477-9a83-204f-f121-f8b473848b86.png)  

## Azure DevOps の設定

[**Azure DevOps**](https://dev.azure.com/)へアクセスし、組織を作成または作成済組織を選択します。  
以下説明では解説用組織**sample1128**を使用します。  

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2708851/c91050c3-d930-b092-32af-6108001c18ab.png)

[**Azure DevOps Parallelism Request**](https://aka.ms/azpipelines-parallelism-request)へアクセスし、情報を入力します。  
※ 本記事記載時点ではこの手順を実施しないと、後続の手順でエラーが発生します。  

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2708851/95c29158-80b8-1033-c4e4-24a97d72f51a.png)  

入力する内容

|項目|入力値|例|
|----|----|----|
|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|

入力後「送信」ボタンを押します。  
処理には数日程度かかります。（本記事記載時点では下記完了メール受信まで２日間かかりました。）  

処理が完了すると、下記のようなメールが届きます。

```text
[タイトル]
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**](https://dev.azure.com/)へアクセスし、ユーザ設定メニューから**personal access tokens**を選択します。  
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2708851/1a6760a1-ee0f-8142-9b30-38bdc1103adf.png)  

**New Token**を選択します。  
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2708851/a235c12f-f3a7-e58b-e8e8-4cf59b084ebd.png)  

Nameに任意の名称、Scopesに**Full access**を指定し、`Create`をクリックします。  
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2708851/44e06e62-018b-6b6c-c91d-840ec0061a8e.png)  

ここで表示されるコードが**personal access token**です。後で利用しますので、コピーしてメモしておきます。  
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2708851/9495592e-1b8f-00f3-325d-d411ad8ef53b.png)

## Azure DevOps Projectの作成

[**Azure DevOps**](https://dev.azure.com/)へアクセスし、`Project`を作成します。  
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2708851/b4626c19-1ce0-5721-b78b-274fa186f65d.png)

Project name に`web-static-app-sample`を入力し、**Create**をクリックします。  
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2708851/519fdb5e-5c35-46e5-9048-197375e43bc2.png)

Reposメニューを選択し、`Import repository`をクリックします。  
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2708851/e8379387-5d36-0bd1-bae1-df98d08d74f0.png)  

Clone URLに`https://github.com/staticwebdev/react-basic.git`を入力し、Importをクリックします。([参考](https://learn.microsoft.com/ja-jp/azure/static-web-apps/get-started-cli?tabs=react))  
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2708851/6d9296de-dcab-42f5-5bb8-c54cf5160d3f.png)

リポジトリが表示された状態でブラウザに表示されている**リポジトリURL**をメモします。(後の手順で利用します)  

```text
[リポジトリ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**を作成します。  

```text
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名を取得します。  

```text
az staticwebapp show --name web-static-app-sample --query "defaultHostname"
```

下記のような出力が得られます。  

```text
"proud-sky-*******.*.azurestaticapps.net"
```

上記出力の先頭に`https://`を付与してアクセスURLを作成します。  

```text
https://proud-sky-*******.*.azurestaticapps.net
```

上記URLにアクセスし、ブラウザに`Hello World`と表示されることを確認します。  
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2708851/e3fa8fd7-6b98-e38a-adda-0a2387cb9a0a.png)

## カスタムドメインの構成

※ 以下の解説は**App Service ドメイン**が構成されていることを前提とします。  

下記コマンドでCNAMEレコードセットを作成します。  
`--cname`には上記で取得した**Static Web Apps**のDNS名を指定します。  

```text
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**のカスタムドメインを設定します。  

```text
az staticwebapp hostname set^
 --resource-group resource_group_sample^
 --hostname www.sample.com^
 --name web-static-app-sample
```

カスタムドメインのアクセスURLでアクセスします。  

```text
https://www.sample.com
```

上記URLにアクセスし、ブラウザに`Hello World`と表示されることを確認します。  
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2708851/c6239477-9a83-204f-f121-f8b473848b86.png)  

## 👇関連記事

- [Azure DNS ゾーンを作成し、AWS Route53のサブドメインとして構成する](https://docusaurus.plant11.com/azure/dns_subdomain)

## 👇参考URL

- [クイック スタート: 静的 Web アプリを初めてビルドする](https://learn.microsoft.com/ja-jp/azure/static-web-apps/get-started-portal?tabs=vanilla-javascript&pivots=azure-devops)
- [Azure DevOps](https://dev.azure.com/)
- [Azure DevOps Parallelism Request](https://aka.ms/azpipelines-parallelism-request)
- [az staticwebapp create](https://learn.microsoft.com/ja-jp/cli/azure/staticwebapp?view=azure-cli-latest#az-staticwebapp-create)
- [Azure Static Web Apps で Azure DNS を使用してカスタム ドメインを設定する](https://learn.microsoft.com/ja-jp/azure/static-web-apps/custom-domain-azure-dns)
- [App Service ドメインを購入する](https://learn.microsoft.com/ja-jp/azure/app-service/manage-custom-dns-buy-domain)

[keywords]  
Azure Static Web Devops

[Azure Static Web Apps を Azure Devops からデプロイしてカスタムドメインを構成する](https://docusaurus.plant11.com/azure/static_web_apps)

更新日:2023/11/28