将你的 Astro 网站部署到 Microsoft Azure
Azure 是微软的云平台。你可以使用 Microsoft Azure 的 静态 Web 应用(Static Web Apps)服务来部署你的 Astro 网站。
本指南将引导你使用 Visual Studio Code 部署存储在 GitHub 上的 Astro 网站。对于其他设置,请参阅 Microsoft 指南以了解如何使用 Azure Pipelines 任务。
先决条件
标题为“先决条件”的部分要遵循本指南,你需要:
- 一个 Azure 帐户和订阅密钥。你可以在此处创建免费的 Azure 帐户。
- 你的应用代码已推送到 GitHub。
- Visual Studio Code 中的 SWA 扩展。
如何部署
标题为“如何部署”的部分-
在 VS Code 中打开你的项目。
-
打开静态 Web 应用扩展,登录 Azure,然后单击 + 按钮创建一个新的静态 Web 应用。系统将提示你指定要使用的订阅密钥。
-
按照扩展启动的向导为你的应用命名,选择一个框架预设,并指定应用根目录(通常是
/
)和构建文件位置(使用/dist
)。Astro 未在 Azure 的内置模板中列出,因此你需要选择custom
。向导将运行并在你的仓库的.github
文件夹中创建一个 GitHub Action。(如果该文件夹不存在,它将被自动创建。)
GitHub Action 将部署你的应用(你可以在 GitHub 上仓库的 Actions 选项卡中查看其进度)。成功完成后,你可以通过单击 SWA 扩展进度窗口中显示的浏览网站按钮来查看你的应用(该按钮将在 GitHub Action 运行后出现)。
已知问题
标题为“已知问题”的部分为你创建的 GitHub Action YAML 文件假定使用 Node 14。这意味着 Astro 构建会失败。要解决此问题,请使用以下代码片段更新你项目的 package.json 文件。
"engines": { "node": ">=18.0.0" },
官方资源
标题为“官方资源”的部分社区资源
标题为“社区资源”的部分- 将 Astro 网站部署到 Azure 静态 Web 应用
- 使用 GitHub Actions 将静态 Astro 网站部署到 Azure 静态 Web 应用
- 通过 GitHub Actions 使用 CLI 将 Astro 网站部署到 Azure 静态 Web 应用