演習 - はじめに

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