一. 使用nginx部署多個(gè)前端項(xiàng)目
個(gè)人總結(jié)了3種方法來(lái)實(shí)現(xiàn)在一臺(tái)服務(wù)器上使用nginx部署多個(gè)前端項(xiàng)目的方法宙枷。
在正式開(kāi)始之前钞馁，我們先來(lái)看一下nginx安裝的默認(rèn)配置文件： /etc/nginx/nginx.conf 文件
可以看到圖中的：include /usr/nginx/modules/*.conf，這句話的作用就是可以在nginx啟動(dòng)加載所有 /usr/nginx/modules/ 目錄下的 *.conf 文件娩鹉。 所以典蜕，平時(shí)我們?yōu)榱朔奖愎芾恚梢栽诖四夸浵旅娑x自己的 xx.conf 文件即可疼蛾。但是注意肛跌，一定要以.conf 結(jié)尾。
1. 基于域名配置
基于域名配置据过，前提是先配置好了域名解析惋砂。比如說(shuō)你自己買了一個(gè)域名：www.fly.com。 然后你在后臺(tái)配置了2個(gè)它的二級(jí)域名： 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; } }
這種方式的好處是，主機(jī)只要開(kāi)放80端口即可鳞芙。然后訪問(wèn)的話直接訪問(wèn)二級(jí)域名就可以訪問(wèn)眷柔。
2. 基于端口配置
配置文件如下：
-
配置 a.fly.com 的配置文件：
vim /usr/nginx/modules/a.conf
server { listen 8000; location / { root /data/web-a/dist; index index.html; } } # nginx 80端口配置 （監(jiān)聽(tīng)a二級(jí)域名） server { listen 80; server_name a.fly.com; location / { proxy_pass http://localhost:8000; #轉(zhuǎn)發(fā) } } -
配置 b.fly.com 的配置文件：
vim /usr/nginx/modules/b.conf
server { listen 8001; location / { root /data/web-b/dist; index index.html; } } # nginx 80端口配置 （監(jiān)聽(tīng)b二級(jí)域名） server { listen 80; server_name b.fly.com; location / { proxy_pass http://localhost:8001; #轉(zhuǎn)發(fā) } }可以看到，這種方式一共啟動(dòng)了4個(gè)server原朝，而且配置遠(yuǎn)不如第一種簡(jiǎn)單驯嘱，所以不推薦。
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。
可以看到壕鹉，這種方式的好處就是我們只有一個(gè)server剃幌，而且我們也不需要配置二級(jí)域名。并且前端項(xiàng)目里要配置
4. 自己配置文件的寫法
nginx.conf
后端application.properties配置文件
二. 網(wǎng)頁(yè)url太長(zhǎng)怎么換
1. 方法一:后端返回ifrem網(wǎng)頁(yè)
可以使用前端的ifrem技術(shù)晾浴，通過(guò)地址欄向后端發(fā)送get請(qǐng)求负乡，例如：http://20.20.32.132:8081/slxfwz/main/1可以將路徑后面的1和長(zhǎng)串地址做關(guān)聯(lián)，后端根據(jù)1來(lái)找到地址脊凰，最后填充到ifrem標(biāo)簽的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實(shí)現(xiàn)301跳轉(zhuǎn)
nginx配置文件內(nèi)容
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;
}
}
