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 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.mfbz.cn/a/787786.html

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

Linux基本命令的使用示例

目录 1实现效果&#xff1a;在downloads目录下创建1个空文件夹empty&#xff0c;创建1个空文件lake.txt&#xff0c;输入任意数据保存后退出 2实现效果&#xff1a;搜索包含关键字"泉眼"的行 3实现效果&#xff1a;重命名文件夹empty为full&#xff0c;复制文件cc…

Anaconda+Pycharm 项目运行保姆级教程(附带视频)

最近很多小白在问如何用anacondapycharm运行一个深度学习项目&#xff0c;进行代码复现呢&#xff1f;于是写下这篇文章希望能浅浅起到一个指导作用。 附视频讲解地址&#xff1a;AnacondaPycharm项目运行实例_哔哩哔哩_bilibili 一、项目运行前的准备&#xff08;软件安装&…

锅总反驳李彦宏说的“不要卷模型,要卷应用”

李彦宏的观点是大家不要卷模型&#xff0c;要卷应用&#xff0c;但我认为这种看法是荒谬的。以下是24条反驳李彦宏观点的论点和论据&#xff1a; 模型的准确性直接决定应用的质量和用户体验&#xff1a; 论据&#xff1a;在自然语言处理、计算机视觉等领域&#xff0c;模型的准…

Java虚拟机面试题汇总

目录 1. JVM的主要组成部分及其作用&#xff1f; 1.1 运行时数据区划分&#xff1f; 1.2 哪些区域可能会发生OOM&#xff1f; 1.3 堆和栈的区别&#xff1f; 1.4 内存模型中的happen-before是什么&#xff1f; 2. HotSpot虚拟机对象创建流程&#xff1f; 2.1 类加载过程…

kafka 消费者

消费者 消费者。消费者连接到Kafka上并接收消息&#xff0c;进而进行相应的业务逻辑处理。 消费组 消费者负责订阅Kafka中的主题&#xff0c;并且从订阅的主题上拉取消息。 消费组&#xff1a;每个消费者都有一个对应的消费组&#xff0c;每一个分区只能被一个消费组中的一个…

windows JDK11 与JDK1.8自动切换,以及切换后失效的问题

1.windows安装不同环境的jdk 2.切换jdk 3.切换失败 原因&#xff1a;这是因为当我们安装并配置好JDK11之后它会自动生成一个环境变量&#xff08;此变量我们看不到&#xff09;&#xff0c;此环境变量优先级较高&#xff0c;导致我们在切换回JDK8后系统会先读取到JDK11生成的…

Docker镜像拉取失败/下载缓慢?如何正确的更换Docker镜像源?(含镜像源,亲测有效!)

文章目录 📖 介绍 📖🏡 演示环境 🏡📒 Docker镜像源 📒📝 为何更换镜像源📝 如何更换Docker镜像源📝 验证镜像源更换成功📝 一些可用的Docker镜像源⚓️ 相关链接 ⚓️📖 介绍 📖 在当今快速迭代的软件开发环境中,Docker以其轻量级、可移植和高效的特…

新浪API系列:支付API打造无缝支付体验,畅享便利生活(3)

在当今数字化时代&#xff0c;支付功能已经成为各类应用和平台的必备要素之一。作为开发者&#xff0c;要构建出安全、便捷的支付解决方案&#xff0c;新浪支付API是你不可或缺的利器。新浪支付API提供了全面而强大的接口和功能&#xff0c;帮助开发者轻松实现在线支付的集成和…

【嵌入式DIY实例-ESP8266篇】-LCD ST7735显示BME280传感器数据

LCD ST7735显示BME280传感器数据 文章目录 LCD ST7735显示BME280传感器数据1、硬件准备与接线2、代码实现本文中将介绍如何使用 ESP8266 NodeMCU 板(ESP12-E 模块)和 BME280 气压、温度和湿度传感器构建气象站。 NodeMCU 微控制器 (ESP8266EX) 从 BME280 传感器读取温度、湿度…

使用微pe装系统

本文仅作为记录&#xff0c;不作为教程。 今天心血来潮想下点游戏玩玩&#xff0c;一看之前分的200gc盘已经红了&#xff0c;再加上大学之后这个笔记本已经用得很少了&#xff0c;于是打算重装电脑。 参考: 微PE辅助安装_哔哩哔哩_bilibil… 1.下载微pe和win10系统到U盘 我这…

