Skip to content

react前端项目部署到iis

Posted on:May 4, 2020

这几天开发用于微信公众号的页面,被微信网页授权,搞得烦死了。授权好多步骤,又跟之前的小程序的openid有些冲突,换成unionid,但也遇到一系列的坑。项目是create react app搭建的,为了避免跨域问题,在package.json配置了代理。对 iis 不熟悉,网上搜刮了很多资料,捣腾了很久。

BrowserRouter or HashRouter

直接使用BrowserRouter,iis 不作配置的话,访问会报 404 错,路由问题,iis 估计会把地址如http://url/app当作是http://url/app.html去访问,所以报 404 了。通过 url rewrite 应该就可以了,没去试过。直接使用 HashRouter 省事很多,不用配置,直接可以用。

代理映射

项目另外配置有接口地址,只需要在package.json配置proxy: "http://api.url.com/",就可以了,本地运行没问题,但这个配置只是针对 node 服务器生效,在 iis 上要生效的话,得配置 URL rewrite,然后这两天就卡在这里,我本身不熟悉这一块,我朋友配置服务器也不熟悉这块,网上资料也不多,所以折腾了很久。

具体就是,build的时候,代理接口的请求加上前缀/api,iis 那边需要做 URL 的重写,把请求到/api的映射到接口地址去,如http://api.url.com,开始朋友根据网上的教程,配置成重定向了一直不行,后来配置成重写,又变成访问 404。

后来才找到一个教程,是要安装 ARR,配置反向代理:

具体需求:

假如我的项目地址是web.url.com,接口请求数据是web.url.com/api/**/**,例如获取用户数据web.url.com/api/user/getdata,实际请求接口就应该是api.url.com/user/getdata。

要实现上面的需求,需要 iis 在 7 及以上。

  1. 安装 ARR: 下载地址

  2. 开启代理功能,进入操作版面的Server Proxy Settings选项,开启代理。

  3. 配置反向代理规则。进入部署的站点,进入 URL 重写功能。左侧操作菜单选择添加规则,新建一条入站规则,选择空白规则,目的是匹配请求的 URL,当符合我们添加的规则时,则进行反向代理的操作,假定所有的接口请求都是这种web.url.com/api/**/**以 api 这个关键词开头,写一个正则表达式来匹配需要反向代理的 url 请求

  4. 编辑入站规则:

    1. 填写匹配 URL 选项相关信息,采用与模式匹配的正则表达式,表达式为:^api/(.*),匹配所有前端站点的包含 api 的 url 请求
    2. 填写条件,条件是说匹配哪个域名,填写文章开头说的前端站点的域名web.url.com,条件输入:{HTTP_HOST}(请求的主机名),模式:^web.url.com$(如果有端口可以加上端口)
    3. 填写反向代理最终指向的地址,前面我们所做的匹配,就是为了这一步所做的准备,操作类型是重写,URL 填写:http://web.url.com/api/{R:1},注意前面匹配了 URL 中包含 api 关键词的 URL,这里必须加上/api/{R:1},{R:1}是说 api 后面的参数都带着

参考来源: