在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)
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前端框架开发的应用的更多相关文章
- Windows+.Net Framework+svn+IIS在Jenkins上的自动化部署入门
关于Jenkins的使用及安装,上一篇文章我已经介绍过了,Windows+.NetCore+git+IIS在Jenkins上的自动化部署入门.这篇主要是在jenkins如何安装SVN和MSBuild. ...
- 部署基于.netcore5.0的ABP框架后台Api服务端,以及使用Nginx部署Vue+Element前端应用
前面介绍了很多关于ABP框架的后台Web API 服务端,以及基于Vue+Element前端应用,本篇针对两者的联合部署,以及对部署中遇到的问题进行处理.ABP框架的后端是基于.net core5.0 ...
- Nginx 部署 Ant Design pro
利用Ant Design pro开发的项目,如何用Nginx部署呢? 第一步:把项目打包,打包命令如下: npm run build 运行完毕会在项目目录下生成dist文件夹. 第二步:想要测试打包好 ...
- ant design pro如何实现分步表单时,返回上一步值依然被保存
首先,分步表单ant design pro支持,看官方Demo即可,那么如何实现如题,关键在于设置initialValue {getFieldDecorator('name', { initialVa ...
- (一)React Ant Design Pro + .Net5 WebApi:先搞定服务器,顺手装个Nginx
腾讯云搞定服务器,具体过程就不赘述了,文档都有,咨询客服或者自行百度,体验一下过程. 一. 服务器 1. 云服务器 cvm 1核2G centos8.0 2. 域名注册 www.homejok.com ...
- Docker - 部署 Ant Design Pro 的项目
解读 Ant Design Pro 的 Docker 配置 package.json 的 scripts -f: 使用什么配置文件 -t: 标签 up: 启动服务(的容器) build: 构建或重新构 ...
- 吴裕雄 Bootstrap 前端框架开发——Bootstrap 表格:将悬停的颜色应用在行或者单元格上
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...
- 吴裕雄 Bootstrap 前端框架开发——Bootstrap 辅助类:除了屏幕阅读器外,其他设备上隐藏元素
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...
- 和我一起,重零开始学习Ant Design Pro开发解决方案(二)部署示例项目
随机推荐
- Gradle: Can't load library: native-platform.dll
Eclipse 导入 Gradle project 时总是报错:Can't load library: native-platform.dll. 解决方案: 进入 Windows -> Pref ...
- nginx的编译安装以及启动脚本编写
Nginx的编译安装和启动脚本的编写 Nginxd的功能强大,可以实现代理.负载均衡等企业常用的功能.下面介绍一下nginx的编译安装方法: 1. 下载 官方下载地址:http://nginx.org ...
- mysql-5.6.17编译安装和常见问题
mysql-5.6.17编译安装和常见问题 以前用的是MySQL的5.1版本,且使用的是免编译的包,安装简单.最近换了5.6版本的MySQL,安装过程出现了不少问题. 1. 卸载原来版本的MySQL ...
- 安装nagios检测hadoop
Nagios是常用的系统监控工具,提供了很多基本服务的监控脚本,如HTTP,MYSQL等,同时具有不错的可扩展性,自己可定制针对特定参数的监控脚本以及报警的方式. 我现在有三台机器:192.168.0 ...
- ALSA声卡08_从零编写之框架_学习笔记
1.整体框架 (1)图示((DAI(全称Digital Audio Interface)接口)) 在嵌入式系统里面,声卡驱动是ASOC,是在ALSA驱动上封装的一层,包括以下三大块 (2)程序框架 m ...
- 下载pubmed数据
1 import requests 2 import json 3 4 search_url = "https://eutils.ncbi.nlm.nih.gov/entrez/eutils ...
- Java string String
java.lang.String string这个不是关键字 关String的讲解,参看:http://www.cnblogs.com/octobershiner/archive/2012/04/02 ...
- Nginx 服务器开启status页面检测服务状态
一.Nginx status monitor 和apache 中服务器状态一样.输出的内容如: 第1列: 当前与http建立的连接数,包括等待的客户端连接:2 第2列: 接受的客户端连接总数目:20 ...
- ceph---luminous版的安装
前言 ceph luminous版本新增加了很多有意思的功能,这个也是一个长期支持版本,所以这些新功能的特性还是很值得期待的,从底层的存储改造,消息方式的改变,以及一些之前未实现的功能的完成,都让ce ...
- 1.docker学习之简介
什么是Docker Docker是一个开源的应用容器引擎.通俗来说:所谓开源,就是指Docker是开放源代码的,比如用户可以免费使用该源代码, 并在该源代码的基础上自由修改或传播.所谓引擎,指的是程序 ...