将你的 Astro 网站部署到 Microsoft Azure
Azure 是微软旗下的云平台。你可以使用 Microsoft Azure 的 Static Web Apps 服务来部署你的 Astro 网站。
本指南将指导你使用 Visual Studio Code 部署存储在 GitHub 上的 Astro 网站。其他设置请参阅 Microsoft 的指南,了解如何使用 Azure Pipelines 任务。
前期准备
段落标题 前期准备为了能完成本指南,你将需要:
- 需要一个 Azure 账户和订阅密钥。你可以在此处创建一个免费 Azure 账户。
- 你的应用代码需要推送到 GitHub。
- 需要在 Visual Studio Code 中安装 SWA 扩展。
如何部署
段落标题 如何部署-
在 VS Code 中打开你的项目。
-
打开 Static Web Apps 扩展,在 Azure 上登录,并点击 + 按钮创建一个新的 Static Web App。你将被提示选择要使用的订阅密钥。
-
按照扩展启动的向导指引,为你的应用程序指定一个名称,并选择一个框架预设,然后指定应用程序的根目录(通常为
/
)和构建文件的位置(通常为/dist
)。在内置的 Astro 模板中并没有列出 Azure 选项,所以你需要选择custom
选项。接着启动向导将运行并在你的仓库的.github
文件夹中创建一个 GitHub Action(如果该文件夹不存在,则会自动创建)。
GitHub Action 将部署你的应用程序(你可以在 GitHub 仓库的 Actions 选项卡中查看部署的进度)。当部署成功完成后,你可以通过点击 SWA 扩展进度窗口中显示的地址旁的 Browse Website 按钮(此按钮将在执行 GitHub Action 后显示)来查看你的应用程序。
故障排除
段落标题 故障排除假设为你创建的 GitHub Action YAML 使用的是 Node 14,这意味着 Astro 会构建失败。要解决这个问题,请在你的项目的 package.json 文件中添加以下代码片段。