【持续集成_03课_Linux部署Sonar+Gogs+Jenkins】

一、通过虚拟机搭建Linux环境-CnetOS 1、安装virtualbox&#xff0c;和Vmware是一样的&#xff0c;只是box更轻量级 1&#xff09;需要注意内存选择&#xff0c;4G 2、启动完成后&#xff0c;需要获取服务器IP地址 命令 ip add 服务器IP地址 通过本地的工具&#xff0c;进…

对比学习和多模态任务

1. 对比学习 对比学习&#xff08;Contrastive Learning&#xff09;是一种自监督学习的方法&#xff0c;旨在通过比较数据表示空间中的不同样本来学习有用的特征表示。其核心思想是通过最大化同类样本之间的相似性&#xff08;或降低它们之间的距离&#xff09;&#xff0c;同…

imx6ull/linux应用编程学习(15) 移植MQTT客户端库

1. 准备开发环境 确保你的Ubuntu系统已经安装了必要的工具和依赖项。打开终端并运行以下命令&#xff1a; sudo apt update sudo apt install build-essential cmake git2. 获取MQTT库 git clone https://github.com/eclipse/paho.mqtt.c.git cd paho.mqtt.c3. 编译MQTT库 mk…

论文《Generalizable Adversarial Attacks Using Generative Models》笔记

【DAGAER】传统的攻击方法依赖于约束优化范式&#xff0c;具有局限性&#xff0c;例如经典的Nettack攻击方法。本文提出了一个统一的白盒对抗攻击生成框架&#xff0c;该方法学习了目标域的深度生成模型&#xff0c;不是在原始输入空间中生成对抗性例子&#xff0c;而是学习在一…

修复 Ubuntu 24.04 Dock 丢失应用程序图标

找出应用程序窗口的类名 首先&#xff0c;您需要启动应用程序窗口。然后&#xff0c;按 Alt F2 启动“运行 Command”对话框。当对话框打开时&#xff0c;输入 lg 并按 Enter 键。 在该窗口中&#xff0c;单击Windows按钮&#xff0c;然后找出目标应用程序窗口的类名称。 在/…

git只列出本地分支

git只列出本地分支 git branch --list git强制删除本地分支 git branch -D_error: the branch dlx-test is not fully merged. -CSDN博客文章浏览阅读648次。git branch -d 可以通过: git branch 查看所有本地分支及其名字&#xff0c;然后删除特定分支。git删除远程remote分支…

第五次作业(多表联合查询)

新增员工表emp和部门表dept create table dept (dept1 int ,dept_name varchar(11)) charsetutf8; create table emp (sid int ,name varchar(11),age int,worktime_start date,incoming int,dept2 int) charsetutf8; insert into dept values (101,财务), (102,销售…

【Git入门和实战】第3课:git从下载到安装再到配置全过程超详细步骤演示的保姆级教程(文末附练习题,可验证学习效果)

本文是git入门和实战系列文章的第3课&#xff0c;主要讲解git从下载到安装再到配置全过程详细步骤演示的保姆级教程&#xff0c;文末附有练习题&#xff0c;可验证学习效果。 &#x1f9d1; 作者简介&#xff1a;现任阿里巴巴嵌入式技术专家&#xff0c;15年工作经验&#xff0…

华为云发起,openGemini正式成为CNCF官方项目!

openGemini 正式成为 CNCF 官方项目 北京时间2024年7月9日&#xff0c;云原生计算基金会&#xff08;CNCF&#xff09;正式接纳云原生高性能时序数据库项目 openGemini。openGemini的加入&#xff0c;极大地丰富了云原生数据库技术的探索、创新和发展。 openGemini是华为云数据…

瑞萨RH850 RTC计时进位异常

RH850 MCU的RTC&#xff08;实时时钟&#xff09;采用BCD&#xff08;二进制编码的十进制&#xff09;编码格式&#xff0c;支持闰年自动识别&#xff0c;并具有秒、分、时、日、周、月、年的进位功能。其中&#xff0c;秒和分为60进位&#xff0c;时为12或24进位&#xff0c;周…