Azure + React + ASP.NET Core 项目笔记一:项目环境搭建(二)

有意义的标题

  • pnpm 安装
  • umi4 脚手架搭建
  • 打包语句变更
  • Visual Studio调试
  • Azure 设置变更
  • 发布

pnpm 安装

参考官网,或者直接使用npm安装

npm install -g pnpm

umi4 脚手架搭建

我这里用的umi4,官网已附上
这里需要把clientapp清空,之后

cd ClientApp
pnpm dlx create-umi@latest

选择你需要的选项后就会自动安装
安装好之后就可以运行看看

$ pnpm dev╔═════════════════════════════════════════════════════╗║ App listening at:                                   ║║  >   Local: https://127.0.0.1:8000                  ║
ready - ║  > Network: https://192.168.1.1:8000                ║║                                                     ║║ Now you can open browser with the above addresses👆 ║╚═════════════════════════════════════════════════════╝
event - compiled successfully in 1121 ms (388 modules)
event - MFSU compiled successfully in 1308 ms (875 modules)

在这里插入图片描述

打包语句变更

npm 都改成pnpm,之前熟悉了npm的同学也可以试试pnpm

pnpm build

之后也跟之前的语句类似,打包好的文件会放在dist文件夹中

Visual Studio调试

如果想在Visual Studio中调试,记得SpaProxyServerUrl替换一下,这样就能自动跳转了

<SpaProxyServerUrl>http://localhost:8000</SpaProxyServerUrl>

Azure 设置变更

由于我这次项目使用Azure部署,但是默认设置会有点问题,并不会显示页面,是因为路径问题
在Azure里的Web App中,进入Configuration,
Path mappings -> Virtual applications and directories修改一下

\wwwroot   => \wwwroot\dist

发布

之后就是发布啦
Visual Studio中右键dist
选择发布dist
之后在Web App中Console中也能发现dist文件夹上传了
再打开我们的domian
在这里插入图片描述
完美!
如果有帮助到你,能点个赞嘛!!谢谢!!!

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

如若内容造成侵权/违法违规/事实不符,请联系长河编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

YUVToRGB(CUDA Conversion)库的学习

目录 前言1. YUVToRGB1.1 Supported Feature1.2 Performance1.2.1 Performance Table1.2.2 How to Benchmark1.2.3 How to Verify the Accuracy 1.3 User Integration1.4 Summary 2. YUVToRGB案例2.1 环境配置2.2 run案例 3. YUVToRGB浅析4. 补充知识4.1 YUV不同格式区别4.2 Lu…

代码随想录算法训练营Day60 | 84. 柱状图中最大的矩形

文章目录 84. 柱状图中最大的矩形首尾加 0双指针 84. 柱状图中最大的矩形 题目链接 | 解题思路 本题和接雨水的题目相互呼应&#xff0c;但是难度略有提升&#xff0c;同样是一道非常棒的题&#xff01; 在接雨水中&#xff0c;需要找到每一列的左侧最大值和右侧最大值&…

Mybatis基础知识(一)

Mybatis基础知识(一) Mybatis基础知识 Mybatis基础知识(一)一、MyBatis特性二、和其它持久化层技术对比三、MyBatis的简单使用1、创建maven工程2、创建pojo对象3、创建MyBatis的核心配置文件①properties②typeAliases③environments:④mappers:引入映射文件 4、创建mapper接口…

fabic如何将绘图原点移到画布中心

情况说明&#xff1a; fabic默认绘图原点为left&#xff1a;0&#xff0c;top&#xff1a;0 后端给我的内容是按照x&#xff0c;y返回的&#xff0c;需要将坐标系移到fabic画布的中心位置&#xff0c;找了下网上合适的砖&#xff0c;想一句命令直接设置&#xff0c;结果没有。…

C++QT day7

仿照vector手动实现自己的myVector&#xff0c;最主要实现二倍扩容功能 #include <iostream>using namespace std;template<typename T> class my_vector {int size;//可存储的容量大小int num;//当前存储的元素个数T* data;//存储数据的空间地址public://无参构造…

zabbix 钉钉微信企微告警(动作操作消息内容模板)

一、环境配置 1、配置zabbix服务端 2、配置监控主机&监控项&监控模板 zabbix配置安装_this page is used to test the proper operation of _疯飙的蜗牛的博客-CSDN博客 二、触发器 触发器的本质就是一个条件判断&#xff0c;对于不同的监控数据来说&#xff0c;我…

uniapp H5生成画布,插入网络图片。下载画布

