演習 - はじめに

Azure Static Web Apps では、GitHub リポジトリからアプリをビルドすることによって、Web サイトを運用環境に発行します。この演習では、GitHub リポジトリから任意のフロントエンドフレームワークを使用して、Web アプリケーションをビルドします。

リポジトリを作成する

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

テンプレートリポジトリの [テンプレートから作成] ページに移動します。 "404: ページが見つかりません" というエラーが表示された場合は、GitHub にサインインして、もう一度やり直してください。
[所有者] ドロップダウンで、いずれかの GitHub アカウントを選択します。
リポジトリに my-static-web-app という名前を付けます。
[テンプレートからリポジトリを作成] ボタンをクリックします

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

コンピューターでターミナルを開きます。
まず、コンピューター上の目的のディレクトリに GitHub リポジトリをクローンします。
```
git clone https://github.com/<YOUR_GITHUB_USERNAME>/my-static-web-app
```
ソースコードのフォルダーに移動します。
```
cd my-static-web-app
```
次に、以下のように、任意のフロントエンドフレームワークのフォルダーに移動します。
```
cd angular-app
```
```
cd react-app
```
```
cd svelte-app
```
```
cd vue-app
```
ここで、アプリケーションの依存関係をインストールします。
```
npm install
```
注意

エラー "PATH が見つかりません - Node.js を https://nodejs.org からインストールしたことを確認してください。" が発生した場合、[PATH に追加] オプションのインストールを含むカスタムセットアップの実行が必要になる場合があります。
最後に、フロントエンドクライアントアプリケーションを実行します。
```
npm start
```
```
npm start
```
```
npm run dev
```
```
npm run serve
```