演習 - Azure Static Web アプリを作成する

  • 5 分

この演習では、アプリケーションを自動的にビルドして発行する GitHub アクションを含む Azure Static Web Apps インスタンスを作成します。

静的 Web アプリを作成する

GitHub リポジトリを作成したので、Azure portal から Static Web Apps インスタンスを作成できるようになりました。

このモジュールでは、演習を完了するのに使用できる無料の一時的な Azure サブスクリプションを Azure サンドボックスを使用して提供しています。 続行する前に、このページの上部にあるサンドボックスがアクティブになっていることを確認します。

アクティブにした Azure サンドボックスを使用すると、料金を発生させることなく Azure サービスを使用できます。

Visual Studio Code 用の Azure Static Web Apps 拡張機能をインストールする

  1. Visual Studio Marketplace に移動し、Visual Studio Code 用 Azure Static Web Apps 拡張機能をインストールします。

  2. 拡張機能タブが Visual Studio Code に読み込まれたら、[インストール] ボタンを選択します。

  3. インストールが完了した後、求められる場合は [再起動して更新] を選択します。

Visual Studio Code で Azure にサインインする

  1. Visual Studio Code で、[表示]>[コマンド パレット] の順に選択し、[Azure: サインイン] を選びます。

    重要

    サンドボックスを作成するために使用したアカウントで Azure にログインします。 サンドボックスは、コンシェルジェ サブスクリプションへのアクセスを提供します。

  2. プロンプトに従って、Web ブラウザーで提供されるコードをコピーして貼り付けます。これにより、Visual Studio Code セッションが認証されます。

サブスクリプションを選択する

  1. Visual Studio Code を開き、[ファイル] > [開く] を選択して、ご自分のコンピューターにクローンしたリポジトリをエディターで開きます。

  2. コマンド パレットを開き、「Azure: Select Subscriptions」と入力して、コンシェルジェ サブスクリプションが含まれるように Azure サブスクリプションをフィルター処理したら、Enter キーを押します。

  3. [Concierge Subscription](コンシェルジェ サブスクリプション) を選択して、Enter キーを押します。

    サブスクリプションでフィルター処理する方法を示す VS Code のスクリーンショット。

静的 Web アプリを作成する

  1. Visual Studio Code を開き、[ファイル] > [開く] を選択して、コンピューターに複製したリポジトリをエディターで開きます。

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

    VS Code 内の Azure ロゴのスクリーンショット。

    Note

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

  3. "静的 Web アプリ" 見出しの上にマウスを置き、右クリックして [静的 Web アプリの作成] を選択します。

    Web アプリを作成する際の移動先となる場所を示すスクリーンショット。

  4. 「my-first-static-web-app」と入力して Enter キーを押します。

    静的 Web アプリを作成する方法を示すスクリーンショット。

  5. 場所を選択して、Enter キーを折ります。

    サブスクリプションを選択する方法を示すスクリーンショット。

  1. [Angular] オプションを選択し、Enter キーを押します

    [Angular] オプションが選択されていることを示すスクリーンショット。

  2. アプリケーション コードの場所として「/angular-app」を入力し、Enter キーを押します。

    Angular アプリとして入力されたコードの場所を示すスクリーンショット。

  3. アプリで運用のためのファイルがビルドされるビルド出力場所として「dist/angular-app」と入力し、Enter キーを押します。

    Angular のビルド出力の場所を入力する方法を示すスクリーンショット。

  1. [React] オプションを選択し、Enter キーを押します

    [React] オプションが選択されていることを示すスクリーンショット。

  2. アプリケーション コードの場所として「/react-app」を入力し、Enter キーを押します。

    react アプリとして入力されたコードの場所を示すスクリーンショット。

  3. アプリで運用のためのファイルがビルドされるビルド出力場所として「build」と入力し、Enter キーを押します。

    React のビルド出力の場所を入力する方法を示すスクリーンショット。

  1. [Svelte] オプションを選択し、Enter キーを押します

    [Svelte] オプションが選択されていることを示すスクリーンショット。

  2. アプリケーション コードの場所として「/svelte-app」を入力し、Enter キーを押します。

    Svelte アプリとして入力されたコードの場所を示すスクリーンショット。

  3. アプリで運用のためのファイルがビルドされるビルド出力場所として「public」と入力し、Enter キーを押します。

    Svelte のビルド出力の場所を入力する方法を示すスクリーンショット。

  1. [Vue] オプションを選択し、Enter キーを押します

    [Vue] オプションが選択されていることを示すスクリーンショット。

  2. アプリケーション コードの場所として「/vue-app」を入力し、Enter キーを押します。

    Vue アプリとして入力されたコードの場所を示すスクリーンショット。

  3. アプリで運用のためのファイルがビルドされるビルド出力場所として「dist」と入力し、Enter キーを押します。

    Vue のビルド出力の場所を入力する方法を示すスクリーンショット

Note

お使いのリポジトリは、以前に使用していたものとは少し異なる場合があります。 4 つの異なるフォルダーに 4 つの異なるアプリが格納されています。 各フォルダーには、異なる JavaScript フレームワークで作成されたアプリが格納されています。 通常、リポジトリのルートに 1 つのアプリがあり、アプリ パスの場所として / を指定します。 これは、Azure Static Web Apps を使用して最初に場所を構成できる理由の良い例です。アプリのビルド方法を細かく制御できます。

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

    GitHub または [構成の表示または編集] でアクションを開くようにユーザーに求める確認コードのスクリーンショット。

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

    デプロイの待機中であることを示す VS Code UI のスクリーンショット。

  2. GitHub Actions で [アクション] メニューを展開すると、デプロイの進行状況を参照できます。

    GitHub Actions を使用して進行状況を確認する方法を示すスクリーンショット。

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

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

    静的 Web アプリ サイトを閲覧する方法を示すスクリーンショット。

お疲れさまでした。 初めてのアプリを Azure Static Web Apps にデプロイしました。

Note

アプリがまだビルドおよびデプロイされていないことを示す Web ページが表示されても心配しないでください。 しばらくしてからブラウザーを再更新してください。 Azure Static Web アプリが作成されると、GitHub アクションによって自動的に実行されます。 スプラッシュ ページが表示されても、アプリはデプロイ中です。