欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

nginx部署多個(gè)前端項(xiàng)目詳細(xì)步驟

 更新時(shí)間:2023年10月25日 10:54:15   作者:司徒小北  
最近一臺(tái)服務(wù)器要配置多個(gè)前端項(xiàng)目,當(dāng)然前后端分離就需要nginx來配置了,下面這篇文章主要給大家介紹了關(guān)于nginx部署多個(gè)前端項(xiàng)目的詳細(xì)步驟,需要的朋友可以參考下

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

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

首先把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)頁面或打包好的項(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頁面,默認(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í),就無需輸入端口號(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)的訪問頁面
      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頁面下的index.html頁面

以上location的配置就可以通過相關(guān)路由來訪問啦,訪問到的路徑都是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來配置

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模塊中,都是用來指定請(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ì) "/" 可有可無

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ù)中。所以在前端頁面請(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)目內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!

相關(guān)文章

  • Nginx配置并兼容HTTP實(shí)現(xiàn)代碼解析

    Nginx配置并兼容HTTP實(shí)現(xiàn)代碼解析

    這篇文章主要介紹了Nginx配置并兼容HTTP實(shí)現(xiàn)代碼解析,文中通過示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下
    2020-11-11
  • centos8中使用yum安裝nginx的詳細(xì)過程

    centos8中使用yum安裝nginx的詳細(xì)過程

    這篇文章主要介紹了centos8中怎樣使用yum安裝?nginx,centos8和centos7安裝nginx有點(diǎn)點(diǎn)不一樣,centos8?自帶了nginx?1.14.1?,我們先升級(jí)到新穩(wěn)定版1.20.1,具體安裝方法跟隨小編一起學(xué)習(xí)下吧
    2023-03-03
  • Nginx+Tomcat集群環(huán)境的實(shí)現(xiàn)

    Nginx+Tomcat集群環(huán)境的實(shí)現(xiàn)

    本文主要介紹了配置Nginx和Tomcat集群環(huán)境,包括負(fù)載均衡、故障轉(zhuǎn)移以及配置單機(jī)應(yīng)用和Tomcat集群的具體步驟, 感興趣的可以了解一下
    2024-11-11
  • Nginx最大連接數(shù)配置詳解

    Nginx最大連接數(shù)配置詳解

    這篇文章主要為大家詳細(xì)介紹了Nginx最大連接數(shù)配置的方法,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下
    2022-07-07
  • Nginx 如何部署指定文件夾下的項(xiàng)目(本地測(cè)試)

    Nginx 如何部署指定文件夾下的項(xiàng)目(本地測(cè)試)

    這篇文章主要介紹了Nginx 如何部署指定文件夾下的項(xiàng)目(本地測(cè)試),分為配置vue.config.js,指定生成環(huán)境的包,配置路由模式為hash(history模式刷新后,找不到頁面),本文講解的非常詳細(xì),需要的朋友可以參考下
    2024-01-01
  • Nginx配置Prometheus監(jiān)控的實(shí)現(xiàn)

    Nginx配置Prometheus監(jiān)控的實(shí)現(xiàn)

    本文主要介紹了Nginx配置Prometheus監(jiān)控的實(shí)現(xiàn),文中通過示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
    2025-02-02
  • 分享nginx+php-fpm實(shí)現(xiàn)大文件下載排坑的過程

    分享nginx+php-fpm實(shí)現(xiàn)大文件下載排坑的過程

    這篇文章主要介紹了nginx+php-fpm實(shí)現(xiàn)大文件下載排坑的過程,文中通過代碼實(shí)例相結(jié)合的形式給大家介紹的非常詳細(xì),具有一定得參考借鑒價(jià)值,需要的朋友參考下吧
    2018-08-08
  • Nginx配置文件(nginx.conf)配置詳解(總結(jié))

    Nginx配置文件(nginx.conf)配置詳解(總結(jié))

    本篇文章主要介紹了Nginx配置文件(nginx.conf)配置詳解,這對(duì)初學(xué)者有一定的參考價(jià)值,有興趣的可以了解一下。
    2016-12-12
  • Nginx雙機(jī)熱備的實(shí)現(xiàn)步驟

    Nginx雙機(jī)熱備的實(shí)現(xiàn)步驟

    本文主要介紹了Nginx雙機(jī)熱備的實(shí)現(xiàn)步驟,是國內(nèi)企業(yè)中最為普遍的一種高可用方案,具有一定的參考價(jià)值,感興趣的可以了解一下
    2024-05-05
  • Nginx定義域名訪問方式

    Nginx定義域名訪問方式

    這篇文章主要介紹了Nginx定義域名訪問方式,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。一起跟隨小編過來看看吧
    2020-05-05

最新評(píng)論