210318:使用nginx部署多个前端项目-网页url太长怎么
一. 使用nginx部署多个前端项目
个人总结了3种方法来实现在一台服务器上使用nginx部署多个前端项目的方法。
在正式开始之前，我们先来看一下nginx安装的默认配置文件： /etc/nginx/nginx.conf 文件
可以看到图中的：include /usr/nginx/modules/*.conf，这句话的作用就是可以在nginx启动加载所有 /usr/nginx/modules/ 目录下的 *.conf 文件。 所以，平时我们为了方便管理，可以在此目录下面定义自己的 xx.conf 文件即可。但是注意，一定要以.conf 结尾。
1. 基于域名配置
基于域名配置，前提是先配置好了域名解析。比如说你自己买了一个域名：www.fly.com。 然后你在后台配置了2个它的二级域名： a.fly.com、 b.fly.com。
配置文件如下：
-
配置 a.fly.com 的配置文件：
vim /usr/nginx/modules/a.conf
server { listen 80; server_name a.fly.com; location / { root /data/web-a/dist; index index.html; } } -
配置 b.fly.com 的配置文件：
vim /usr/nginx/modules/b.conf
server { listen 80; server_name b.fly.com; location / { root /data/web-b/dist; index index.html; } }
这种方式的好处是，主机只要开放80端口即可。然后访问的话直接访问二级域名就可以访问。
2. 基于端口配置
配置文件如下：
-
配置 a.fly.com 的配置文件：
vim /usr/nginx/modules/a.conf
server { listen 8000; location / { root /data/web-a/dist; index index.html; } } # nginx 80端口配置 （监听a二级域名） server { listen 80; server_name a.fly.com; location / { proxy_pass http://localhost:8000; #转发 } } -
配置 b.fly.com 的配置文件：
vim /usr/nginx/modules/b.conf
server { listen 8001; location / { root /data/web-b/dist; index index.html; } } # nginx 80端口配置 （监听b二级域名） server { listen 80; server_name b.fly.com; location / { proxy_pass http://localhost:8001; #转发 } }可以看到，这种方式一共启动了4个server，而且配置远不如第一种简单，所以不推荐。
3. 基于location配置
配置文件如下：
-
配置 a.fly.com 的配置文件：
vim /usr/nginx/modules/ab.conf
server { listen 80; location / { root /data/web-a/dist; index index.html; } location /web-b { alias /data/web-b/dist; index index.html; } }注意： 这种方式配置的话，location / 目录是root，其他的要使用alias。
可以看到，这种方式的好处就是我们只有一个server，而且我们也不需要配置二级域名。并且前端项目里要配置
4. 自己配置文件的写法
nginx.conf
后端application.properties配置文件
二. 网页url太长怎么换
1. 方法一:后端返回ifrem网页
可以使用前端的ifrem技术，通过地址栏向后端发送get请求，例如：http://20.20.32.132:8081/slxfwz/main/1可以将路径后面的1和长串地址做关联，后端根据1来找到地址，最后填充到ifrem标签的src属性中返回给前端即可。
@RestController
@RequestMapping("/main")
public class MainHomeController {
@Autowired
private ISlxfSiteConfigService slxfSiteConfigService;
@GetMapping(value="/{id}",produces = "text/html;charset=utf-8")
public String mainHome(@PathVariable("id") String id){
SlxfSiteConfig one = null;
try{
one = slxfSiteConfigService.findSiteConfig(id);
}catch (Exception e){
e.printStackTrace();
return "<html>\n" +
"<head>\n" +
"<title></title>\n" +
"<script language= \"javascript\" > \n" +
"alert( \"该地址未配置\" ); \n" +
"</script>\n" +
"</head>\n" +
"</html>";
}
return "<style>*{padding:0;border:0;margin:0;}</style><iframe src=" + one.getSiteUrl() + " width=\"100%\" height=\"100%\"></iframe>";
}
}
2. 利用nginx return实现301跳转
nginx配置文件内容
server {
listen 8077;
server_name 20.20.32.132;
#charset koi8-r;
#access_log logs/host.access.log main;
location / {
root html/dist;
}
location /slxfwz {
proxy_pass http://20.20.32.132:8082/slxfwz;
}
}
server {
listen 8076;
server_name 20.20.32.132;
#charset koi8-r;
#access_log logs/host.access.log main;
location / {
root html/home/dist;
}
location /slxfwz {
proxy_pass http://20.20.32.132:8082/slxfwz;
}
}
server {
listen 8075;
server_name 20.20.32.132;
#charset koi8-r;
#access_log logs/host.access.log main;
location / {
return 301 http://20.20.32.132:8077/?cjlx=1/#/template/vist/9494a0fe77d2fa4e0177d35cb83c0003/state/-5/nav/0;
}
}
