次の方法で共有


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 servenpm start を使用することがよくあります。

Static Web Apps SWA CLI を開発サーバーに要求をプロキシするように設定できます。これによって、Static Web Apps CLI を使用しながら、フレームワークの CLI の利点を両方とも得ることができます。

SWA CLI と共にフレームワークの開発サーバーを使用するには、次の 2 つの手順があります。

  1. 通常どおり、フレームワークのローカル開発サーバーを起動します。 フレームワークで使用される URL (ポートを含む) を書き留めておきます。

  2. 開発サーバーの 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 からエミュレートされたサービスを使用してアプリケーションにアクセスできます

次のステップ