クイックスタート: 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 に設定します

注意

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

[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 を開き、 [ファイル] > [フォルダーを開く] に移動して、お使いのマシンにクローンしたリポジトリをエディターで開きます。

静的 Web アプリを作成する

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

    Azure ロゴ

    注意

    Azure と GitHub へのサインインが必要です。 Visual Studio Code から Azure と GitHub にまだサインインしていない場合は、拡張機能により、作成プロセス中に両方にサインインするように求められます。

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

    アプリケーション名

  3. エディターの上部にコマンド パレットが表示され、アプリケーションの名前を入力するように求められます。

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

    静的 Web アプリを作成する

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

    アプリケーション プリセット: フレームワークなし

    アプリケーション ファイルの場所として「 ./ 」と入力します。

    アプリケーション ファイルの場所

    Azure Functions API の場所として [Skip for now](今はしない) を選択します。

    API の場所

    ビルドの出力場所として「 ./ 」と入力します。

    アプリケーション ビルドの出力場所

  5. 最も近い場所を選択し、Enter キーを押します。

    リソースの場所

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

    作成された確認

    次に、 [Open Actions in GitHub](GitHub でアクションを開く) ボタンをクリックします。 このページには、アプリケーションのビルドの状態が表示されます。

    GitHub アクションが完了したら、発行された Web サイトを参照できます。

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

    サイトの参照

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

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

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

アプリの削除

次のステップ