クイックスタート: Azure CLI を使用して最初の静的サイトを構築する

[アーティクル]
04/11/2024

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 アプリを削除します。

次のステップ

API を追加する