前提：nginx已在服務(wù)器上安裝完成

假如有2個(gè)項(xiàng)目（一個(gè)company，一個(gè)test），需要通過(guò)ip或者域名來(lái)訪問，我們通過(guò)http://www.test.com來(lái)舉例

首先把2個(gè)靜態(tài)資源項(xiàng)目或者打包好的項(xiàng)目放到Nginx中

1、nginx安裝目錄及項(xiàng)目目錄

在nginx的html里面 創(chuàng)建兩個(gè)文件夾，一個(gè)services放服務(wù)端代碼，一個(gè)web放前端代碼

將前端靜態(tài)頁(yè)面或打包好的項(xiàng)目company和test項(xiàng)目放到html/web下面

2、開始nginx配置

進(jìn)到nginx/conf目錄，編輯nginx.conf文件 vim nginx.conf

nginx默認(rèn)的根目錄訪問的是html下的index.html頁(yè)面，默認(rèn)端口80，訪問http://www.test.com 即可看到下面文件

3、nginx下的配置文件（/nginx/conf/nginx.conf）里的server節(jié)點(diǎn)配置

server相關(guān)釋義：

server {
  #監(jiān)聽的端口，80端口是默認(rèn)端口，在訪問時(shí)，就無(wú)需輸入端口號(hào)，其他的都需要輸入端口號(hào)，比如這里訪問地址就是127.0.0.1，而若是8080端口，則是127.0.0.1：8080
  listen       80;
  #此處localhost可改為要訪問的域名或者ip地址，若有多個(gè)用空格隔開。例如 server_name www.baidu.com baidu.com test.baidu.com
  server_name  localhost;
  #編碼
  charset utf-8;
 
  #access_log  logs/host.access.log  main;
 
  location / {
      #nginx下HTML文件夾，訪問上述域名時(shí)會(huì)檢索此文件夾下的文件進(jìn)行訪問
      root   html/web/company;
      #輸入網(wǎng)址（server_name：port）后，默認(rèn)的訪問頁(yè)面
      index  index.html index.htm;
  }
}

listen：指定訪問端口，默認(rèn)80，指定9001,9002之后，我們?cè)俅卧L問

80端口: http://www.test.com

9001、9002端口訪問：http://www.test.com:9001    http://www.test.com:9002

指向的都是nginx/html頁(yè)面下的index.html頁(yè)面

以上location的配置就可以通過(guò)相關(guān)路由來(lái)訪問啦,訪問到的路徑都是nginx/html/web下的打包之后的項(xiàng)目路徑

http://www.test.com:9001/docs     http://www.test.com:9002/docs

http://www.test.com:9001/login     http://www.test.com:9002/login

http://www.test.com:9001/office     http://www.test.com:9002/office

http://www.test.com:9001/company    http://www.test.com:9002/company

3.1 配置改完后測(cè)試配置是否正確（找到nginx/s bin文件夾打開，看到nginx文件后再命令行輸入nginx -t檢測(cè)）

3.2 配置正確后，重啟nginx（./nginx -s reload）

3.3 若訪問的是域名還需去進(jìn)行域名解析，網(wǎng)站配置域名指向ip。檢測(cè)是否成功：ping一下域名，若結(jié)果為自己指向的ip則解析成功

3.4 測(cè)試訪問即可

4、 介紹location配置中root和alias的區(qū)別

/office 和 /company 分別使用root和alias來(lái)配置

4.1使用root配置

瀏覽器地址欄輸入 http://www.test.com:9001/company 或者h(yuǎn)ttp://www.test.com:9001/officiaNetwork均可訪問

4.2使用alias配置

瀏覽器地址欄輸入 http://www.test.com:9001/office  或者  http://www.test.com:9001/company

 http://www.test.com:9001/office/index.html  或者  http://www.test.com:9001/company/index.html 均可訪問

4.3 root 和 alias 的區(qū)別

首先確定 root和alias都可以定義在location模塊中，都是用來(lái)指定請(qǐng)求資源的真實(shí)路徑

