一. 使用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;
}
}
