iis部署前后端分离项目(React前端,Node.js后端)

iis虽然已经有点过时,但不少用户还在用,故总结一下。

1. 安装iis

如果电脑没有自带iis管理器,打开控制面板->程序->启用或关闭Windows功能,勾选iis安装即可

![[Pasted image 20240627164313.png]]

2. 部署前端项目

打开iis,添加网站,物理路径指向前端打包后文件夹

![[Pasted image 20240627164510.png]]

此时浏览器打开http://localhost:3000即可正常访问,但是输入其它路由刷新会404

![[Pasted image 20240627173100.png]]

★解决iis部署后vue、react项目刷新404问题
  1. 安装url重写功能

下载地址:https://www.iis.net/downloads/microsoft/url-rewrite

![[Pasted image 20240627165136.png]]

  1. 添加规则

下载安装后,重启iis后,找到站点,进入URL重写模块,添加空白规则

![[Pasted image 20240627165440.png]]

名称随意,选择与模式匹配、通配符、*
添加两个条件:不是文件,不是目录
最后重写url指向index.html即可

![[03052015f5b59a07aea33d14e6a1dc43.png]]

重启站点,刷新不再404

3. 部署node服务

  1. 安装iisnode功能

下载地址:https://github.com/tjanczuk/iisnode/wiki/iisnode-releases

![[Pasted image 20240627170344.png]]

  1. 添加新站点,指向node的部署包

![[Pasted image 20240627170535.png]]

  1. 在node的部署包下,添加web.config文件

![[Pasted image 20240627170812.png]]

内容为:

<configuration><system.webServer><!-- indicates that the hello.js file is a node.js application to be handled by the iisnode module --><handlers><add name="iisnode" path="app.js" verb="*" modules="iisnode" /></handlers><!-- use URL rewriting to redirect the entire branch of the URL namespaceto hello.js node.js application; for example, the following URLs will all be handled by hello.js:http://localhost/node/express/myapp/foohttp://localhost/node/express/myapp/bar--><rewrite><rules><rule name="myapp"><match url="/*" /><action type="Rewrite" url="app.js" /></rule></rules></rewrite></system.webServer>
</configuration>
  1. 修改app.js中的listen端口为process.env.PORT
// old
app.listen(3001, function () {console.log("服务器启动成功了端口是:3001")
})// new
app.listen(process.env.PORT||3001)
  1. 重启api站点,浏览器打开http://localhost:3001/test能正常访问

![[Pasted image 20240627171152.png]]

4. 前端反向代理

前端请求接口地址是:http://localhost:3000/api/test
实际需要转发到:http://localhost:3001/test

  1. 安装Application Request Routing功能

下载地址:https://www.iis.net/downloads/microsoft/application-request-routing

![[Pasted image 20240627171651.png]]

  1. 开启反向代理

安装好重启iis,打开Application Request Routing,然后点击Server Proxy Settings…,再勾选Enable proxy

![[Pasted image 20240627171804.png]]

![[Pasted image 20240627171915.png]]

![[Pasted image 20240627171935.png]]

  1. 添加代理规则