因为网络图片不能直接使用ctx.drawImage(&#xff09;插入。得使用uni.getImageInfo()方法下载后插入。 但是当画布中存在多张网络图片时&#xff0c;必须等待uni.getImageInfo()下载完成后才行。这样得下载套下载。太过于繁琐。所以定义了一个递归下载方法。同时避免下载图片异…

k8s集群使用ingress转发grafana服务

文章目录 前言一、思路二、grafana准备1. grafana-configmap.yaml2. grafana.yaml 三、ingress准备1. ingress.yaml2. grafana-externalname.yaml3. ingress-nginx-controller 四、 本机host文件准备五、访问测试 前言 在k8s集群中&#xff0c;使用ingress服务转发grafana的页…

centos安装flink,通过windows访问webui

1. 安装flink 1.1. flink的下载 通过flink官网下载flink安装包 https://flink.apache.org/ 下载安装包 1.2 flink在centos上的安装 将下载好的flink-1.17.1-bin-scala_2.12.tgz安装包放到centos目录下 解压文件&#xff1a; [rootlocalhost ~]# tar -zxvf flink-1.17.…

利用Windows搭建Emby媒体库服务器,轻松实现无公网IP的远程访问

文章目录 1.前言2. Emby网站搭建2.1. Emby下载和安装2.2 Emby网页测试 3. 本地网页发布3.1 注册并安装cpolar内网穿透3.2 Cpolar云端设置3.3 Cpolar内网穿透本地设置 4.公网访问测试5.结语 1.前言 在现代五花八门的网络应用场景中&#xff0c;观看视频绝对是主力应用场景之一&…

基于SpringBoot + Vue的项目整合WebSocket的入门教程

1、WebSocket简介 WebSocket是一种网络通信协议&#xff0c;可以在单个TCP连接上进行全双工通信。它于2011年被IETF定为标准RFC 6455&#xff0c;并由RFC7936进行补充规范。在WebSocket API中&#xff0c;浏览器和服务器只需要完成一次握手&#xff0c;两者之间就可以创建持久性…

Python 基础知识结构

一、关键字 二、内置函数 三、运算符 1、算数运算符 加 数字与字符串拼接 - 减 * 乘 数字与字符串重复 / 除 返回浮点数 % 取模 返回除法的余数 奇偶判断 ** 幂次 // 整除 返回商的整数部分&#xff0c;向下取整数&#xff0c;注意&#xff1a;-10//3,出现负数时的情况只要参…

北斗+5G 织就精确定位的“天罗地网”

北斗卫星导航系统&#xff08;简称北斗系统&#xff09;是我国自主发展、独立运行的全球卫星导航系统&#xff0c;为全球用户提供全天候、全天时、高精度的定位、导航和授时服务。2020年7月31日&#xff0c;北斗三号系统建成开通并提供全球服务&#xff0c;北斗系统进入全面推广…

基于element-ui的年份范围选择器

基于element-ui的年份范围选择器 element-ui官方只有日期范围和月份范围选择器&#xff0c;根据需求场景需要&#xff0c;支持年份选择器&#xff0c;原本使用两个分开的年份选择器实现的&#xff0c;但是往往有些是不能接受的。在网上找了很多都没有合适的&#xff0c;所以打…

第3章_瑞萨MCU零基础入门系列教程之开发环境搭建与体验

本教程基于韦东山百问网出的 DShanMCU-RA6M5开发板 进行编写&#xff0c;需要的同学可以在这里获取&#xff1a; https://item.taobao.com/item.htm?id728461040949 配套资料获取&#xff1a;https://renesas-docs.100ask.net 瑞萨MCU零基础入门系列教程汇总&#xff1a; ht…

Golang使用sqlx报错max_prepared_stmt_count超过16382

文章目录 背景mysql的预处理查看实例预处理详情com_stmt_prepare开启performance_schema 本地查看预处理语句 预处理语句飙升的原因生成预处理语句但是不close执行sql过程中发生错误 go服务分析抓包分析发送给mysql的包debug查看预处理细节sqlx发送statement command指令sqlx关…

第6章_瑞萨MCU零基础入门系列教程之串行通信接口(SCI)

本教程基于韦东山百问网出的 DShanMCU-RA6M5开发板 进行编写&#xff0c;需要的同学可以在这里获取&#xff1a; https://item.taobao.com/item.htm?id728461040949 配套资料获取&#xff1a;https://renesas-docs.100ask.net 瑞萨MCU零基础入门系列教程汇总&#xff1a; ht…

Kafka3.0.0版本——消费者(Range分区分配策略以及再平衡)

目录 一、Range分区分配策略原理1.1、Range分区分配策略原理的示例一1.2、Range分区分配策略原理的示例二1.3、Range分区分配策略原理的示例注意事项 二、Range 分区分配策略代码案例2.1、创建带有4个分区的fiveTopic主题2.2、创建三个消费者 组成 消费者组2.3、创建生产者2.4、…

PowerShell脚本免杀/bypass/绕过杀毒软件,ReconFTW 漏洞扫描

PowerShell脚本免杀/bypass/绕过杀毒软件&#xff0c;ReconFTW 漏洞扫描。 #################### 免责声明&#xff1a;工具本身并无好坏&#xff0c;希望大家以遵守《网络安全法》相关法律为前提来使用该工具&#xff0c;支持研究学习&#xff0c;切勿用于非法犯罪活动&#…

STM32 FreeRTOS 内存问题

1. STM32L151C8T6 内存&#xff0c;64Kb 的Flash&#xff08;代码就是烧录在这里面的&#xff09;&#xff0c;16Kb 的RAM&#xff0c;程序跑起来之后的内存&#xff0c;相当于我们高考时发的草稿纸&#xff0c;直接影响程序的运行速度&#xff0c;可以用STM32 CubeMx 软件直接…