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

Azure Static Web Apps は、コード リポジトリからアプリをビルドすることによって、Web サイトを運用環境に発行します。

このクイックスタートでは、Azure CLI を使用して、Web アプリケーションを Azure Static Web Apps にデプロイします。

前提条件

リポジトリを作成する

この記事では、簡単に作業を開始できるように、GitHub テンプレート リポジトリを使用します。 テンプレートには、Azure Static Web Apps にデプロイするスターター アプリが含まれます。

  1. 次の場所に移動して、新しいリポジトリを作成します。
    1. https://github.com/staticwebdev/vanilla-basic/generate
  2. リポジトリの名前を my-first-static-web-app に設定します

Note

Azure Static Web Apps で Web アプリを作成するには、少なくとも 1 つの HTML ファイルが必要です。 このステップで作成するリポジトリには、1 つの index.html ファイルが含まれます。

[Create repository from template](テンプレートからリポジトリを作成する) を選択します。

テンプレートからリポジトリを作成する

静的 Web アプリをデプロイする

テンプレートからリポジトリが生成されたので、Azure CLI から静的 Web アプリとしてアプリをデプロイできます。

  1. 次のコマンドを使用して、Azure CLI にサインインします。

    az login
    
  2. リソース グループを作成します。

    az group create \
      --name my-swa-group \
      --location "eastus2"
    
  3. GitHub ユーザー名を保持する変数を作成します。

    次のコマンドを実行する前に、プレースホルダー <YOUR_GITHUB_USER_NAME> を GitHub ユーザー名に置き換えてください。

    GITHUB_USER_NAME=<YOUR_GITHUB_USER_NAME>
    
  4. リポジトリから新しい静的 Web アプリをデプロイします。

    az staticwebapp create \
        --name my-first-static-web-app \
        --resource-group my-swa-group \
        --source https://github.com/$GITHUB_USER_NAME/my-first-static-web-app \
        --location "eastus2" \
        --branch main \
        --app-location "src" \
        --login-with-github
    

    重要

    --source パラメーターに渡す URL には、.git サフィックスを含めることはできません。

    このコマンドを実行すると、CLI によって GitHub の対話型ログイン エクスペリエンスが開始されます。 コンソールに次のようなメッセージが表示されていることを確認してください。

    https://github.com/login/device に移動し、ユーザー コード 329B-3945 を入力してアクティブ化し、GitHub の個人用アクセス トークンを取得してください。

  5. https://github.com/login/device に移動します。

  6. コンソールのメッセージに表示されているユーザー コードを入力します。

  7. [Continue](続行) を選択します。

  8. [Authorize AzureAppServiceCLI](AzureAppServiceCLI の承認) ボタンを選びます。

Web サイトを表示する

静的アプリのデプロイには 2 つの側面があります。 最初の操作で、アプリを構成する基になる Azure リソースを作成します。 次は、アプリケーションをビルドして発行するワークフローです。

新しい静的サイトに移動する前にまず、デプロイ ビルドの実行が完了している必要があります。

  1. コンソール ウィンドウに戻り、次のコマンドを実行して、アプリに関連する URL を一覧表示します。

    az staticwebapp show \
      --name  my-first-static-web-app \
      --query "repositoryUrl"
    

    このコマンドの出力で、GitHub リポジトリの URL が返されます。

  2. リポジトリの URL をコピーし、ブラウザーに貼り付けます。

  3. [Actions](アクション) タブを選択します。

    この時点で、静的な Web アプリをサポートするリソースが Azure によって作成されています。 実行中のワークフローの横のアイコンが、緑の背景のチェックマークに変わるまで待ちます ()。 この操作は、完了するまで数分かかる場合があります。

    成功アイコンが表示されたら、ワークフローは完了しており、コンソール ウィンドウに戻ることができます。

  4. 次のコマンドを実行して、Web サイトの URL のクエリを実行します。

    az staticwebapp show \
      --name my-first-static-web-app \
      --query "defaultHostname"
    

    URL をブラウザーにコピーして Web サイトに移動します。

リソースをクリーンアップする

このアプリケーションを引き続き使う予定がない場合は、次のコマンドを実行して、リソース グループと静的 Web アプリを削除できます。

az group delete \
  --name my-swa-group

次のステップ