回到web站点,添加空白规则,与模式匹配,通配符,*api/*

![[Pasted image 20240627172208.png]]

重写URL,http://127.0.0.1:3001/{R:2},勾选停止处理后续规则

![[Pasted image 20240627172234.png]]

为啥是{R:2},通配符测试,因为我的后台没有api前缀,如果后台有/api可以用{R:0}

![[Pasted image 20240627172418.png]]

  1. 规则顺序

api匹配规则,需要置顶,可以点击规则上下移动

![[Pasted image 20240627172630.png]]

至此,重启站点,打开http://localhost:3000/api/test,也能访问

![[Pasted image 20240627172751.png]]

5. 前后端同一个端口部署

前面说了分离部署,占用两个端口,通过代理转发请求,能不能共用一个端口?

  1. web站点添加应用程序,物理路径指向

![[Pasted image 20240628101036.png]]

![[Pasted image 20240628101125.png]]

  1. web站点URL重写保留一个刷新404的规则即可

![[Pasted image 20240628102825.png]]

  1. api站点URL重写有两个规则,一个是自己的node,一个继承了父站点,注意顺序

![[Pasted image 20240628102943.png]]

  1. 因为多了一层api应用程序,node端接口也需要多加一层api前缀(目前不知道指向app.js时如何去掉api这层,只能后端同步加一层了),打开http://localhost:3000/api/test能正常访问

![[Pasted image 20240628103128.png]]

同端口部署,其实就是通过规则匹配到api跳走,但这种方式,不方便前后端单独更新程序,需要整个重启,而且部署时规则匹配容易出现问题,有利有弊,自行选择

5. 其它错误

Q1. iis文件夹权限不足

文件夹右键属性-安全-编辑-添加用户或组Everyone,勾选所有权限

![[Pasted image 20240627100515.png]]

Q2. 500.19无法访问请求的页面

![[Pasted image 20240627134157.png]]

进入Framework64版本文件夹

cd C:\Windows\Microsoft.NET\Framework64\v4.0.30319

打开cmd执行unlock:

C:\windows\system32\inetsrv\appcmd unlock config -section:system.webServer/handlers
Q3. The iisnode module is unable to start the node.exe process.

![[Pasted image 20240627134738.png]]

cmd执行:

net stop was /y & net start w3svc

或者在web.config中指定node.exe的位置

<iisnode watchedFiles="*.js;node_modules\*;routes\*.js;views\*.jade"  nodeProcessCommandLine="C:\Program Files\nodejs\node.exe"/>

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

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

相关文章

Docker加速器配置指南:提升镜像下载速度的秘诀 加速安装Mysql Redis ES

在安装 Docker 镜像时&#xff0c;由于官方镜像下载速度较慢&#xff0c;我们可以使用阿里云的镜像加速器来提升下载速度。 使用阿里云镜像加速器 首先&#xff0c;找到并配置阿里云的镜像加速器。安装教程如下&#xff1a; 登录阿里云&#xff0c;进入容器镜像服务。直达链…

05 docker 镜像

目录 1. 镜像 2. 联合文件系统 3. docker镜像加载原理 4. 镜像分层 镜像分层的优势 5. 容器层 1. 镜像 镜像是一种轻量级、可执行的独立软件包&#xff0c;它包含运行某个软件所需的所有内容&#xff0c;我们把应用程序和配置依赖打包好行程一个可交付的运行环境&#xf…

AMEYA360代理:海凌科60G客流量统计雷达模块 4T4R出入口绊数计数

数字化时代&#xff0c;不管是大型商城还是各种连锁店&#xff0c;客流统计分析都可以帮助企业更加精准地了解顾客需求和消费行为。 海凌科推出一款专用于客流量统计的60G雷达模块&#xff0c;4T4R&#xff0c;可以实时进行固定范围内的人体运动轨迹检测&#xff0c;根据人体的…

聊一聊领域驱动和贫血

写在前面 前段时间跟领导讨论技术债概念时不可避免地提到了代码的质量&#xff0c;而影响代码质量的因素向来都不是单一的&#xff0c;诸如项目因素、管理因素、技术选型、人员素质等等&#xff0c;因为是技术债务&#xff0c;自然就从技术角度来分析&#xff0c;单纯从技术角…

亚马逊跟卖僵尸选品采集,批量多站点,多关键词同时采集获取!

今天给卖家分享下亚马逊跟卖选择僵尸链接&#xff0c;现在很多卖家&#xff0c;找僵尸链接是不是都是通过亚马逊前端页面找或者是通过搜索&#xff0c;这样不但费时费力&#xff0c;还找不出几个僵尸链接&#xff0c;而且就算是找到了&#xff0c;也需要各种检查&#xff0c;非…

Electron、Win11静默打印与PowerShell:技术融合与应用探索

Electron、Win11静默打印与PowerShell&#xff1a;技术融合与应用探索 在现代软件开发与办公环境中&#xff0c;技术的融合与创新不断推动着工作效率的提升和用户体验的优化。本文将深入探讨Electron框架、Windows 11&#xff08;Win11&#xff09;静默打印技术以及PowerShell…

java版本工程项目管理系统 Spring Cloud+Spring Boot+Mybatis+Vue+ElementUI+前后端分离构建工程项目管理系统

工程项目管理系统 Spring CloudSpring BootMybatisVueElementUI前后端分离构建工程项目管理系统 1. 项目背景 一、随着公司的快速发展&#xff0c;企业人员和经营规模不断壮大。为了提高工程管理效率、减轻劳动强度、提高信息处理速度和准确性&#xff0c;公司对内部工程管理的…

【操作系统期末速成】 EP03 | 学习笔记(基于五道口一只鸭)

文章目录 一、前言&#x1f680;&#x1f680;&#x1f680;二、正文&#xff1a;☀️☀️☀️2.1 考点五&#xff1a;进程的概念及特征2.1 考点六&#xff1a;进程的状态与切换 一、前言&#x1f680;&#x1f680;&#x1f680; ☀️ 回报不在行动之后&#xff0c;回报在行动…

GCN结合Transformer炸场!性能暴涨74%,效率翻3倍

最近发现了两篇效果很妙的GCN结合Transformer的最新工作&#xff0c;分享给大家&#xff1a; MP-GT&#xff1a;通过结合GCN和Transformer方法来增强App使用预测的准确性&#xff0c;实现了74.02%的性能提升&#xff0c;且训练时间减少了79.47%。 MotionAGFormer&#xff1a;结…

MySQL 图形化界面

填完信息之后&#xff0c;圆圈处可以验证是否可以连接数据库 展示所有数据库&#xff08;因为有的可能连上&#xff0c;却没有数据库显示&#xff09;

“小红书、B站崩了”,背后的阿里云怎么了?

导语&#xff1a;阿里云不能承受之重 文 | 魏强 7月2日&#xff0c;“小红书崩了”、“B站崩了”等话题登上了热搜。 据第一财经、财联社等报道&#xff0c;7月2日&#xff0c;用户在B站App无法使用浏览历史关注等内容&#xff0c;消息界面、更新界面、客服界面均不可用&…

【python】PyQt5事件机制、定时器原理分析和实战演练

✨✨ 欢迎大家来到景天科技苑✨✨ &#x1f388;&#x1f388; 养成好习惯&#xff0c;先赞后看哦~&#x1f388;&#x1f388; &#x1f3c6; 作者简介&#xff1a;景天科技苑 &#x1f3c6;《头衔》&#xff1a;大厂架构师&#xff0c;华为云开发者社区专家博主&#xff0c;…

Qt时间日期处理与定时器使用总结

一、日期时间数据 1.QTime 用于存储和操作时间数据的类&#xff0c;其中包括小时(h)、分钟(m)、秒(s)、毫秒(ms)。函数定义如下&#xff1a; //注&#xff1a;秒(s)和毫秒(ms)有默认值0 QTime::QTime(int h, int m, int s 0, int ms 0) 若无须初始化时间数据&#xff0c;可…

常见sql语句练习

Tips&#xff1a;之前查看网上的文章感觉太乱了&#xff0c;所以自己整理了一套sql语句来练习&#xff0c;主要也可以拿来应对面试&#xff0c;需要的可以自行下载练习 包含基本语句、聚合函数、模糊查询、范围查询、排序、聚合、分组、分页、子查询、索引和视图、左右连接、双…

分享快乐,分享5款我认为好用的软件

​ 分享是奉献的果实&#xff0c;分享是快乐的前提。每天给小伙伴们分享自己认可的软件&#xff0c;也是莫大的一种幸福&#xff0c;今天依然带来五款好用的软件。 1.文本编辑——Notepads ​ Notepads是一款简约高效的文本编辑器&#xff0c;专为Windows10及以上版本设计。它…

Debian linux安装最新版Cmake

直接sudo apt install camke不是最新版本 卸载cmake sudo apt autoremove cmake下载cmake cmake官网 最上面的是候选版本&#xff0c;往下滑是最新稳定版 解压&#xff08;改成自己的包&#xff09; tar -zxvf cmake-3.30.0-rc4.tar.gz进入解压后的文件夹 lscd cmake-3.3…

java常用类(3)

目录 一. 正则表达式 二. Math类 三. Random类 四. Date类 五. Calendar类 六. SimpDateFormate类 七. BigInteger类 八. BigDecimal类 一. 正则表达式 正则表达式(Regular Expression)就是用一些特殊的符号去匹配一个字符串是否符合规则,利用String类中的matches()方…

蒙阴蜜桃节:北纬 35 度的甜蜜盛宴

蒙阴&#xff0c;这座位于北纬 35 度黄金水果带的魅力之城&#xff0c;凭借着沙壤土、长日照、大温差、好生态的天然禀赋&#xff0c;孕育出了令人陶醉的“蒙阴蜜桃——北纬 35 度的甜”。 7月2日—3日&#xff0c;主题为“蒙阴好丰景 桃香产业兴”的国家鲁中山区桃产业集群项目…

3d打开模型的时候怎么没有灯光?---模大狮模型网

在3D建模与渲染过程中&#xff0c;灯光是至关重要的元素之一&#xff0c;直接影响到最终场景的视觉效果和真实感。然而&#xff0c;有时打开3D模型时可能会发现缺乏适当的灯光设置&#xff0c;这会导致场景显得暗淡或平淡无奇。本文将探讨为何在打开3D模型时可能没有灯光的原因…

QGC添加添加QML可访问的单例

文章目录 前言一、添加文件二、修改qgroundcontrol.pro三、修改QGCApplication.cc四、修改QGroundControlQmlGlobal.h五、修改QGroundControlQmlGlobal.cc六、测试前言 QGC 4.2 一、添加文件 在src目录下添加文件夹SingletonTest,在里面新建SingletonTest.cc和SingletonTes…