你当前正在访问 Microsoft Azure Global Edition 技术文档网站。 如果需要访问由世纪互联运营的 Microsoft Azure 中国技术文档网站,请访问 https://docs.azure.cn。
将 Gatsby 站点部署到 Azure 静态 Web 应用
本文演示如何创建 Gatsby Web 应用程序并将其部署到 Azure 静态 Web 应用。 最终结果是一个新的静态 Web 应用站点(其中包含关联的 GitHub 操作),使你可以控制如何生成和发布应用。
在本教程中,你将了解如何执行以下操作:
- 创建 Gatsby 应用
- 设置 Azure 静态 Web 应用站点
- 将 Gatsby 应用部署到 Azure
如果没有 Azure 订阅,请在开始之前创建一个 Azure 免费帐户。
使用 Gatsby 命令行接口 (CLI) 创建 Gatsby 应用:
打开终端
使用 npx 工具通过 Gatsby CLI 创建新应用。 这可能需要几分钟的时间。
npx gatsby new static-web-app
转到新建的应用
cd static-web-app
初始化 Git 存储库
git init
git add -A
git commit -m "initial commit"
备注
如果你使用的是最新版本的 Gatsby,你可能需要修改 package.json 以包含 "engines": { "node": ">=18.0.0" },
你需要具有 GitHub 上的存储库来创建新的 Azure 静态 Web 应用资源。
从 https://github.com/new 创建一个名为 gatsby-static-web-app 的空白 GitHub 存储库(不创建自述文件)。
接下来,将刚创建的 GitHub 存储库作为远程存储库添加到本地存储库。 确保添加 GitHub 用户名,来替代下面命令中的 <YOUR_USER_NAME>
占位符。
git remote add origin https://github.com/<YOUR_USER_NAME>/gatsby-static-web-app
将本地存储库推送到 GitHub。
git push --set-upstream origin main
下列步骤说明了如何创建新的静态站点应用并将其部署到生产环境。
转到 Azure 门户
选择“创建资源”
搜索“静态 Web 应用”
选择“Static Web Apps”
选择“创建”
在“基本信息”选项卡上,输入下列值。
属性 |
值 |
订阅 |
Azure 订阅名称。 |
资源组 |
my-gatsby-group |
名称 |
my-gatsby-app |
计划类型 |
免费 |
Azure Functions API 和过渡环境的区域 |
选择离你最近的区域。 |
Source |
GitHub |
选择“使用 GitHub 登录”,然后向 GitHub 进行身份验证。
输入以下 GitHub 值。
属性 |
值 |
组织 |
选择所需的 GitHub 组织。 |
存储库 |
选择“gatsby-static-web-app”。 |
分支 |
选择“主要”。 |
备注
如果看不到任何存储库,则可能需要在 GitHub 中授权 Azure Static Web Apps。
浏览到 GitHub 存储库,转到“设置”>“应用程序”>“授权 OAuth 应用”,选择“Azure Static Web Apps”,然后选择“授予”。 对于组织存储库,你必须是组织的所有者才能授予权限。
在“生成详细信息”部分,从“生成预设”下拉列表中选择“Gatsby”,并保留默认值 。
选择“查看 + 创建”,以验证详细信息是否全部正确。
选择“创建”,开始创建应用服务静态 Web 应用并为部署预配 GitHub Actions。
部署完成后,请选择“转到资源”。
在资源屏幕上,选择 URL 链接,以打开已部署的应用程序。 你可能需要等待一两分钟,GitHub Actions 才能完成。
如果不打算继续使用此应用程序,可按以下步骤删除 Azure 静态 Web 应用资源:
- 打开 Azure 门户
- 在顶部搜索栏中,按之前提供的名称搜索应用程序
- 单击应用
- 单击“删除”按钮
- 单击“是”以确认删除操作