クイックスタート: Azure portal で最初の静的サイトを構築する

Azure Static Web Apps では、GitHub リポジトリからアプリをビルドすることによって、運用環境に Web サイトが発行されます。 このクイックスタートでは、Azure portal を使用して Web アプリケーションを Azure Static Web Apps にデプロイします。

Azure サブスクリプションを持っていない場合は、無料試用版アカウントを作成できます

前提条件

リポジトリを作成する

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

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

注意

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

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

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

静的 Web アプリを作成する

リポジトリが作成されたので、Azure portal から静的 Web アプリを作成できます。

  1. Azure Portal に移動します。
  2. [リソースの作成] を選択します。
  3. Static Web Apps を検索します。
  4. Static Web Apps を選択します。
  5. [作成] を選択します

[基本] セクションで、新しいアプリを構成し、それを GitHub リポジトリにリンクすることから始めます。

[基本] セクション

  1. Azure サブスクリプション を選択します。
  2. [リソース グループ] の横にある [新規作成] リンクを選択します。
  3. テキスト ボックスに「static-web-apps-test」と入力します。
  4. [静的 Web アプリの詳細] で、テキスト ボックスに「my-first-static-web-App」と入力します。
  5. [Azure Functions とステージングの詳細] で、最も近いリージョンを選択します。
  6. [デプロイの詳細] で、 [GitHub] を選択します。
  7. [GitHub アカウントでサインイン] ボタンを選択し、GitHub で認証を行います。

GitHub にサインインした後、リポジトリ情報を入力します。

リポジトリの詳細

  1. 希望する "組織" 名を選択します。

  2. [リポジトリ] ドロップダウンから my-first-web-static-app を選択します。

  3. [ブランチ] ドロップダウンから main を選択します。

    注意

    リポジトリが表示されない場合は、GitHub で Azure Static Web Apps を承認しなければならない場合があります。 GitHub リポジトリを参照し、 [設定]、[アプリケーション]、[認可された OAuth アプリ] の順に移動して、 [Azure Static Web Apps][許可] の順に選択します。 組織リポジトリの場合は、アクセス許可を付与する組織の所有者である必要があります。

  4. [ビルドの詳細] セクションで、使用するフロントエンド フレームワークに固有の構成の詳細を追加します。

    1. [ビルドのプリセット] ドロップダウンから [カスタム] を選択します。
    2. [App location](アプリの場所) ボックスに「 ./src」と入力します。
    3. [Api location](API の場所) ボックスはからのままにします。
    4. [App artifact location](アプリ成果物の場所) ボックスに「 ./src」と入力します。
  5. [Review + create](レビュー + 作成) を選択します。

    [確認および作成] ボタン

    注意

    アプリを作成した後にこれらの値を変更するには、ワークフロー ファイルを編集します。

  6. [作成] を選択します

    [作成] ボタン

  7. [リソースに移動] を選択します。

    [リソース グループ] ボタン

Web サイトを表示する

静的アプリのデプロイには 2 つの側面があります。 まず、アプリを構成する基になる Azure リソースをプロビジョニングします。 2 つ目は、アプリケーションをビルドして発行する GitHub Actions ワークフローです。

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

Static Web Apps の概要ウィンドウには、Web アプリとの対話に役立つ一連のリンクが表示されます。

概要ウィンドウ

  1. "Click here to check the status of your GitHub Actions runs (こちらをクリックして、GitHub Actions の実行の状態を確認してください) " というバナーをクリックすると、リポジトリに対して実行されている GitHub アクションが表示されます。 デプロイ ジョブが完了したことを確認したら、生成された URL を使用して Web サイトに移動できます。

  2. GitHub Actions ワークフローが完了したら、 [URL] リンクをクリックして、新しいタブで Web サイトを開くことができます。

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

このアプリケーションを引き続き使用しない場合は、次の手順を使用して Azure Static Web Apps インスタンスを削除することができます。

  1. Azure portal を開きます。
  2. 上部の検索バーから my-first-web-static-app を検索します。
  3. アプリの名前を選択します。
  4. [削除] ボタンを選択します。
  5. [はい] を選択して削除アクションを確定します (このアクションが完了するまでにしばらく時間がかかる場合があります)。

次のステップ