演習 - はじめに

  • 7 分

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

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

ヒント

ノードの依存関係に問題が発生した場合は、Node Version Manager がインストールされていて、以前のバージョンに切り替えることができることを確認してください。

リポジトリを作成する

次に、GitHub テンプレート リポジトリを使用して新しいリポジトリを作成します。 一連のテンプレートを使用でき、それぞれに、異なるフロントエンド フレームワークでビルドされたスターター アプリが含まれています。

  1. テンプレート リポジトリの [テンプレートから作成] ページに移動します。

    • 404 ページが見つかりませんというエラーが表示された場合は、GitHub にサインインして、もう一度やり直してください。

  2. 所有者の入力を求められた場合は、GitHub アカウントのいずれかを選択します。

  3. リポジトリに my-static-web-app-authn という名前を付けます。

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

ローカルでアプリをクローンする

これで、GitHub アカウントに my-static-web-app-authn という名前の GitHub リポジトリが作成されました。 次は、リポジトリをクローンし、コンピューターでローカルにコードを実行します。

  1. コンピューターでターミナルを開きます。

  2. まず、コンピューターに GitHub リポジトリをクローンします。

    git clone https://github.com/<YOUR_GITHUB_USERNAME>/my-static-web-app-authn

  3. ソース コードのフォルダーに移動します。

    cd my-static-web-app-authn

CORS をローカルで構成する

Azure Static Web Apps に発行する際、クロスオリジン リソース共有 (CORS) について心配する必要はありません。 リバース プロキシを使用して Azure 上の API と通信できるように、Azure Static Web Apps で自動的にアプリが構成されます。 しかし、ローカルで実行する場合は、Web アプリと API が通信できるように CORS を構成する必要があります。

ここで、コンピューターでの Web アプリによる API に対する HTTP 要求を許可するように、Azure Functions に指示します。

  1. api/local.settings.json という名前のファイルを作成します。

  2. そのファイルに次の内容を追加します。

    {
  "Host": {
    "CORS": "http://localhost:4200"
  }
}

    {
  "Host": {
    "CORS": "http://localhost:3000"
  }
}

    {
  "Host": {
    "CORS": "http://localhost:5000"
  }
}

    {
  "Host": {
    "CORS": "http://localhost:8080"
  }
}

Note

local.settings.json ファイルは .gitignore ファイルに一覧表示されます。これにより、このファイルは GitHub にプッシュされなくなります。 これは、このファイルにシークレットを格納できるため、GitHub では不要となるためです。 このため、テンプレートからリポジトリを作成したときに、ファイルを作成する必要がありました。

API を実行する

api フォルダーには、Azure Functions プロジェクトが Web アプリ用 HTTP エンドポイントと共に含まれています。 最初に次の手順に従って、ローカルで API を実行します。

Note

Azure Functions をローカルで実行できるように、Azure Functions Core Tools を必ずインストールしてください。

  1. Visual Studio Code で、F1 キーを押してコマンド パレットを開きます。

  2. 「Terminal: Create New Integrated Terminal」と入力して選択します。

  3. api フォルダーに移動します。

    cd api

  4. Azure Functions アプリをローカルで実行します。

    func start

Web アプリを実行する

  1. 次に、以下のように、任意のフロントエンド フレームワークのフォルダーに移動します。

    cd angular-app

    cd react-app

    cd svelte-app

    cd vue-app

  2. ここで、アプリケーションの依存関係をインストールします。

    npm install

  3. 最後に、フロントエンド クライアント アプリケーションを実行します。

    npm start

    npm start

    npm run dev

    npm run serve

アプリに移動する

次は、アプリケーションがローカルで実行されていることを確認します。 フロントエンド アプリケーションはそれぞれ別のポートで実行されます。

  1. リンクを選択してアプリケーションに移動します。

  1. http://localhost:4200 を参照します。

    Screenshot showing the UI of your Angular web app.

  1. http://localhost:3000 を参照します。

    Screenshot showing the UI of your React web app.

  1. http://localhost:5000 を参照します。

    Screenshot showing the UI of your Svelte web app.

  1. http://localhost:8080 を参照します。

    Screenshot showing the UI of your Vue web app.

アプリに製品のリストが表示されます。

  1. ここで、ターミナルで Ctrl + C キーを押して、実行中のアプリを停止します。

アプリケーションがビルドされ、ブラウザーでローカルに実行されるようになりました。

次は、アプリケーションを Azure Static Web Apps に発行します。

静的 Web アプリを作成する

GitHub リポジトリを作成したので、Visual Studio Code 用 Azure Static Web Apps 拡張機能を使用して Static Web Apps インスタンスを作成できるようになりました。

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: Sign In」と入力して Azure にサインインします。

    重要

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

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

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

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

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

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

    Screenshot showing how to filter by subscription.

Visual Studio Code を使用して静的 Web アプリを作成する

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

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

    Screenshot of the Azure Logo in VS Code.

    Note

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

  3. [Static Web Apps] ラベルの上にマウス ポインターを置き、+ (プラス記号) を選択します。

    Screenshot showing the application name typed out.

  4. エディターの上部にコマンド パレットが開いたら、[コンシェルジェ サブスクリプション] を選択し、Enter キーを押します。

    Screenshot showing how to select a subscription.

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

    Screenshot showing how to create Static Web Apps.

  6. 最も近いリージョンを選択し、Enter キーを押します。

    Screenshot showing location selection.

  7. 対応するフレームワーク オプションを選択し、Enter キーを押します。

  1. アプリケーション コードの場所として angular-app を選択し、Enter キーを押します。

    Screenshot showing the Angular application code location.

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

    Screenshot showing the Angular app files path.

  1. アプリケーション コードの場所として react-app を選択し、Enter キーを押します。

    Screenshot showing the React application code location.

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

    Screenshot showing the React app files path.

  1. アプリケーション コードの場所として svelte-app を選択し、Enter キーを押します。

    Screenshot showing the Svelte application code location.

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

    Screenshot showing the Svelte app files path.

  1. アプリケーション コードの場所として vue-app を選択し、Enter キーを押します。

    Screenshot showing the Vue application code location.

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

    Screenshot showing the Vue app files path.

Note

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

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

    Screenshot showing the Open Actions in GitHub or View/Edit Config pop-up window.

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

:::image type="content" source="../media/extension-waiting-for-deployment.png" alt-text="Screenshot showing the waiting for deployment button.":::

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

    Screenshot showing the GitHub Actions menu in VS Code.

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

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

    Screenshot showing the browse site button.

おめでとうございます。 アプリを Azure Static Web Apps にデプロイしました。

Note

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

GitHub から変更内容をプルする

GitHub から最新の変更内容をプルし、Azure Static Web Apps によって作成されたワークフロー ファイルを停止します。

  1. F1 キーを押して、コマンド パレットを開きます。

  2. 「Git: Pull」と入力して選択し、Enter キーを押します。

次の手順

次に、ユーザー認証をアプリに統合する方法について学習します。