使用 root 時(shí), 服務(wù)器里真實(shí)的資源路徑是 root 的路徑拼接上 location 指定的路徑

比如請(qǐng)求 http://www.test.com:9001/company/, 真實(shí)的資源路徑就是

html/web/company/index.html

使用alias顧名思義是代指 location 的別名, 不論location 是什么, 資源的真實(shí)路徑都是alias所指定的,所以location是匹配瀏覽器輸入的地址, 真實(shí)訪問的路徑就是alias 指定的路徑

其它區(qū)別

1. alias 只能配置在location 中, 而root 可以配置在 server, http 和 location 中

2. alias 后面必須要以 "/" 結(jié)尾, 否則會(huì)查找不到文件, 報(bào)404錯(cuò)誤; 而 root 對(duì) "/" 可有可無(wú)

5、配置node項(xiàng)目綁定域名

server {
    listen 80; # 端口
    server_name test.com; # 域名
    location / {
        proxy_pass http://0.0.0.0:3000;
        proxy_read_timeout 18000; # 設(shè)置超時(shí)
    }
}

6、HTTPS（SSL）配置

server {
    listen       443 ssl; # 端口
    server_name  test.com;  # 域名
 
    ssl_certificate     /path/xxx.pem # 證書路徑 pem or crt;
    ssl_certificate_key  /path/xxx.key; # 私鑰
 
    ssl_session_cache    shared:SSL:1m;
    ssl_session_timeout  5m;
 
    ssl_protocols TLSv1 TLSv1.1 TLSv1.2;
    ssl_ciphers  HIGH:!aNULL:!MD5;
    ssl_prefer_server_ciphers  on;
 
    location / {
        # 這里可以配置靜態(tài)服務(wù)器 or 代理
    }
}
# http 自動(dòng)跳轉(zhuǎn)到 https
server{
    listen 80;
    server_name test.com;
    rewrite ^/(.*)$ https://test.com:443/$1 permanent;
}

其他：

1、Vue訪問后刷新空白的問題

可能是由于VurRouter開啟了HTML5 History 模式具體可查看VurRouter后端配置例子

需要在配置中添加一行 try_files $uri $uri/ /index.html;

例：

server {
    listen 80; # 端口 需要服務(wù)器開放端口
    # 域名綁定需要將域名解析A記錄到改服務(wù)器ip
    server_name test.com; # 你的域名 如果需要ip訪問請(qǐng)注釋該行并改變端口
 
    location / { # 監(jiān)聽的路徑
        root /www; # /www 就是剛剛創(chuàng)建的目錄
        index index.html index.htm; # 默認(rèn)入口
        try_files $uri $uri/ /index.html;
    }
}

2、如果80端口被占用了，或者已經(jīng)有tomcat在跑80端口了，只需要停用tomcat，kill掉其他80端口即可

3、如果你發(fā)現(xiàn)修改了以后不起作用的話，可能是之前的nginx服務(wù)還沒關(guān)閉

ps aux | grep nginx

kill -9 pid 關(guān)閉nginx服務(wù)

4、跨域請(qǐng)求

我們?cè)谠O(shè)置nginx.conf的時(shí)候，有一個(gè)配置是

location /api/ {

        proxy_pass http://localhost:8000;

        proxy_set_header Host &host;

}

意思是后臺(tái)開啟服務(wù)的端口為8000，當(dāng)我訪問 server_name:8086/api/的時(shí)候就會(huì)流到后臺(tái)開啟的服務(wù)中。所以在前端頁(yè)面請(qǐng)求后臺(tái)的時(shí)候域名和端口要為 server_name:8086/api/

例：下圖為前端發(fā)起請(qǐng)求的路徑

完結(jié)，撒花~

總結(jié)

到此這篇關(guān)于nginx部署多個(gè)前端項(xiàng)目的文章就介紹到這了,更多相關(guān)nginx部署多前端項(xiàng)目?jī)?nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

最新評(píng)論