メインコンテンツまでスキップ

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

この記事の目的

Azure Static Web Apps を Azure Devops からデプロイしてカスタムドメインを構成する手順を解説します。
👇アクセスイメージ(Azure Static Web Apps上のReact サンプルページにカスタムドメインでアクセスします。)
image.png

Azure DevOps の設定

Azure DevOpsへアクセスし、組織を作成または作成済組織を選択します。
以下説明では解説用組織sample1128を使用します。

image.png

Azure DevOps Parallelism Requestへアクセスし、情報を入力します。
※ 本記事記載時点ではこの手順を実施しないと、後続の手順でエラーが発生します。

image.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

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

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

[タイトル]
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を選択します。
image.png

New Tokenを選択します。
image.png

Nameに任意の名称、ScopesにFull accessを指定し、Createをクリックします。
image.png

ここで表示されるコードがpersonal access tokenです。後で利用しますので、コピーしてメモしておきます。
image.png

Azure DevOps Projectの作成

Azure DevOpsへアクセスし、Projectを作成します。
image.png

Project name にweb-static-app-sampleを入力し、Createをクリックします。
image.png

Reposメニューを選択し、Import repositoryをクリックします。
image.png

Clone URLにhttps://github.com/staticwebdev/react-basic.gitを入力し、Importをクリックします。(参考)
image.png

リポジトリが表示された状態でブラウザに表示されているリポジトリ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と表示されることを確認します。
image.png

カスタムドメインの構成

※ 以下の解説は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と表示されることを確認します。
image.png

👇関連記事

👇参考URL

[keywords]
Azure Static Web Devops

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

更新日:2023/11/28

ITとソフトウェアの人気オンラインコースHP Directplus -HP公式オンラインストア-