iis部署前后端分离项目（React前端，Node.js后端）

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

1. 安装iis

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

![![[Pasted image 20240627164313.png]]](https://img-blog.csdnimg.cn/direct/9b1dfd31eb22429a81a1c4b980da4efb.png)

2. 部署前端项目

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

![![[Pasted image 20240627164510.png]]](https://img-blog.csdnimg.cn/direct/fccfbdbfd8a44b518d4adeb8a7f06ded.png)

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

![![[Pasted image 20240627173100.png]]](https://img-blog.csdnimg.cn/direct/724baf2efc0449a89c852d0edaf9a21d.png)

★解决iis部署后vue、react项目刷新404问题

1. 安装url重写功能

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

![![[Pasted image 20240627165136.png]]](https://img-blog.csdnimg.cn/direct/f2c8534c37484943868f3739db6dae52.png)

1. 添加规则

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

![![[Pasted image 20240627165440.png]]](https://img-blog.csdnimg.cn/direct/9501bdd8bbc845cba2ff325419d62a9c.png)

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

![![[03052015f5b59a07aea33d14e6a1dc43.png]]](https://img-blog.csdnimg.cn/direct/7c30d22c98d449bbba94d0b19eb4d16c.png)

重启站点，刷新不再404

3. 部署node服务

1. 安装iisnode功能

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

![![[Pasted image 20240627170344.png]]](https://img-blog.csdnimg.cn/direct/67f351b23e5e4f1193d0db64142a638a.png)

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

![![[Pasted image 20240627170535.png]]](https://img-blog.csdnimg.cn/direct/33a61815edbc405b87c81e37874a9af0.png)

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

![![[Pasted image 20240627170812.png]]](https://img-blog.csdnimg.cn/direct/691af87e91324297b34072ed6f4ce9cd.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]]](https://img-blog.csdnimg.cn/direct/266af9ae0b8d463f87352b085ea40abb.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]]](https://img-blog.csdnimg.cn/direct/4d94019c315f4d82afae452ea46727aa.png)

1. 开启反向代理

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

![![[Pasted image 20240627171804.png]]](https://img-blog.csdnimg.cn/direct/f126a8fd7735419e9b69e3dd75b9975a.png)

![![[Pasted image 20240627171915.png]]](https://img-blog.csdnimg.cn/direct/30e72474dba64011addf7e269003bccf.png)

![![[Pasted image 20240627171935.png]]](https://img-blog.csdnimg.cn/direct/422affb960b34f8d87154259ffa2f331.png)

1. 添加代理规则

回到web站点，添加空白规则，与模式匹配，通配符，

*api/*

![![[Pasted image 20240627172208.png]]](https://img-blog.csdnimg.cn/direct/e78667972ad14941b99c73dbcabc247c.png)

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

![![[Pasted image 20240627172234.png]]](https://img-blog.csdnimg.cn/direct/7fcc20eef6d84bd599b4ba2ae44ebdf0.png)

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

![![[Pasted image 20240627172418.png]]](https://img-blog.csdnimg.cn/direct/24d188d52ca64f6a87a7dc26ea3dd31d.png)

1. 规则顺序

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

![![[Pasted image 20240627172630.png]]](https://img-blog.csdnimg.cn/direct/7748f5f7b0cd479a96f4639661f656a1.png)

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

![![[Pasted image 20240627172751.png]]](https://img-blog.csdnimg.cn/direct/ce42f5ec72724fbc8bd719156e5d734a.png)

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

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

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

![![[Pasted image 20240628101036.png]]](https://img-blog.csdnimg.cn/direct/a29ef1ba58f84ac9b0c3e700f12e268a.png)

![![[Pasted image 20240628101125.png]]](https://img-blog.csdnimg.cn/direct/5d6528c7af884bb99c6a3ef493ebf178.png)

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

![![[Pasted image 20240628102825.png]]](https://img-blog.csdnimg.cn/direct/c36abc6b736748ea8a7c870c4b9f80ae.png)

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

![![[Pasted image 20240628102943.png]]](https://img-blog.csdnimg.cn/direct/b7e4cb34194a4f2db022d65b417e410a.png)

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

![![[Pasted image 20240628103128.png]]](https://img-blog.csdnimg.cn/direct/f51b43dec2b54da0abefa1727795d462.png)

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

5. 其它错误

Q1. iis文件夹权限不足

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

![![[Pasted image 20240627100515.png]]](https://img-blog.csdnimg.cn/direct/5913ed7ad4d34efeb7e057e8eae7cb14.png)

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

![![[Pasted image 20240627134157.png]]](https://img-blog.csdnimg.cn/direct/3fb6979287f648aa899a987c6108e4cb.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]]](https://img-blog.csdnimg.cn/direct/9341cad7f21c4719bd5a7daf44640a6b.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"/>