在IIS和Nginx上通过代理部署基于ant-design-pro前端框架开发的应用

一、本文解决的主要问题

通过对前端静态资源站点进行代理服务设置，实现对后端API接口的代理，从而实现前端的独立部署，即通过代理的设置实现对http://IP0:Port0/api/xxx的请求转发至http://IP1:Port1/Web/WebService/xxx，其中地址http://IP0:Port0/即是前端静态资源站点地址，也是代理服务器地址；地址http://IP1:Port1/是后端API接口服务地址。

二、应用的构建和发布

官方文档

三、IIS 10 中对后端API接口代理的设置

参考博客：详解IIS中的重写工具下关于操作重定向URL中的{R:N}与{C:N}

1、安装ARR

下载安装ARR（Application Request Routing），可通过【Web平台安装程序】，安装成功后会多出 【Application Request Routing Cache】和【URL重写】图标，如下图：

2、代理设置（URL重写——>入站规则——>空白规则）

通过代理的设置实现对http://192.168.31.113:8101/api/xxx的请求转发至http://192.168.31.110:2893/Web/WebService/xxx

2.1、匹配URL规则

^(.*?)/?api/(.*)$

2.2、条件规则

{HTTP_HOST}

^192.168.31.113:8101$

2.3、操作规则

http://192.168.31.110:2893/Web/WebService/{R:2}

2.4、配置完后站点目录下的web.config

<?xml version="1.0" encoding="UTF-8"?>
<configuration>
    <system.webServer>
        <rewrite>
            <rules>
                <rule name="test" stopProcessing="true">
                    <match url="^(.*?)/?api/(.*)$" />
                    <conditions>
                        <add input="{HTTP_HOST}" pattern="^192.168.31.113:8101$" />
                    </conditions>
                    <action type="Rewrite" url="http://192.168.31.110:2893/Web/WebService/{R:2}" />
                </rule>
            </rules>
        </rewrite>
    </system.webServer>
</configuration>

四、Nginx 中对后端API接口代理的设置（Windows）

参考博客：nginx反向代理的nginx.conf配置

1、Nginx下载安装

下载Nginx

启动Nginx: start ./nginx.exe

2、代理设置

通过代理的设置实现对http://192.168.31.113:8888/api/xxx的请求转发至http://192.168.31.110:2893/Web/WebService/xxx

配置Nginx安装路径/conf/nginx.conf文件：

#user  nobody;
worker_processes  4;

events {
    worker_connections  1024;
}

http {
    include       mime.types;
    default_type  application/octet-stream;      

    sendfile        on;
    #tcp_nopush     on;

    #keepalive_timeout  0;
    keepalive_timeout  65;

    #gzip  on;

    server {
        listen       8888;
        server_name  localhost;
        
charset utf-8;        

        location / {
            root   E:/CloudRisX/branches/ris_yzh/dist;
add_header Cache-Control no-store;
            add_header 'Access-Control-Allow-Origin' '*';
            index  index.html index.htm;
        }

location /api/ {
root /;
proxy_set_header  Host $host; 
proxy_headers_hash_max_size 1024; 
proxy_headers_hash_bucket_size 128;
proxy_set_header  X-Forwarded-For $proxy_add_x_forwarded_for ;
proxy_set_header Accept-Encoding "";
proxy_pass http://192.168.31.110:2893/Web/WebService/;
}        

        # redirect server error pages to the static page /50x.html
        #
        error_page   500 502 503 504  /50x.html;
        location = /50x.html {
            root   html;
        }
    }
}

重启Nginx: nginx -s reload