React前端项目Windows服务器IIS部署踩坑与出坑记录

（一）部署过程

第一次部署前后端分离的前端项目，开始没什么头绪，查了网上的一些教程，差不多都按如下步骤进行，于是就按步就班，依葫芦画瓢。

1、URL 重定向

凡是 IIS 部署纯前端应用（Vue，Angular，React）都要进行 URL 重定向。

下载 URL Rewrite，然后安装到 IIS 服务器上。

2、修改 package.json，增加homepage字段（homepage:'.')

3、在项目 public 文件夹中，添加 IIS 服务器配置文件，用于重写首页地址，新建 web.config(之后证实，此步骤为画蛇添足）

4、react 项目中需要注意，路由的问题

使用 HashRouter 可直接打包部署

使用 BrowserRouter 时，需要添加 basename，否则部署后页面空白(之后证实，此步骤为画蛇添足）

5、npm run build 打包

6、IIS 部署

按以上步骤部署后，启动项目连首页都进不去。首先是有关文件路径错误，多了“/zhBuild”，于是将webpack.config.js中的 publicPath字段值中的

改为

把package.json中的homepage的值也改为"."

于是在服务器本地用Localhos地址可以打开首页，但用IP地址还是无法打开。

于是将public下面的index.html中meta标签中的加密属性删除，可用IP地址打开首页。

可还是无法登录，发现接口地址不对，显示是服务器本机，查资料分析后可能是代理转发的问题，因为前后端分离的项目都会涉及到跨域。

配置IIS服务器上的代理配置，设置URL重写规则，成功解决跨域问题，成功调用接口，登录成功。（不过每重新打包一次软件包，URL重写规则就会消失，需要重新设置一次规则）

但还没完，因为登录成功后就是空白页，F12查看“网络”选项卡，发现有个JS文件的路径不对，文件夹名称static前多了个“.”

之后将“config/webpack.config.js”中的publicpath字段值中的“.”中的点去掉，改为空字符串‘’。登录后正常打开首页。

服务器本地测试没问题后，再使用其他电脑进行远程访问时，发现只有本机可以访问，远程无法访问。报权限错误。