クイックスタート: Azure CLI を使用して最初の静的サイトを構築する
Azure Static Web Apps は、コード リポジトリからアプリをビルドすることによって、Web サイトを運用環境に発行します。
このクイックスタートでは、Azure CLI を使用して、Web アプリケーションを Azure Static Web Apps にデプロイします。
前提条件
- GitHub アカウント。
- Azure アカウント。
- Azure サブスクリプションがない場合、無料試用版アカウントを作成できます。
- Azure CLI のインストール (バージョン 2.29.0 以上)。
- Git のセットアップ。
環境変数を定義する
このクイックスタートの最初の手順は、環境変数を定義することです。
export RANDOM_ID="$(openssl rand -hex 3)"
export MY_RESOURCE_GROUP_NAME="myStaticWebAppResourceGroup$RANDOM_ID"
export REGION=EastUS2
export MY_STATIC_WEB_APP_NAME="myStaticWebApp$RANDOM_ID"
リポジトリを作成する (省略可能)
(省略可能) この記事では、簡単に作業を始められるもう 1 つの方法として、GitHub テンプレート リポジトリを使います。 テンプレートには、Azure Static Web Apps にデプロイするスターター アプリが含まれます。
- 次の場所に移動して、新しいリポジトリを作成します: https://github.com/staticwebdev/vanilla-basic/generate。
- リポジトリに
my-first-static-web-appという名前を付けます。
Note
Azure Static Web Apps で Web アプリを作成するには、少なくとも 1 つの HTML ファイルが必要です。 このステップで作成するリポジトリには、1 つの index.html ファイルが含まれます。
- [Create repository] (リポジトリの作成) を選択します。
静的 Web アプリをデプロイする
Azure CLI から静的 Web アプリとしてアプリをデプロイします。
- リソース グループを作成する。
az group create \
--name $MY_RESOURCE_GROUP_NAME \
--location $REGION
結果:
{
"id": "/subscriptions/xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx/resourceGroups/my-swa-group",
"location": "eastus2",
"managedBy": null,
"name": "my-swa-group",
"properties": {
"provisioningState": "Succeeded"
},
"tags": null,
"type": "Microsoft.Resources/resourceGroups"
}
- リポジトリから新しい静的 Web アプリをデプロイします。
az staticwebapp create \
--name $MY_STATIC_WEB_APP_NAME \
--resource-group $MY_RESOURCE_GROUP_NAME \
--location $REGION
静的アプリのデプロイには 2 つの側面があります。 最初の操作で、アプリを構成する基になる Azure リソースを作成します。 次は、アプリケーションをビルドして発行するワークフローです。
新しい静的サイトに移動する前にまず、デプロイ ビルドの実行が完了している必要があります。
- コンソール ウィンドウに戻り、次のコマンドを実行して、Web サイトの URL の一覧を取得します。
export MY_STATIC_WEB_APP_URL=$(az staticwebapp show --name $MY_STATIC_WEB_APP_NAME --resource-group $MY_RESOURCE_GROUP_NAME --query "defaultHostname" -o tsv)
runtime="1 minute";
endtime=$(date -ud "$runtime" +%s);
while [[ $(date -u +%s) -le $endtime ]]; do
if curl -I -s $MY_STATIC_WEB_APP_URL > /dev/null ; then
curl -L -s $MY_STATIC_WEB_APP_URL 2> /dev/null | head -n 9
break
else
sleep 10
fi;
done
結果:
<!DOCTYPE html>
<html lang=en>
<head>
<meta charset=utf-8 />
<meta name=viewport content="width=device-width, initial-scale=1.0" />
<meta http-equiv=X-UA-Compatible content="IE=edge" />
<title>Azure Static Web Apps - Welcome</title>
<link rel="shortcut icon" href=https://appservice.azureedge.net/images/static-apps/v3/favicon.svg type=image/x-icon />
<link rel=stylesheet href=https://ajax.aspnetcdn.com/ajax/bootstrap/4.1.1/css/bootstrap.min.css crossorigin=anonymous />
echo "You can now visit your web server at https://$MY_STATIC_WEB_APP_URL"
GitHub テンプレートを使う
Azure CLI を使って、静的 Web アプリを Azure Static Web Apps に無事にデプロイできました。 静的 Web アプリの基本的なデプロイ方法がわかったので、Azure Static Web Apps のさらに高度な機能を調べることができます。
GitHub テンプレート リポジトリを使う場合は、次の手順に従います。
https://github.com/login/device に移動し、GitHub から取得したコードを入力してアクティブ化し、GitHub の個人用アクセス トークンを取得します。
- 「 https://github.com/login/device 」を参照してください。
- コンソールのメッセージに表示されているユーザー コードを入力します。
- [
Continue] を選択します。 - [
Authorize AzureAppServiceCLI] を選択します。
Git を介して Web サイトを表示する
スクリプトの実行中にリポジトリの URL を取得したら、リポジトリの URL をコピーしてブラウザーに貼り付けます。
[
Actions](アクション) タブを選択します。この時点で、静的な Web アプリをサポートするリソースが Azure によって作成されています。 実行中のワークフローの横のアイコンが、緑の背景のチェックマークに変わるまで待ちます。 この操作では、実行に数分かかる場合があります。
成功アイコンが表示されたら、ワークフローは完了しており、コンソール ウィンドウに戻ることができます。
次のコマンドを実行して、Web サイトの URL のクエリを実行します。
az staticwebapp show \
--name $MY_STATIC_WEB_APP_NAME \
--query "defaultHostname"
- URL をブラウザーにコピーして Web サイトに移動します。
リソースをクリーンアップする (省略可能)
このアプリケーションを引き続き使用しない場合は、az group delete コマンドを使ってリソース グループと静的 Web アプリを削除します。