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

相关推荐
超龄超能程序猿18 小时前
dnSpy 使用教程
windows·microsoft
Leinwin21 小时前
微软开源GitHub Copilot Chat,AI编程领域迎新突破
microsoft·github·copilot
旷世奇才李先生1 天前
Pillow 安装使用教程
深度学习·microsoft·pillow
喜欢吃豆2 天前
目前最火的agent方向-A2A快速实战构建(二): AutoGen模型集成指南:从OpenAI到本地部署的全场景LLM解决方案
后端·python·深度学习·flask·大模型
大熊背2 天前
图像处理专业书籍以及网络资源总结
人工智能·算法·microsoft
Leinwin2 天前
微软发布新一代存储优化型虚拟机:Azure Laosv4、Lasv4 和 Lsv4 系列
microsoft·azure
亚力山大抵2 天前
实验六-使用PyMySQL数据存储的Flask登录系统-实验七-集成Flask-SocketIO的实时通信系统
后端·python·flask
蹦蹦跳跳真可爱5892 天前
Python----大模型(使用api接口调用大模型)
人工智能·python·microsoft·语言模型
Triv20252 天前
ECU开发工具链1.10版:更强大的测量、校准与数据分析体验.
microsoft·数据分析·汽车电子开发·校准流程自动化·高速信号采集·测试台架集成·实时数据监控
爱奥尼欧2 天前
【Linux 系统】基础IO——Linux中对文件的理解
linux·服务器·microsoft