Azure 静态 Web 应用中间件

Qwik City Azure 静态 Web 应用中间件允许您将 Qwik City 连接到 Azure 静态 Web 应用.

安装

要集成 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 静态 Web 应用了。

有三种部署方式

1. 使用 静态 Web 应用 CLI 部署

   您可以从本地环境部署应用程序，使用

   npx swa deploy

   这将启动一个向导，引导您完成登录和部署到 Azure 的过程。

2. 从 GitHub 部署

   您可以通过 GitHub 部署应用程序。创建一个 Git 仓库，提交所有代码，然后将您的分支发布到 GitHub。

   通过 Azure 门户创建 Azure 静态 Web 应用，并在部署详细信息中选择 GitHub 仓库。当提示您输入构建详细信息时，选择“自定义”并设置以下值

   • 应用程序位置："."
   • API 位置："./azure-functions"
   • 输出位置："./dist"

   此设置将在您的仓库中建立一个 GitHub 工作流。使用此工作流，您的应用程序将在更改推送到主分支或合并到主分支时自动部署。

   结果工作流文件必须通过在“仓库/构建配置”块中添加以下内容来进行调整

   skip_api_build: true

   查看 Azure 静态 Web 应用快速入门 以获取更多信息。

3. 从任何 CI 系统部署

   您可以使用任何 CI 系统将应用程序部署到 Azure 静态 Web 应用。将您的 Azure SWA 部署令牌设置为 SWA_CLI_DEPLOYMENT_TOKEN 环境变量。完成此操作后，您可以在管道中运行以下命令

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

请注意，您需要一个 Azure 帐户 才能完成此步骤！