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

news2024/11/27 10:30:25

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 namespace
    to hello.js node.js application; for example, the following URLs will 
    all be handled by hello.js:
    
        http://localhost/node/express/myapp/foo
        http://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.coloradmin.cn/o/1903361.html

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

相关文章

JAVA的线性表数据结构的超详解

目录 顺序表的顺序存储结构 1.数组 2.顺序表 顺序表的声明&#xff0c;存储操作以及效率分析 1.泛型类 2.顺序表的插入操作 3. 顺序表的删除操作 4.顺序表查询操作 5.顺序表的应用 线性表的链式存储结构 单链表的基本操作 顺序表的顺序存储结构 数组是实现顺序存储…

java项目总结5

1.单列集合顶层接口Collction 集合体系结构 注意&#xff1a;因为Collection定义的方法是共性的&#xff0c;使用不能通过搜引来删除&#xff0c;只能通过元素的对象进行删除&#xff0c;返回值是boolean类型。例如我添加了"aaa"进List集合&#xff0c;删除则要对象…

开放式耳机哪个牌子好?悠律、漫步者、韶音全面对比与推荐

对于现在的无线耳机市场而言&#xff0c;开放式耳机迎来的真正的大爆发&#xff0c;关键的是它采用了定向传声方式&#xff0c;我们在运动时除了可以感受到音乐带来的快乐外&#xff0c;还能时刻保持对外界环境音的警觉。 今天&#xff0c;我们将为大家详细对比推荐三款备受瞩…

TCP的p2p网络模式

TCP的p2p网络模式 1、tcp连接的状态有以下11种 CLOSED&#xff1a;关闭状态LISTEN&#xff1a;服务端状态&#xff0c;等待客户端发起连接请求SYN_SENT&#xff1a;客户端已发送同步连接请求&#xff0c;等待服务端相应SYN_RECEIVED&#xff1a;服务器收到客户端的SYN请请求&…

2024年世界人工智能大会(WAIC)各大佬的精彩发言

2024年世界人工智能大会&#xff08;WAIC&#xff09;在上海举行&#xff0c;受到了广泛关注和参与。以下是大会首日的主要观点和议题的总结&#xff1a; AI 应用落地&#xff1a;大会讨论了AI应用如何落地&#xff0c;即如何在当前阶段利用大模型技术实现实际应用。 AI 安全&…

图像基础知识

图像卷积 卷积(convolution)是通过两个函数f和g生成第三个函数的一种数学算子,表征函数f与g经过翻转和平移的重叠部分的面积。 卷积概念是两个变量在某范围内相乘后求和的结果。图像处理中的卷积概念:数字图像是一个二维的离散信号,对数字图像做卷积操作其实就是利用卷积…

基于java+springboot+vue实现的旅游管理系统(文末源码+lw+ppt)23-402

研究的内容 当下流行的WPS、Word等办公软件成为了人们耳熟能详的系统&#xff0c;但一些更加专业性、性能更加强大的网络信息工具被人们“埋没”在互联网的大海中。甘肃旅游管理系统是一个便于用户查看热门景点、酒店信息、推荐线路、旅游攻略、景点资讯等&#xff0c;管理员进…

华为机试HJ37统计每个月兔子的总数

华为机试HJ37统计每个月兔子的总数 题目&#xff1a; 想法&#xff1a; 上述题目实际是一个斐波那契数列&#xff0c;利用斐波那契数列对问题进行求解 input_number int(input())def fib(n):if n < 2:return 1else:n_1 1n_2 1count 2while count < n:n_1, n_2 n_…

U.S.News发布全美最佳本科AI专业排名

10 加州大学圣迭戈分校 University of California, San Diego UCSD的人工智能项目从事广泛的理论和实验研究&#xff0c;学校的优势领域包括机器学习、不确定性下的推理和认知建模。除了理论学习&#xff0c;UCSD教授非常注重把计算机知识运用到自然语言处理、数据挖掘、计算…

【04】微服务通信组件Feign

