演習 - はじめに

完了

この演習では、Web サイトを自動的に構築して発行する GitHub アクションを含む、Azure Static Web App インスタンスを作成します。

このモジュールでは、サンドボックスを介して利用可能なリソースを使用します。これにより、Azure サブスクリプションへの無料の一時的なアクセス、および演習を完了するために必要なリソースが提供されます。 必ずこのページの上部にあるサンドボックスをアクティブにしてください。 このモジュールでの演習の作業中、各ユニットは、前の演習で作成したコンテンツに依存します。 このため、1 つの JavaScript フレームワークを選択し、それを以降のすべての演習に使用してください。

リポジトリを作成する

まず、GitHub テンプレートを使用してリポジトリを作成します。 一連のリポジトリ テンプレートを使用できます。これには、さまざまなフロントエンド フレームワークに実装されたスターター アプリが含まれています。

1. GitHub のテンプレートからの作成ページに移動し、テンプレート リポジトリを開きます。

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

3. リポジトリ名として「my-static-web-app-and-api」を入力します。

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

   テンプレートからプロジェクトを作成すると、GitHub によってバックグラウンドでリポジトリが構築されます。

アプリをローカルで実行する

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

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

   Windows を使用している場合、システム トレイの検索ボックスに「cmd」と入力できます。

2. リポジトリを自分のマシンに複製するには、次のコードをコマンド プロンプト ウィンドウに貼り付けます。

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

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

   Note

   コマンド プロンプト ターミナルへのコピーで問題が発生した場合は、タイトル バーのアイコンを右クリックし、[プロパティ] タブで、[コピー/貼り付けとして Ctrl + Shift + C/V を使用する] がオンになっていることを確認します。

3. 複製したソース コードのディレクトリに変更します。

   cd my-static-web-app-and-api
   

4. 任意のフロントエンド フレームワークのディレクトリに移動します。

   cd angular-app
   

   cd react-app
   

   cd svelte-app
   

   cd vue-app
   

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

   npm install
   

6. 次のコマンドを使用して、各依存関係の最新バージョンがインストールされていることを確認します。

   npm audit fix
   

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

   npm start
   

   npm start
   

   npm run dev
   

   npm run serve
   

アプリに移動する

アプリケーション バンドルが生成されてコンパイルされると、ブラウザー タブが自動的に開き、アプリケーションがローカルで実行されていることが表示されます。

Angular のローカル ホストは http://localhost:4200 です。

React のローカル ホストは http://localhost:3000 です。

Svelte のローカル ホストは http://localhost:5000 です。

Vue のローカル ホストは http://localhost:8080 です。

データや API がまだないため、アプリに [データを読み込んでいます] と表示されるはずです。 このレッスンでは、後で Web アプリ用の API を追加します。

ターミナルで、Ctrl+C キーを押してバッチ ジョブを停止します。

おめでとうございます。 アプリケーションをビルドし、ローカルに実行されていることをブラウザーで確認しました。 これで、アプリケーションを Azure Static Web Apps に発行できます。

静的 Web アプリを作成する

独自の GitHub リポジトリを作成しました。 Visual Studio Code 用 Azure Static Web Apps 拡張機能を使って、独自の静的 Web アプリを作成できるようになりました。

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

1. Visual Studio Code を開きます。

2. 上部のメニューから [表示]>[拡張機能] の順に選択し、検索ボックスに「Azure Static Web Apps」と入力します。

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

アプリケーション フォルダーを開く

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

2. 「File: Open Folder...」と入力します。

3. my-static-web-app-and-api フォルダーを選択します。

4. [開く] を選択して、Visual Studio Code でフォルダーを開きます。

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

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

2. 「Azure: Sign In」と入力し、プロンプトに従って認証を行います。

   重要

   必ず、ブラウザー内のサンドボックスのアクティブ化に使用したものと同じアカウントを使用して Azure にサインインしてください。 同じアカウントを使用すると、コンシェルジェ サブスクリプションを使用できるようになり、このチュートリアルを使用している間、無料の Azure リソースにアクセスできます。

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

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

