クイックスタート: Azure Static Web Apps を使用して静的サイトを初めて構築する

Azure Static Web Apps は、コード リポジトリからアプリをビルドすることによって、Web サイトを発行します。 このクイックスタートでは、Visual Studio Code 拡張機能を使用して、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 に設定します

Note

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

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

Create repository from template

リポジトリの複製

お使いの GitHub アカウントにリポジトリを作成したら、次のコマンドを使用して、プロジェクトをお使いのローカル コンピューターにクローンします。

git clone https://github.com/<YOUR_GITHUB_ACCOUNT_NAME>/my-first-static-web-app.git

<YOUR_GITHUB_ACCOUNT_NAME> は、必ずお使いの GitHub ユーザー名に置き換えてください。

次に、Visual Studio Code を開いて、[ファイル]>[フォルダーを開く] に移動し、クローンしたリポジトリをエディターで開きます。

Azure Static Web Apps 拡張機能をインストールする

Visual Studio Code 用 Azure Static Web Apps 拡張機能の拡張機能をまだお持ちでない場合は、Visual Studio Code にインストールできます。

  1. [表示]>[拡張機能] を選択します。
  2. [Marketplace で拡張機能を検索する] で、「Azure Static Web Apps」と入力します。
  3. Azure Static Web Apps[インストール] を選択します。
  4. 拡張機能が Visual Studio Code にインストールされます。

静的 Web アプリを作成する

  1. Visual Studio Code 内で、アクティビティ バーの Azure ロゴを選択して、Azure 拡張機能ウィンドウを開きます。

    Azure Logo

    Note

    続行するには、Visual Studio Code から Azure および GitHub にサインインする必要があります。 まだ認証されていない場合は、両方のサービスにサインインするよう、作成プロセス中に拡張機能から求められます。

  2. [Static Web Apps] ラベルで、プラス記号を選択します。

    Application name

    Note

    Azure Static Web Apps の Visual Studio Code 拡張機能では、一連の既定値を使用して作成プロセスが効率化されます。 作成プロセスをきめ細かく制御する場合は、コマンド パレットを開き、[Azure Static Web Apps: Create Static Web App... (Advanced)](Azure Static Web Apps: 静的 Web アプリの作成 (詳細)) を選びます。

  3. エディターの上部にコマンド パレットが開き、サブスクリプションの名前を選択するように求められます。

    サブスクリプションを選択し、Enter キーを押します。

    Select an Azure Subscription

  4. 次に、アプリケーションの名前を指定します。

    my-first-static-web-app」と入力し、Enter キーを押します。

    Create Static Web App

  5. 近くのリージョンを選択します。

    Note

    Azure Static Web Apps によって静的アセットはグローバルに分散されます。 選択したリージョンによって、オプションのステージング環境と API 関数アプリが配置される場所が決まります。

  6. アプリケーションの種類に一致するプリセットを選択します。

    Application presets: No framework

    アプリケーション ファイルの場所として「 /src」を入力し、Enter キーを押します。

    このアプリでは、ビルド出力は生成されません。 ビルド出力場所が空であることを確認し、Enter キーを押します。

  7. アプリが作成されると、確認通知が Visual Studio Code に表示されます。

    Created confirmation

    デプロイの進行中、Visual Studio Code 拡張機能からビルドの状態がレポートされます。

    Waiting for deployment

    デプロイが完了したら、Web サイトに直接移動できます。

  8. ブラウザーで Web サイトを表示するには、Static Web Apps 拡張機能でプロジェクトを右クリックし、 [Browse Site](サイトの参照) を選択します。

    Browse site

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

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

Visual Studio Code エクスプローラー ウィンドウで、 [Static Web Apps] セクションに戻ります。 [my-first-static-web-app] を右クリックし、 [削除] を選択します。

A screenshot showing how to delete the app

次のステップ