Static Web Apps CLI エミュレーターを起動する
重要
Static Web Apps CLI からのデプロイのセキュリティを向上させるために、2025 年 1 月 15 日までに Static Web Apps CLI の最新バージョン (2.0.2) にアップグレードする必要がある破壊的変更が導入されました。
Static Web Apps は、Web アプリをホストして実行するクラウドベースのプラットフォームです。 アプリをローカルで実行する場合は、クラウドでのアプリの実行方法を模倣するのに役立つ特別なツールが必要です。
Static Web Apps CLI (SWA CLI) には、アプリが Azure 上でどのように実行されるかを、代わりにコンピューターでのみ実行することで模倣するエミュレーターが含まれています。
swa start
コマンドは、既定の設定でエミュレーターを起動します。 既定では、エミュレーターはポート 4280
を使用します。
個々のコマンドの詳細については、CLI リファレンスを参照してください。
ファイルシステムから静的ファイルを提供する
SWA CLI を使用すると、他のツールを必要とせずに、ファイルシステムから静的コンテンツを直接提供できます。 静的コンテンツは、現在のディレクトリまたは特定のフォルダーから提供できます。
サービスの提供元... | コマンド | Notes |
---|---|---|
現在のフォルダー | swa start |
既定では、CLI は現在の作業ディレクトリから静的コンテンツ (HTML、画像、スクリプト、CSS ファイル) を起動して提供します。 |
特定のフォルダー | swa start ./my-dist |
動作をオーバーライドして、エミュレーターを別の静的アセット フォルダーで起動できます。 |
開発サーバーを使用する
アプリのフロントエンドを開発するときに、フレームワークの既定の開発サーバーを使用したい場合があります。 フレームワークのサーバーを使用すると、ライブ リロードやホット モジュール交換 (HMR) などの利点を活用できます。
たとえば、Angular 開発者は、開発サーバーを実行するために ng serve
や npm start
を使用することがよくあります。
Static Web Apps SWA CLI を開発サーバーに要求をプロキシするように設定できます。これによって、Static Web Apps CLI を使用しながら、フレームワークの CLI の利点を両方とも得ることができます。
SWA CLI と共にフレームワークの開発サーバーを使用するには、次の 2 つの手順があります。
通常どおり、フレームワークのローカル開発サーバーを起動します。 フレームワークで使用される URL (ポートを含む) を書き留めておきます。
開発サーバーの URL を渡して、新しいターミナルで SWA CLI を起動します。
swa start <DEV_SERVER_URL>
Note
プレースホルダー <DEV_SERVER_URL>
は、必ず実際の値に置き換えてください。
開発サーバーを起動する
SWA CLI で開発サーバーを起動することで、ワークフローをさらに簡略化できます。
--run
パラメーターから swa start
コマンドにカスタム コマンドを渡すことができます。
swa start <DEV_SERVER_URL> --run <DEV_SERVER_LAUNCH_COMMAND>
いくつかの異なるフレームワークでエミュレーターを起動する例を次に示します。
フレームワーク | command |
---|---|
React | swa start http://localhost:3000 --run "npm start" |
Blazor | swa start http://localhost:5000 --run "dotnet watch run" |
Jekyll | swa start http://localhost:4000 --run "jekyll serve" |
開発サーバーを起動するときにカスタム スクリプトを実行する場合は、--run
パラメーターを使用することもできます。
swa start http://localhost:4200 --run "./startup.sh"
上記のコマンドを使用すると、http://localhost:4280
からエミュレートされたサービスを使用してアプリケーションにアクセスできます