使用 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 中打开您的项目：

  1. 点击左侧边栏的 Azure 图标。如果您尚未登录，请登录，如果是 Azure 新用户，请按照提示创建您的账户。

  2. 从 Azure 菜单点击“+”号，然后选择“创建静态网站应用”。

  3. 如果您尚未登录 GitHub，系统会提示您登录。如果您有未提交的文件更改，系统会提示您提交这些更改。

  4. 在提示时设置您的应用信息：

     1. 区域：选择离最近的
     2. 项目结构：选择 “React”
     3. 应用代码位置：/
     4. 构建位置：dist

  5. 完成后，您将在屏幕底部看到一个通知，并且您的项目中将添加一个新的 GitHub Action 工作流。如果您点击“在 GitHub 中打开操作”，您将看到为您创建的操作，并且它目前正在运行。

  6. 要查看部署状态，请在 VS Code 左侧边栏的 Azure 标签中找到您的静态网站应用资源。

  7. 部署完成后，您可以通过右键点击您的静态网站应用资源并选择“浏览站点”，来查看您全新的公共可访问应用。

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

  🤩 额外福利：为您的 Azure 静态网站应用设置自定义域名

  1. Create Static Web App

     

  2. 等待一会后，自动出现所要创建的名字，也可以自定义。

     

  3. East US

     

  4. React

     

  5. 应用代码位置：/， 构建位置：dist

     

  6. 构建成功，Open Action in GitHub

     

  7. 等待一段时间，如下页面表示成功构建。

     

  8. 点击 Static Web App ，选择刚刚部署好的应用，右击 Browse Site

     

  9. 提示成功部署。

     

  —— END ——

  ---

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

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