一、本文解决的主要问题

通过对前端静态资源站点进行代理服务设置,实现对后端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

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

  1. Windows+.Net Framework+svn+IIS在Jenkins上的自动化部署入门

    关于Jenkins的使用及安装,上一篇文章我已经介绍过了,Windows+.NetCore+git+IIS在Jenkins上的自动化部署入门.这篇主要是在jenkins如何安装SVN和MSBuild. ...

  2. 部署基于.netcore5.0的ABP框架后台Api服务端,以及使用Nginx部署Vue+Element前端应用

    前面介绍了很多关于ABP框架的后台Web API 服务端,以及基于Vue+Element前端应用,本篇针对两者的联合部署,以及对部署中遇到的问题进行处理.ABP框架的后端是基于.net core5.0 ...

  3. Nginx 部署 Ant Design pro

    利用Ant Design pro开发的项目,如何用Nginx部署呢? 第一步:把项目打包,打包命令如下: npm run build 运行完毕会在项目目录下生成dist文件夹. 第二步:想要测试打包好 ...

  4. ant design pro如何实现分步表单时,返回上一步值依然被保存

    首先,分步表单ant design pro支持,看官方Demo即可,那么如何实现如题,关键在于设置initialValue {getFieldDecorator('name', { initialVa ...

  5. (一)React Ant Design Pro + .Net5 WebApi:先搞定服务器,顺手装个Nginx

    腾讯云搞定服务器,具体过程就不赘述了,文档都有,咨询客服或者自行百度,体验一下过程. 一. 服务器 1. 云服务器 cvm 1核2G centos8.0 2. 域名注册 www.homejok.com ...

  6. Docker - 部署 Ant Design Pro 的项目

    解读 Ant Design Pro 的 Docker 配置 package.json 的 scripts -f: 使用什么配置文件 -t: 标签 up: 启动服务(的容器) build: 构建或重新构 ...

  7. 吴裕雄 Bootstrap 前端框架开发——Bootstrap 表格:将悬停的颜色应用在行或者单元格上

    <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...

  8. 吴裕雄 Bootstrap 前端框架开发——Bootstrap 辅助类:除了屏幕阅读器外,其他设备上隐藏元素

    <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...

  9. 和我一起,重零开始学习Ant Design Pro开发解决方案(二)部署示例项目

随机推荐

  1. Java文件的写入

    写文件与读文件类似,可以是以字节为单位写入,可以是以字符为单位写入. 对应读操作FileOutputStream是以字节为单位进行写入的: FileOutputStream fileOutputStr ...

  2. year()+month() 不错的Idear

    year(发货日期)*100+month(发货日期),可以取到年份+月份(月份不到10月的,自动补0)

  3. 【转】Jmeter变量参数化及函数应用

    我们在使用Jmeter录制脚本后,经常会对已录制的脚本进行修改,需要把一些参数使用一些变量替代,Jmeter是支持这些功能的,不过是通过函数实现的.下面举一个简单的例子,使用随机数替代一个参数: 打开 ...

  4. 北京师范大学第十六届程序设计竞赛决赛 C萌萌哒身高差

    链接:https://www.nowcoder.com/acm/contest/117/C来源:牛客网 萌萌哒身高差 时间限制:C/C++ 1秒,其他语言2秒 空间限制:C/C++ 32768K,其他 ...

  5. 20181105_线程之Task

    Task是基于.net Framework3.0框架, Task使用的线程也是来自于ThreadPool 多线程的两个意义: 优化体验(常见于不卡界面), 提升运行速度(不同线程可以分担运算任务) 总 ...

  6. 5月15日上课笔记-js中 location对象的属性、document对象、js内置对象、Date事件对象、

    location的属性: host: 返回当前主机名和端口号 定时函数: setTimeout( ) setInterval() 二.document对象 getElementById(); 根据ID ...

  7. fiddler的介绍

    一.Fiddler是一个http协议代理工具,主要有以下功能: 1.监控http/https流量.截获http/https请求 2.查看并调试截获到的请求 3.伪造请求与响应 4.测试网站性能 5.解 ...

  8. Vcf文件格式

    Vcf文件格式是GATK钟爱的表示遗传变异的一种文件格式. 就拿GATK给出的vcf例子说明吧,下面这个文件只表示了一个完整vcf文件的前几个SNP. 看上去确实有点复杂,那就把它分为两部分看吧,第一 ...

  9. Hexo+Github/Coding免费搭建个人博客网站

    体验更优排版请移步原文:http://blog.kwin.wang/other/hexo-github-build-blog.html 很早之前就想搭建一个属于自己的博客网站,一方面是给自己做笔记,把 ...

  10. spring-boot-actuator健康监控

    #健康监控 management.security.enabled=false health.mail.enabled =false http://localhost:54001/autoconfig ...