Azure Static Web Apps CLI の概要
Azure Static Web Apps Web サイトはクラウドでホストされ、多くの場合、クラウド サービスのコレクションを接続します。 開発中、およびアプリをローカルで実行する必要がある場合は、クラウドでのアプリの実行方法を模倣するツールが必要です。
Static Web Apps CLI (SWA CLI) には、Azure でのアプリの実行方法を概算する一連のローカル サービスが含まれていますが、代わりにコンピューターでのみ実行されます。
Azure Static Web Apps CLI には、次のサービスが用意されています。
- ローカルの静的サイト サーバー
- フロントエンド フレームワーク開発サーバーへのプロキシ
- API エンドポイントへのプロキシ (Azure Functions Core Tools を通じて利用可能)
- モックの認証と承認サーバー
- ローカル ルートと構成設定の適用
しくみ
次のグラフは、要求がローカルで処理される方法を示しています。
重要
CLI によって処理されるアプリケーションにアクセスするには、http://localhost:4280 に移動します。
ポート
4280に対して行われた要求は、要求の種類に応じて適切なサーバーに転送されます。HTML や CSS などの静的コンテンツ要求は、内部 CLI 静的コンテンツ サーバーによって、またはデバッグ用のフロントエンド フレームワーク サーバーによって処理されます。
認証と承認要求は、アプリにフェイク ID プロファイルを提供するエミュレーターによって処理されます。
Functions Core Tools ランタイム1 では、サイトの API への要求が処理されます。
すべてのサービスからの応答は、すべて 1 つのアプリケーションであるかのようにブラウザーに返されます。
UI と Azure Functions API アプリを別個に起動したら、Static Web Apps CLI を起動し、次のコマンドを使用して実行中のアプリを指定してください。
swa start http://localhost:<DEV-SERVER-PORT-NUMBER> --api-location http://localhost:7071
必要に応じて、swa init コマンドを使用する場合、Static Web Apps CLI は、アプリケーション コードを確認し、CLI 用の swa-cli.config.json 構成ファイルをビルドします。 swa-cli.config.json ファイルを使用すると、swa start を実行して、アプリケーションをローカルで起動することができます。
1 Azure Functions Core Tools は、お使いのシステムにまだインストールされていない場合、CLI によって自動的にインストールされます。
作業の開始
次のリソースを使用して、Static Web Apps CLI の使用を開始します。
| リソース | 説明 |
|---|---|
| 静的 Web Apps CLI をインストールする (SWA CLI) | Azure Static Web Apps CLI をコンピューターにインストールします。 |
| 環境を構成する | アプリケーションが構成情報を読み取る方法を設定します。 |
| Web サイト エミュレーターを起動する | サービスを開始して、Web サイトをローカルで提供します。 |
| ローカル API サーバーを起動する | サービスを開始して、API エンドポイントをローカルに提供します。 |
| Azure に配置する | Azure 上の運用環境にアプリケーションをデプロイします。 |
Note
多くの場合、フロントエンド フレームワークを使用して構築されたサイトでは、api ルートで要求を正しく処理するためにプロキシ構成設定が必要です。 Azure Static Web Apps CLI を使用する場合、プロキシの場所の値は /api になり、CLI を使用しない場合、この値は http://localhost:7071/api になります。