使用Nginx搭建前端靜態服務器+文件服務器

大家可能被虛擬主機不太瞭解,那我們的解釋一下,虛擬主機指在一臺物理主機服務器上劃分出多個磁盤空間,每個磁盤空間都是一個虛擬主機,每臺虛擬主機都可以對外提供Web服務,並且互不干擾。
一、Nginx的虛擬主機介紹

大家可能被虛擬主機不太瞭解,那我們的解釋一下,虛擬主機指在一臺物理主機服務器上劃分出多個磁盤空間,每個磁盤空間都是一個虛擬主機,每臺虛擬主機都可以對外提供Web服務,並且互不干擾。

使用Nginx搭建前端靜態服務器+文件服務器使用Nginx搭建前端靜態服務器+文件服務器

就類似我們本地虛擬機,我們可以在window系統上面安裝一個虛擬機,在虛擬機裏面安裝很多個系統。那這樣的話我們就可以模擬很多個服務器。

Nginx虛擬主機配置, 我們可以在一臺機器上面配置很多個虛擬主機配置多個域名。那這樣的話我們就可以靠虛擬主機轉發到不同的應用,就不用每個系統都配置一個Nginx。

使用Nginx搭建前端靜態服務器+文件服務器使用Nginx搭建前端靜態服務器+文件服務器

二、搭建前端靜態服務器

前面我們講解了很多基礎知識以及我們這個環境的搭建,那我們現在就來開發我們第一個案例實操。

我們知道一個系統它有前端頁面跟後端服務組成。這個就不像我們最開始學那個編碼的時候,前端代碼跟後端代碼放在一起。這一種的話性能很低,完全支撐不了高併發訪問。

現在公司基本都是前後端分離的架構。前端專門負責開發前端的頁面,後端專門開發對應的後端接口。

後端部署的話一般都是集羣部署,然後會增加對應的緩存跟消息隊列,提高接口的一個性能。

那前端這一塊我們一般怎麼去部署呢?

比如vue開發或者React開發的項目,我們一般會把前端代碼單獨放到一個文件服務器上面或者購買CDN服務,用戶訪問前端代碼,前端代碼會發起異步請求我們後端的接口,然後渲染數據最終通過瀏覽展示出來。

這個跟下面的圖也是一樣的,我們可以用Nginx做一個文件服務器,用戶訪問Nginx去找對應的HTML代碼返回給瀏覽器,再請求後端接口拿數據在瀏覽器上渲染出來。

使用Nginx搭建前端靜態服務器+文件服務器使用Nginx搭建前端靜態服務器+文件服務器

那Nginx怎麼配置靜態代碼服務器呢?跟着步驟即可,我們編輯/usr/local/nginx/conf/nginx.conf文件。

找到server虛擬主機節點,配置下靜態html文件路徑,root可以是相對路徑,也可以是絕對路徑,我們這邊使用nginx 裏面的html文件夾,index 配置表示會根據html文件路徑去找默認的首頁文件,先找index.html

如果找不到就找index.htm

使用Nginx搭建前端靜態服務器+文件服務器使用Nginx搭建前端靜態服務器+文件服務器

server { 
        listen       80; 
        server_name  aabbccdd.com; # 本地虛擬主機的配置域名 
 
        location / { 
            root   /usr/local/nginx/html; #相對路徑或者絕對路徑都可以 
            index  xdclass.html; 
        } 
  }

爲了方便驗證,我們需要準備對應的前端代碼,直接修改/usr/local/nginx/html/index.html裏面的代碼,修改完保存, 然後重啓我們的Nginx即可驗證

使用Nginx搭建前端靜態服務器+文件服務器使用Nginx搭建前端靜態服務器+文件服務器

訪問我們配置好的本地域名解析,aabbccdd.com 就可以訪問到靜態代碼文件,包括如果你使用vue或者react 開發的前端代碼,也可以按照這種方式進行一個配置。

使用Nginx搭建前端靜態服務器+文件服務器使用Nginx搭建前端靜態服務器+文件服務器

三、Nginx搭建文件服務器

在講我們搭建文件服務器之前,我們一般開發一個系統,肯定會涉及到一個文件的上傳好比用戶的頭像, 或者PDF文件,那這些東西我們應該存儲到哪裏呢?

以前學項目的時候,基本就是把圖片傳到項目本身裏面, 如果文件數量少的話還可以接受。

那如果圖片的數量有幾萬幾十萬到幾百萬個,那這個缺點很明顯,用Tomcat返回對應的文件,那這個肯定很佔用的內存資源、帶寬資源以及併發量,基本很少公司會這樣做,公司基本就是使用文件服務器或者雲廠商提供的CDN。

那這一個文件服務器是怎麼操作的流程呢?前端用戶上傳文件到我們的後端服務器,後端服務器存儲臨時文件,然後再把文件傳到我們的文件服務器,拼裝好訪問的文件訪問URL,再把我們這個URL存儲到對應的數據庫,最後把URL返回給咱們這個前端用戶,這一個就是完整的文件上傳的流程。

使用Nginx搭建前端靜態服務器+文件服務器使用Nginx搭建前端靜態服務器+文件服務器

這樣的好處很明顯,後續用戶訪問對應的文件的時候不用經過我們的後端接口,直接訪問單獨的文件服務器。

我們後端的接口更適合於處理業務邏輯,合適的功能做合適的事情。

那使用Nginx怎麼去搭建我們這個圖片服務器呢?操作步驟很簡單,我們只要找到在nginx.conf配置文件到虛擬主機,然後根據location做個路徑的映射就可以。

server { 
        listen       80; 
        server_name  aabbccdd.com; 
        location /app/img { 
          alias /usr/local/software/img/; 
        } 
  }

上面這個配置的意思就是用戶訪問 aabbccdd.com/app/img/ ,命中我們配置的location路徑,Nginx就會根據對應的文件名稱,去這個/usr/local/software/img/文件夾下面找一下對應的文件返回給用戶。

這個alias相當於取了一個別名,把用戶訪問的資源路徑映射到我們這個配置的文件夾下面。

爲了方便測試,我們直接在這個文件夾上面上傳幾個圖片和文本,上傳上去之後,我們重啓我們的Nginx了。

使用Nginx搭建前端靜態服務器+文件服務器使用Nginx搭建前端靜態服務器+文件服務器

我們就可以通過我瀏覽器訪問對應的資源路徑,Nginx就會根據路徑找對應的文件返回給我們。

本文地址:https://www.linuxprobe.com/nginx-static-file.html

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章