2. 「Azure: サブスクリプションの選択」を入力し、[コンシェルジェ サブスクリプション] を除くすべての選択を解除します。

   

変更をコミットする

このプロセスで、アプリケーションの依存関係をインストールしたときに、プロジェクト内の一部のファイルが更新されました。 続行するには、これらの変更をリポジトリにコミットする必要があります。

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

2. 「Git Commit All」と入力して選択します。

3. ファイルの先頭に「initial commit」と入力します。

4. Git コミット ファイルを保存して閉じます。

   この時点で、変更のサーバーへの同期について心配する必要はありません。 静的 Web アプリを発行すると、更新は GitHub にコピーされます。

静的 Web アプリの作成

静的 Web アプリを作成するには、現在 Azure および GitHub で認証されているセッションが必要です。 両方のプロバイダーにまだサインインしていない場合は、作成プロセス中に、拡張機能により、サインインするように求められます。

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

2. 「Azure Static Web Apps: Create Static Web App...」と入力して選択します。

   コマンド パレット プロンプトの残りの部分に次の値を入力します。

   Prompt	値
   サブスクリプション	[コンシェルジェ サブスクリプション] を選択する
   名前	「my-static-web-app-and-api」と入力する
   リージョン	最も近いリージョンを選択します
   プリセット	[Angular] を選択する
   アプリケーション コードの場所	「angular-app」と入力する
   Output location (出力場所)	「dist/angular-app」と入力する

2. 「Azure Static Web Apps: 静的 Web アプリの作成...」と入力して選択します。

   コマンド パレット プロンプトの残りの部分に次の値を入力します。

   Prompt	値
   サブスクリプション	[コンシェルジェ サブスクリプション] を選択する
   名前	「my-static-web-app-and-api」と入力する
   リージョン	最も近いリージョンを選択します
   プリセット	React の選択
   アプリケーション コードの場所	「react-app」と入力する
   Output location (出力場所)	dist と入力します

2. 「Azure Static Web Apps: 静的 Web アプリの作成...」と入力して選択します。

   コマンド パレット プロンプトの残りの部分に次の値を入力します。

   Prompt	値
   サブスクリプション	[コンシェルジェ サブスクリプション] を選択する
   名前	「my-static-web-app-and-api」と入力する
   リージョン	最も近いリージョンを選択します
   プリセット	[Svelte] を選択する
   アプリケーション コードの場所	「svelte-app」と入力する
   Output location (出力場所)	「public」を入力する

2. 「Azure Static Web Apps: 静的 Web アプリの作成...」と入力して選択します。

   コマンド パレット プロンプトの残りの部分に次の値を入力します。

   Prompt	値
   サブスクリプション	[コンシェルジェ サブスクリプション] を選択する
   名前	「my-static-web-app-and-api」と入力する
   リージョン	最も近いリージョンを選択します
   プリセット	[Vue] を選択する
   アプリケーション コードの場所	「vue-app」と入力する
   Output location (出力場所)	dist と入力します

注意

このリポジトリは、これまで使用した他のプロジェクトとは異なります。 このプロジェクトには、4 つの異なるフォルダーに 4 つの異なるアプリが格納されています。 各フォルダーには、異なる JavaScript フレームワークで作成されたアプリが格納されています。 通常、リポジトリのルートに 1 つのアプリがあるだけなので、アプリ パスの場所として既定の / を使用します。 これは、Azure Static Web Apps で最初に場所を構成する方法を示す最適な例です。アプリのビルド方法を完全に制御できます。

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

   

   ビルドの構成中、Visual Studio Code にビルドの状態が示されます。

   

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

   

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

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

   

   データや API がまだないため、アプリに [データを読み込んでいます] と表示されるはずです。 このモジュールでは、後で Web アプリ用の API を追加します。

お疲れさまでした。 アプリは Azure Static Web Apps にデプロイされます。

Note

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

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

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

1. Ctrl+Shift+P キーを押してコマンド パレットを開きます。

2. 「Git: Pull」と入力して選択します。

3. Enter キーを押します。

次のステップ

次に、Azure Functions プロジェクトを使用して API をビルドおよび実行する方法について学習します。