Azure Static Web Apps ミドルウェア

Qwik City Azure Static Web Apps ミドルウェアを使用すると、Qwik City を Azure Static Web Apps に接続できます。

インストール

azure-swa アダプターを統合するには、add コマンドを使用します。

npm run qwik add azure-swa

アダプターは、adapters/ ディレクトリ内に新しい vite.config.ts を追加し、次のような新しいエントリファイルが作成されます。

└── adapters/
    └── azure-swa/
        └── vite.config.ts
└── src/
    └── entry.azure-swa.tsx

さらに、package.json 内で、build.server と deploy スクリプトが更新されます。

本番ビルド

本番環境用にアプリケーションをビルドするには、build コマンドを使用します。このコマンドは、自動的に npm run build.server と npm run build.client を実行します。

npm run build

Azureへのデプロイ

npm run qwik add azure-swa を使用して統合をインストールした後、プロジェクトは Azure Static Web Apps にデプロイする準備ができています。

デプロイするには、3 つの方法があります。

1. Static Web Apps CLI を使用してデプロイする

   ローカル環境からアプリケーションをデプロイするには、次を実行します。

   npx swa deploy

   これにより、Azure へのログインとデプロイをガイドするウィザードが起動します。

2. GitHub からデプロイする

   GitHub 経由でアプリケーションをデプロイできます。Git リポジトリを作成し、すべてのコードをコミットしてから、ブランチを GitHub にプッシュします。

   Azure ポータルから Azure Static Webapp を作成し、デプロイの詳細で GitHub リポジトリを選択します。ビルドの詳細を尋ねられたら、「カスタム」を選択し、次の値を設定します。

   • アプリの場所: "."
   • API の場所: "./azure-functions"
   • 出力場所: "./dist"

   この設定により、リポジトリに GitHub ワークフローが確立されます。このワークフローにより、メインブランチに変更がプッシュまたはマージされるたびに、アプリケーションが自動的にデプロイされます。

   結果のワークフローファイルは、「リポジトリ/ビルド構成」ブロックに次を追加することで適用する必要があります。

   skip_api_build: true

   詳細は、Azure Static Web Apps クイックスタート を参照してください。

3. 任意の CI システムからデプロイする

   任意の CI システムを使用して Azure Static Web Apps にデプロイできます。Azure SWA デプロイトークンを SWA_CLI_DEPLOYMENT_TOKEN 環境変数として設定します。設定が完了したら、パイプラインで次のコマンドを実行できます。

   swa deploy ./dist --api-location ./azure-functions --env production

この手順を完了するには、Azure アカウント が必要です。