使用 Azure 部署静态网页

Author：AXYZdong 硕士在读工科男
有一点思考，有一点想法，有一点理性！
定个小小目标，努力成为习惯！在最美的年华遇见更好的自己！
CSDN@AXYZdong，CSDN首发，AXYZdong原创

唯一博客更新的地址为： 👉 AXYZdong的博客 👈

B站主页为：AXYZdong的个人主页

参考 GitHub 仓库：https://github.com/education/codespaces-project-template-js

前面的一些准备步骤可以参考仓库的README，本文主要贴一下使用 Azure 部署过程中的图片。

Azure 静态网站应用

Azure 静态网站应用是微软提供的静态网站托管解决方案（或在用户浏览器中渲染的网站，而非服务器上）。通过 Azure，这项服务提供了扩展网站的额外机会，包括 Azure 函数、身份验证、预发布版本等。

您需要同时拥有 Azure 和 GitHub 账户来部署您的网络应用。如果您还没有 Azure账户，可以在部署过程中创建，或通过以下链接创建：

在 Codespaces 中打开您的项目：

点击左侧边栏的 Azure 图标。如果您尚未登录，请登录，如果是 Azure 新用户，请按照提示创建您的账户。
从 Azure 菜单点击"+"号，然后选择"创建静态网站应用"。
如果您尚未登录 GitHub，系统会提示您登录。如果您有未提交的文件更改，系统会提示您提交这些更改。
在提示时设置您的应用信息：
1. 区域：选择离最近的
2. 项目结构：选择 "React"
3. 应用代码位置 ：/
4. 构建位置 ：dist
完成后，您将在屏幕底部看到一个通知，并且您的项目中将添加一个新的 GitHub Action 工作流。如果您点击"在 GitHub 中打开操作"，您将看到为您创建的操作，并且它目前正在运行。
要查看部署状态，请在 VS Code 左侧边栏的 Azure 标签中找到您的静态网站应用资源。
部署完成后，您可以通过右键点击您的静态网站应用资源并选择"浏览站点"，来查看您全新的公共可访问应用。

遇到问题？ 在创建您的静态网站应用时，如果您被提示选择 Azure 订阅但无法选择，检查 VS Code 中的"账户"标签。如果出现"授予访问权限..."选项，请确保选择这些选项。如果您收到错误消息"RepositoryToken 无效..."，请切换到 Visual Studio Code 网页版 (vscode.dev) 并在那里重复步骤。
🤩 额外福利 ：为您的 Azure 静态网站应用设置自定义域名

Create Static Web App
等待一会后，自动出现所要创建的名字，也可以自定义。
East US
React
应用代码位置 ：/， 构建位置 ：dist
构建成功，Open Action in GitHub
等待一段时间，如下页面表示成功构建。
点击 Static Web App ，选择刚刚部署好的应用，右击 Browse Site
提示成功部署。

------ END ------

如果以上内容有任何错误或者不准确的地方，欢迎在下面 👇 留言。或者你有更好的想法，欢迎一起交流学习~~~

更多精彩内容请前往 AXYZdong的博客