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

  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的博客

相关推荐
拉姆哥的小屋1 小时前
用 Flask 打造宠物店线上平台:从 0 到 1 的全栈开发实践
数据库·oracle·flask
java1234_小锋1 小时前
【NLP舆情分析】基于python微博舆情分析可视化系统(flask+pandas+echarts) 视频教程 - 微博文章数据可视化分析-文章分类下拉框实现
python·自然语言处理·flask
檀越剑指大厂1 小时前
【Python系列】Flask 应用中的主动垃圾回收
开发语言·python·flask
檀越剑指大厂2 小时前
【Python系列】使用 memory_profiler 诊断 Flask 应用内存问题
开发语言·python·flask
awonw6 小时前
[python][flask]Flask-Principal 使用详解
开发语言·python·flask
Little-Hu6 小时前
QML视图组件:ListView、GridView、TableView、PathView
数据库·microsoft·qml
Azure DevOps8 小时前
在Azure DevOps的工作项中使用markdown
运维·microsoft·flask·azure·devops
awonw9 小时前
[python][基础]Flask 技术栈
开发语言·python·flask
Hi2024021710 小时前
支持OCR和AI解释的Web PDF阅读器:解决大文档阅读难题
pdf·flask·llm·ocr·阅读器
java1234_小锋12 小时前
【NLP舆情分析】基于python微博舆情分析可视化系统(flask+pandas+echarts) 视频教程 - 热词数量分析日期统计功能实现
python·自然语言处理·flask