クイックスタート: Azure Static Web Apps を使用して静的サイトを初めて構築する
Azure Static Web Apps では、コード リポジトリからアプリをビルドすることによって、Web サイトを発行します。 このクイックスタートでは、Visual Studio Code 拡張機能を使用して、Azure Static Web Apps にアプリケーションをデプロイします。
Azure サブスクリプションを持っていない場合は、無料試用版アカウントを作成できます。
前提条件
- GitHub アカウント
- Azure アカウント
- Visual Studio Code
- Visual Studio Code 用 Azure Static Web Apps 拡張機能
- Git をインストールする
リポジトリを作成する
この記事では、簡単に作業を開始できるように、GitHub テンプレート リポジトリを使用します。 このテンプレートには、Azure Static Web Apps を使用してデプロイするために使用されるスターター アプリが含まれます。
- 次の場所に移動して、新しいリポジトリを作成します。
- リポジトリの名前を my-first-static-web-app に設定します
注意
Azure Static Web Apps で Web アプリを作成するには、少なくとも 1 つの HTML ファイルが必要です。 このステップで作成するリポジトリには、1 つの index.html ファイルが含まれます。
[Create repository from template](テンプレートからリポジトリを作成する) を選択します。
リポジトリの複製
お使いの GitHub アカウントにリポジトリを作成したら、次のコマンドを使用して、プロジェクトをお使いのローカル コンピューターにクローンします。
git clone https://github.com/<YOUR_GITHUB_ACCOUNT_NAME>/my-first-static-web-app.git
<YOUR_GITHUB_ACCOUNT_NAME> は、必ずお使いの GitHub ユーザー名に置き換えてください。
次に、Visual Studio Code を開き、 [ファイル] > [フォルダーを開く] に移動して、お使いのマシンにクローンしたリポジトリをエディターで開きます。
静的 Web アプリを作成する
Visual Studio Code 内で、アクティビティ バーの Azure ロゴを選択して、Azure 拡張機能ウィンドウを開きます。
注意
Azure と GitHub へのサインインが必要です。 Visual Studio Code から Azure と GitHub にまだサインインしていない場合は、拡張機能により、作成プロセス中に両方にサインインするように求められます。
[Static Web Apps] ラベルで、プラス記号 を選択します。
エディターの上部にコマンド パレットが表示され、アプリケーションの名前を入力するように求められます。
「my-first-static-web-app」と入力し、Enter キーを押します。
アプリケーションの種類に一致するプリセットを選択します。
最も近い場所を選択し、Enter キーを押します。
アプリが作成されると、確認通知が Visual Studio Code に表示されます。
次に、 [Open Actions in GitHub](GitHub でアクションを開く) ボタンをクリックします。 このページには、アプリケーションのビルドの状態が表示されます。
GitHub アクションが完了したら、発行された Web サイトを参照できます。
ブラウザーで Web サイトを表示するには、Static Web Apps 拡張機能でプロジェクトを右クリックし、 [Browse Site](サイトの参照) を選択します。
リソースをクリーンアップする
このアプリケーションを引き続き使用しない場合は、拡張機能を使用して Azure Static Web Apps インスタンスを削除することができます。
Visual Studio Code エクスプローラー ウィンドウで、 [Static Web Apps] セクションに戻ります。 [my-first-static-web-app] を右クリックし、 [削除] を選択します。
