使用 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账户，可以在部署过程中创建，或通过以下链接创建：
- 创建一个（无需信用卡）Azure 学生账户
- 创建一个新的 Azure 账户
在 Codespaces 中打开您的项目：
-
点击左侧边栏的 Azure 图标。如果您尚未登录，请登录，如果是 Azure 新用户，请按照提示创建您的账户。
-
从 Azure 菜单点击“+”号，然后选择“创建静态网站应用”。
-
如果您尚未登录 GitHub，系统会提示您登录。如果您有未提交的文件更改，系统会提示您提交这些更改。
-
在提示时设置您的应用信息：
- 区域：选择离最近的
- 项目结构：选择 “React”
- 应用代码位置：/
- 构建位置：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的博客
-
