クイック スタート: 静的 Web アプリを初めてビルドする

Azure Static Web Apps では、Azure DevOps または GitHub リポジトリからアプリをビルドすることによって、運用環境に Web サイトが発行されます。 このクイックスタートでは、Azure portal を使用して 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] (リポジトリの作成) を選択します。

Screenshot of the Create repository button.

リポジトリを作成する

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

  1. Azure DevOps にサインインします。

  2. [新しいリポジトリ] を選択します。

  3. [新しいプロジェクトの作成] ウィンドウで、[詳細設定] メニューを展開し、次の選択を行います。

    設定
    Project my-first-web-static-app」と入力します。
    表示 [プライベート] を選択します。
    バージョン コントロール [Git] を選択します。
    作業項目プロセス 開発方法に最適なオプションを選択します。
  4. [作成] を選択します

  5. [リポジトリ] メニュー項目を選択します。

  6. [ファイル] メニュー項目を選択します。

  7. [リポジトリのインポート] カードで、[インポート] を選択します。

  8. 任意のフレームワークのリポジトリ URL をコピーして、[クローン URL] ボックスに貼り付けます。

  9. [インポート] を選択し、インポート プロセスが完了するまで待ちます。

静的 Web アプリを作成する

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

  1. Azure ポータルにアクセスします。
  2. [リソースの作成] を選択します。
  3. Static Web Apps を検索します。
  4. Static Web Apps を選択します。
  5. [作成] を選択します

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

Basics section

設定
サブスクリプション Azure サブスクリプションを選択します。
リソース グループ [新規作成] リンクを選択し、テキスト ボックスに「static-web-apps-test」と入力します。
名前 テキスト ボックスに、「my-first-static-web-app」と入力します。
プランの種類 [無料] を選択します。
Azure Functions and staging details (Azure Functions とステージングの詳細) 最も近いリージョンを選択します。
source [GitHub] を選択します。

[GitHub アカウントでサインイン] を選び、GitHub で認証します。

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

設定
Organization 自分の組織を選択します。
リポジトリ [my-first-web-static-app] を選択します。
[Branch]\(ブランチ) <branch_name> を選択します。

Repository details

Note

リポジトリが表示されない場合、次の手順を実行します。

  • GitHub で Azure Static Web Apps を承認する必要がある場合があります。 GitHub プロファイルを参照し、[設定] > [アプリケーション] > [認可された OAuth アプリ] に移動して、[Azure Static Web Apps][許可] の順に選びます。
  • Azure DevOps 組織で Azure Static Web Apps を承認する必要がある場合があります。 アクセス許可を付与する組織の所有者である必要があります。 OAuth を使用してサード パーティ アプリケーションのアクセスを要求します。 詳細については、OAuth 2.0 を使用した REST API へのアクセスの承認に関する記事を参照してください。

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

設定
サブスクリプション Azure サブスクリプションを選択します。
リソース グループ [新規作成] リンクを選択し、テキスト ボックスに「static-web-apps-test」と入力します。
名前 テキスト ボックスに、「my-first-static-web-app」と入力します。
プランの種類 [無料] を選択します。
Azure Functions and staging details (Azure Functions とステージングの詳細) 最も近いリージョンを選択します。
source [DevOps] を選択します。
Organization 自分の組織を選択します。
Project プロジェクトを選択します。
リポジトリ [my-first-web-static-app] を選択します。
[Branch]\(ブランチ) <branch_name> を選択します。

Note

使用しているブランチが保護されていないこと、および push コマンドを発行するための十分なアクセス許可があることを確認します。 確認するには、DevOps リポジトリを参照し、[リポジトリ] ->[ブランチ] に移動し、[その他のオプション] を選択します。 次に、ブランチを選択し、その後 [ブランチ ポリシー] を選択して、必要なポリシーが有効になっていないことを確認します。

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

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

[Review + create](レビュー + 作成) を選択します。

Review and create your Azure Static Web Apps instance.

Note

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

[作成] を選択します。

Create your Azure Static Web Apps instance.

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

Proceed to go to the newly created resource.

Web サイトを表示する

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

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

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

The Azure Static Web Apps overview window.

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

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

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

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

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

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

次のステップ