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;回报在行动…

linux内核编译流程、驱动加载顺序

内核编译 根据顶层Makefile找到vmlinux目标开始分析&#xff1a; vmlinux: scripts/link-vmlinux.sh autoksyms_recursive $(vmlinux-deps) FORCE$(call if_changed,link-vmlinux)vmlinux-deps : $(KBUILD_LDS) $(KBUILD_VMLINUX_OBJS) $(KBUILD_VMLINUX_LIBS) 根据这个展开 …

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;…

2025秋招NLP算法面试真题(十四)-RoBERTa-Bert的改进

RoBERTa:更大更多更强 今天分享一个Bert的改进工作RoBERTa。RoBERTa是训练充分的Bert。 主要掌握以下几点,与Bert相比较,RoBERTa预训练的时候: 动态掩码:comparable or slightly better去掉NSP任务并且更改数据输入格式为全部填充可以跨越多个文档更多数据,更大bsz,更…

《浔川AI社 AI 产品上线公告》——浔川总社(浔川周报第一期 24.7.2pm)

《浔川 Python 社 AI 产品上线公告》 尊敬的用户&#xff1a; 您好&#xff01; 我们非常高兴地向您宣布&#xff0c;浔川 AI 社经过不懈的努力和创新&#xff0c;现已成功上线 3 款令人瞩目的 AI 产品&#xff01; 这 3 款 AI 产品分别是&#xff1a; 浔川AI翻译v3.0&#xff…

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;可…

redis 消息订阅命令

在 Redis 中&#xff0c;消息订阅和发布是一种用于实现消息传递的机制。主要命令包括 SUBSCRIBE、UNSUBSCRIBE、PUBLISH 和 PSUBSCRIBE 等。下面是如何使用这些命令的详细说明和示例。 1. SUBSCRIBE 命令 SUBSCRIBE 命令用于订阅一个或多个频道&#xff0c;以接收这些频道发布…

常见sql语句练习

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

无人值守过磅管理系统实现数据实时传递

依据为某公司信息化系统建设前提下&#xff0c;客商平台在线预约称重、车辆到场智能排队系统、空车入场取装车票装车、门岗智能管控系统、建设地磅无人值守、进出货场管理系统、手机APP远程派车、查询报表、查询实时过磅数据&#xff0c;集中式监控管理系统&#xff0c;配合无人…

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

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