nginx部署多個前端項目詳細步驟
前提:nginx已在服務(wù)器上安裝完成
假如有2個項目(一個company,一個test),需要通過ip或者域名來訪問,我們通過http://www.test.com來舉例
首先把2個靜態(tài)資源項目或者打包好的項目放到Nginx中
1、nginx安裝目錄及項目目錄
在nginx的html里面 創(chuàng)建兩個文件夾,一個services放服務(wù)端代碼,一個web放前端代碼
將前端靜態(tài)頁面或打包好的項目company和test項目放到html/web下面
2、開始nginx配置
進到nginx/conf目錄,編輯nginx.conf文件 vim nginx.conf
nginx默認(rèn)的根目錄訪問的是html下的index.html頁面,默認(rèn)端口80,訪問http://www.test.com 即可看到下面文件
3、nginx下的配置文件(/nginx/conf/nginx.conf)里的server節(jié)點配置
server相關(guān)釋義:
server { #監(jiān)聽的端口,80端口是默認(rèn)端口,在訪問時,就無需輸入端口號,其他的都需要輸入端口號,比如這里訪問地址就是127.0.0.1,而若是8080端口,則是127.0.0.1:8080 listen 80; #此處localhost可改為要訪問的域名或者ip地址,若有多個用空格隔開。例如 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文件夾,訪問上述域名時會檢索此文件夾下的文件進行訪問 root html/web/company; #輸入網(wǎng)址(server_name:port)后,默認(rèn)的訪問頁面 index index.html index.htm; } }
listen:指定訪問端口,默認(rèn)80,指定9001,9002之后,我們再次訪問
80端口: http://www.test.com
9001、9002端口訪問:http://www.test.com:9001 http://www.test.com:9002
指向的都是nginx/html頁面下的index.html頁面
以上location的配置就可以通過相關(guān)路由來訪問啦,訪問到的路徑都是nginx/html/web下的打包之后的項目路徑
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 配置改完后測試配置是否正確(找到nginx/s bin文件夾打開,看到nginx文件后再命令行輸入nginx -t檢測)
3.2 配置正確后,重啟nginx(./nginx -s reload)
3.3 若訪問的是域名還需去進行域名解析,網(wǎng)站配置域名指向ip。檢測是否成功:ping一下域名,若結(jié)果為自己指向的ip則解析成功
3.4 測試訪問即可
4、 介紹location配置中root和alias的區(qū)別
/office 和 /company 分別使用root和alias來配置
4.1使用root配置
瀏覽器地址欄輸入 http://www.test.com:9001/company 或者http://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模塊中,都是用來指定請求資源的真實路徑
使用 root 時, 服務(wù)器里真實的資源路徑是 root 的路徑拼接上 location 指定的路徑
比如請求 http://www.test.com:9001/company/, 真實的資源路徑就是
html/web/company/index.html
使用alias顧名思義是代指 location 的別名, 不論location 是什么, 資源的真實路徑都是alias所指定的,所以location是匹配瀏覽器輸入的地址, 真實訪問的路徑就是alias 指定的路徑
其它區(qū)別
1. alias 只能配置在location 中, 而root 可以配置在 server, http 和 location 中
2. alias 后面必須要以 "/" 結(jié)尾, 否則會查找不到文件, 報404錯誤; 而 root 對 "/" 可有可無
5、配置node項目綁定域名
server { listen 80; # 端口 server_name test.com; # 域名 location / { proxy_pass http://0.0.0.0:3000; proxy_read_timeout 18000; # 設(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 自動跳轉(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訪問請注釋該行并改變端口 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、跨域請求
我們在設(shè)置nginx.conf的時候,有一個配置是
location /api/ {
proxy_pass http://localhost:8000;
proxy_set_header Host &host;
}
意思是后臺開啟服務(wù)的端口為8000,當(dāng)我訪問 server_name:8086/api/的時候就會流到后臺開啟的服務(wù)中。所以在前端頁面請求后臺的時候域名和端口要為 server_name:8086/api/
例:下圖為前端發(fā)起請求的路徑
完結(jié),撒花~
總結(jié)
到此這篇關(guān)于nginx部署多個前端項目的文章就介紹到這了,更多相關(guān)nginx部署多前端項目內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
相關(guān)文章
Nginx+Tomcat集群環(huán)境的實現(xiàn)
本文主要介紹了配置Nginx和Tomcat集群環(huán)境,包括負載均衡、故障轉(zhuǎn)移以及配置單機應(yīng)用和Tomcat集群的具體步驟, 感興趣的可以了解一下2024-11-11Nginx配置Prometheus監(jiān)控的實現(xiàn)
本文主要介紹了Nginx配置Prometheus監(jiān)控的實現(xiàn),文中通過示例代碼介紹的非常詳細,對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2025-02-02分享nginx+php-fpm實現(xiàn)大文件下載排坑的過程
這篇文章主要介紹了nginx+php-fpm實現(xiàn)大文件下載排坑的過程,文中通過代碼實例相結(jié)合的形式給大家介紹的非常詳細,具有一定得參考借鑒價值,需要的朋友參考下吧2018-08-08Nginx配置文件(nginx.conf)配置詳解(總結(jié))
本篇文章主要介紹了Nginx配置文件(nginx.conf)配置詳解,這對初學(xué)者有一定的參考價值,有興趣的可以了解一下。2016-12-12