1、项目中接口的调用方式 1.1 HttpClient HttpClient 是 Apache Jakarta Common 下的子项目&#xff0c;用来提供高效的、最新的、功能丰富的支持 Http 协议的客户端编程工具包&#xff0c;并且它支持 HTTP 协议最新版本和建议。HttpClient 相比传统 JDK 自带的 URLConnectio…

干货 | 2024大模型增强下的图智能在金融场景的应用(免费下载)

如需下载本方案PPT/WORD原格式&#xff0c;诚挚邀请您微信扫描以下二维码加入方案驿站知识星球&#xff0c;获取上万份PPT/WORD解决方案&#xff01;&#xff01;&#xff01;感谢支持&#xff01;&#xff01;&#xff01;

3.js - 模板渲染 - side: THREE.FrontSide、THREE.BackSide - 狗都不学

// ts-nocheck// 引入three.js import * as THREE from three// 导入轨道控制器 import { OrbitControls } from three/examples/jsm/controls/OrbitControls// 导入lil.gui import { GUI } from three/examples/jsm/libs/lil-gui.module.min.js// 导入tween import * as TWEEN…

SpringBoot测试类注入Bean失败的原因

针对SpringBoot的测试类&#xff0c;2.2版本之前和之后是不一样的。 2.2版本之后 导包pom.xml 添加test依赖 <!-- starter-test&#xff1a;junit spring-test mockito --> <dependency><groupId>org.springframework.boot</groupId><artifac…

YoloV8改进策略:Block改进|轻量实时的重参数结构|最新改进|即插即用(全网首发)

摘要 本文使用重参数的Block替换YoloV8中的Bottleneck&#xff0c;GFLOPs从165降到了116&#xff0c;降低了三分之一&#xff1b;同时&#xff0c;map50-95从0.937涨到了0.947。 改进方法简单&#xff0c;只做简单的替换就行&#xff0c;即插即用&#xff0c;非常推荐&#xf…

学IT上培训班真的有用吗?

在学习IT技术的过程中&#xff0c;你是否也被安利过各种五花八门的技术培训班&#xff1f;这些培训班都是怎样向你宣传的&#xff0c;你又对此抱有着怎样的态度呢&#xff1f;在培训班里学技术&#xff0c;真的有用吗&#xff1f; 一、引入话题 IT行业是一个快速发展和不断变化…

【数据结构】09.树与二叉树

一、树的概念与结构 1.1 树的概念 树是一种非线性的数据结构&#xff0c;它是由n&#xff08;n>0&#xff09;个有限结点组成一个具有层次关系的集合。把它叫做树是因为它看起来像一棵倒挂的树&#xff0c;也就是说它是根朝上&#xff0c;而叶朝下的。 根结点&#xff1a;根…

java 公共字段填充

公共字段填充 1、mybatis-plus2、mybatis 使用注解加aop2.1 自定义注解2.2 自定义切面类2.3 在mapper上添加上自定义的注解 1、mybatis-plus 通过在类上使用如下的注解 TableField(fill FieldFill.INSERT) 是 MyBatis-Plus 中的注解&#xff0c;用于自动填充字段的值。MyBat…

【Python实战因果推断】25_倾向分5

目录 Stabilized Propensity Weights Pseudo-Populations Stabilized Propensity Weights 将经过处理的样本按 加权&#xff0c;就会产生一个与原始样本大小相同的伪群体&#xff0c;但就好像每个人都经过了处理。这意味着权重之和与原始样本大小大致相同。同样&#xff0c…

可视化作品集(08):能源电力领域

能源电力领域的可视化大屏&#xff0c;有着巨大的用武之地&#xff0c;不要小看它。 监控能源生产和消耗情况&#xff1a; 通过可视化大屏&#xff0c;可以实时监控能源生产和消耗情况&#xff0c;包括发电量、能源供应情况、能源消耗情况等&#xff0c;帮助管理者及时了解能…

llama2阅读: logits是什么?

Logits是一个在深度学习中&#xff0c;几乎一直都有的概念&#xff0c;它意味着模型unnormalized final scores. 然后你可以通过softmax得到模型针对你class的概率分布。 而在llama2的代码中&#xff0c;同样有logits的使用&#xff0c;那么针对llama2&#xff0c;logits的作用…