使用 Azure 部署静态网页

news2024/9/24 4:26:11

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

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/1483661.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

ROS开发基础-Linux基础第四部(开发板设置本地IP)

一 、网线连接设备 使用网线连接jetson NX与机械臂,如下图所示: 二、 修改上位机IPV4 IP ①测试是否可连接。网线连接机械臂之后,在桌面打开终端输入命令“ping 192.168.1.18”,如不可正常通信,可按照下述步骤进行设置。 ②在U…

React富文本编辑器开发(一)

这是一个系统的完整的教程,每一节文章的内容都很重要。这个教程学完后自己可以开发出一个相当完美的富文本编辑器了。下面就开始我们今天的内容: 安装 是的,我们的开发是基于Slate的开发基础,所以要安装它: yarn ad…

Go 互斥锁的实现原理?

Go sync包提供了两种锁类型:互斥锁sync.Mutex 和 读写互斥锁sync.RWMutex,都属于悲观锁。 概念 Mutex是互斥锁,当一个 goroutine 获得了锁后,其他 goroutine 不能获取锁(只能存在一个写者或读者,不能同时…

Neural Network Diffusion论文解读

详细解读:扩散模型生成神经网络参数,速度快了44倍:Neural Network Diffusion论文解读 摘要: 扩散模型在图像和视频生成方面取得了显著的成功。在这项工作中,我们证明了扩散模型也可以生成高性能的神经网络参数。我们…

程序员的金三银四求职宝典!

目录 ​编辑 程序员的金三银四求职宝典 一、为什么金三银四是程序员求职的黄金时期? 二、如何准备金三银四求职? 1. 完善简历 2. 增强技术能力 3. 提前考虑目标公司 4. 提前准备面试 三、程序员求职的常见面试题 1. 数据结构和算法 2. 数据库 …

在原有pytorch环境下安装DGL库和其对应的CUDA【自用】

前段时间看到一篇AAAI2024的论文Patch-wise Graph Contrastive Learning for Image Translation,它采用GNN的思想来进行image-to-image translation的任务,非常的新颖,但我进行复现的时候,发现直接下载它里面需要的DGL库是无法运行…

旧的Spring Security OAuth已停止维护,全面拥抱新解决方案Spring SAS

Spring Authorization Server 替换 Shiro 指引 背景 Spring 团队正式宣布 Spring Security OAuth 停止维护,该项目将不会再进行任何的迭代 目前 Spring 生态中的 OAuth2 授权服务器是 Spring Authorization Server 已经可以正式生产使用作为 SpringBoot 3.0 的最新…

C#中什么是非托管代码?托管代码和非托管代码有什么区别

在C#中,托管代码和非托管代码是两种不同类型的代码,它们在内存管理和执行环境上有所不同。 托管代码(Managed Code): 托管代码是由.NET运行时(CLR,Common Language Runtime)管理和执…

Neo4j学习笔记2:使用Neo4j-admin import快速初始化导入数据

上一篇提到过小规模数据如何新增到数据库,但是一旦数据开始变多,效率就不够看了 同样的数据,使用上一篇的方法,预计要26天,但是使用Neo4j-admin import只要1分钟 参考文档在这里 文件处理 具体的导入csv文件结构可以…

没有经验的新手小白能做抖音小店无货源吗?

大家好,我是电商花花。 一个没有电商经验,没有货源的新手能做抖音小店吗? 这应该是很多想做抖音小店的一个疑虑吧,想做又担心做不好。 今天花花说一下关于我个人对抖音小店无货源的一些小见解吧,希望能给到你建议。 …

为什么网站页面没有被百度搜索收录?是网站被攻击了?

例如,为什么网站页面没有被百度搜索收录? 网站是否受到攻击? 网站索引量和网站流量之间有关系吗? 您在运行网站或小程序时是否有过这样的疑问? 下面我将为大家详细解答这些问题。 1.PC/H5站点相关 1、为什么新网站页面…

【真机Bug】异步加载资源未完成访问单例导致资源创建失败

1.错误表现描述 抽卡时,10抽展示界面为A。抽取内容可能是整卡或者碎片,抽到整卡,会有立绘展示和点击详情的按钮。点击详情后出现详情页B。【此时界面A预制体被销毁,卡片数据进入数据缓存池】点击页面B的返回按钮,单例…

2024理解这几个安全漏洞,你也能做安全测试!

如今安全问题显得越来越重要,一个大型的互联网站点,你如果每天查看日志,会发现有很多尝试攻击性的脚本。 如果没有,证明网站影响力还不够大。信息一体化的背后深藏着各类安全隐患,例如由于开发人员的不严谨导致为Web应…

【计算复杂性理论】证明复杂性(九):命题鸽巢原理的指数级归结下界——更简短的证明

往期文章: 【计算复杂性理论】证明复杂性(Proof Complexity)(一):简介 【计算复杂性理论】证明复杂性(二):归结(Resolution)与扩展归结&#xff…

基于springboot实现二手图书交易平台系统项目【项目源码+论文说明】

基于springboot实现二手图书交易平台系统演示 摘要 本文讲述了基于B/S模式的校园二手交易网站统的设计与实现。所谓的校园二手交易网站统是通过网站推广互联企业的二手物品和技术服务,并使客户随时可以了解企业和企业的产品,为客户提供在线服务和订单处…

【2024最新版】我用python代码带你看最绚烂的烟花,浪漫永不过时!

2024年就快要到了,提前用python代码给自己做一个烟花秀庆祝一下。本次介绍的python实例是实现一个简易的烟花秀。 一、步骤分析 总的来说,要实现烟花秀的效果,需要以下几个步骤: 1.1、创建一个类,包含烟花各项粒子的…

Golang 调度器 GPM模型

Golang 调度器 GPM模型 1 多进程/线程时代有了调度器需求 在多进程/多线程的操作系统中,就解决了阻塞的问题,因为一个进程阻塞cpu可以立刻切换到其他进程中去执行,而且调度cpu的算法可以保证在运行的进程都可以被分配到cpu的运行时间片。这…

Springboot项目实战

文章目录 SpringBootVue后台管理系统所需软件下载、安装、版本查询Vue搭建一个简单的Vue项目 *Spring项目项目架构 SpringBootVue后台管理系统 学习视频: https://www.bilibili.com/video/BV1U44y1W77D/?spm_id_from333.337.search-card.all.click&vd_sourcec…

搜索算法(算法竞赛、蓝桥杯)--DFS迭代加深

1、B站视频链接&#xff1a;B25 迭代加深 Addition Chains_哔哩哔哩_bilibili 题目链接&#xff1a;Addition Chains - 洛谷 #include <bits/stdc.h> using namespace std; int n,d;//d为搜索的深度 int a[10005];//存储加成的序列bool dfs(int u){//搜索第u层 if(ud)r…

【论文阅读】基于图像处理和卷积神经网络的板式换热器气泡识别与跟踪

Bubble recognizing and tracking in a plate heat exchanger by using image processing and convolutional neural network 基于图像处理和卷积神经网络的板式换热器气泡识别与跟踪 期刊信息&#xff1a;International Journal of Multiphase Flow 2021 期刊级别&#xff1a;…