nginx靜態資源的伺服器設定方法

2022-07-01 14:05:07

一、nginx 作用

★ 靜態HTTP伺服器

★ HTTP伺服器（動靜分離）

★ 反向代理

★ 負載均衡

二、nginx 靜態HTTP伺服器設定

Nginx本身也是一個靜態資源的伺服器，當只有靜態資源的時候，就可以使用Nginx來做伺服器，同時現在也很流行動靜分離，就可以通過Nginx來實現。

# nginx 靜態資源設定--靜態伺服器(也是最簡單的設定)
server {
	listen 80; # 監聽埠號
	server_name localhost; # 主機名
	index index.html index.htm; # 預設頁名稱
	root html; # 靜態資源存放目錄
	location / { # 匹配路徑
		root html; # 檔案根目錄
		index index.html index.htm; # 預設頁名稱
	}
	error_page 500 502 503 504 /50x.html; # 報錯編碼對應頁面
	location = /50x.html {
		root html;
	}
}

● url 和 uri:

網址是url，url=主機:埠+uri

uri 是資源，是location後面的匹配規則，即 location uri

● location uri，當規則匹配上了就到root目錄找頁面

location / { #匹配路徑
		root html; #檔案根目錄
		index index.html index.htm; #預設頁名稱
	}

● location 設定方法

location 設定可以有兩種設定方法

① 字首 + uri（字串/正規表示式）

② @ + name

字首含義

= ：精確匹配（必須全部相等）：大小寫敏感

~* ：忽略大小寫

^~ ：只需匹配uri部分

@ ：內部服務跳轉

三、nginx HTTP伺服器（動靜分離--nginx+tomcat實現動靜分離）

靜態資源：資料不變，請求不需要後臺處理；動態資源：模板，jsp、templates等，資料需要後臺處理後渲染到網頁，動態網頁。

Nginx可以根據一定規則把不變的資源和經常變的資源區分開，對動靜資源進行拆分，實現對靜態資源的做快取，從而提高資源響應的速度。這就是網站靜態化處理的核心思路。

upstream tomcat{  
	server localhost:8080;  
}   
server {  
	listen       80;  
	server_name  localhost;  
	location / {  
		root   html;  
		index  index.html;  
	}  
	# 所有靜態請求都由nginx處理，存放目錄為html  
	location  ~* .(gif|jpg|jpeg|png|bmp|swf|css|js)$ {  
		root   html;  
	}  
	# 所有動態請求都轉發給tomcat處理  
	location ~ *jsp$ {  
		proxy_pass  http://tomcat; # 代理轉發
	}  
	error_page   500 502 503 504  /50x.html;  
	location = /50x.html {  
		root  html;  
	}  
}

四、反向代理----使用proxy_pass

server {
               listen       80;
               server_name  blog.yilele.site;
               index   index.html;            
               location / {
                        root /shan/blog/;
                        index index.html;
               }
              location ~* .(jpg|jpeg|gif|png|swf|rar|zip|css|js|map|svg|woff|ttf|txt)$ {
                          root /shan/blog/;
                          index index.html;
                          add_header Access-Control-Allow-Origin *;
              }
              # 反向代理
              location /api {
					proxy_pass http://ip地址或域名:埠號;
               }  
}

☺ nginx 設定springboot+vue 前後端分離專案

1、思路：nginx 結合自身特性，`本身一個靜態資源的伺服器`，

(1) 通過nginx實現域名的方式存取網站，以及把對資料的請求通過nginx反向代理轉發給後端容器(後端服務)，避免了介面暴露的不安全

① 存取網站，首先習慣上存取網站的首頁，通常存取路徑是/ [location /]，然後預設頁面是首頁;

location / {
     root /shan/blog/;
     index index.html;
 }

② 預設頁面，首頁需要像css、js、圖片等靜態資源，才能顯示出樣式、動態效果等，需要通過匹配規則[location ~*.(jpg|jpeg|gif|png|swf|rar|zip|css|js|map|svg|woff|ttf|txt)$]，指定root 到那個目錄下獲取這些靜態資源。

location ~* .(jpg|jpeg|gif|png|swf|rar|zip|css|js|map|svg|woff|ttf|txt)$ {
    root /shan/blog/;
    index index.html;
    add_header Access-Control-Allow-Origin *;
 }

③ 預設首頁，需要有資料

在vue中首頁實際上編寫了很多個介面在請求資料，這些動態資料是來自 springboot專案(api 服務)，需要咱通過定義一個匹配介面路徑的規則[location /api]，然後進行請求轉發到 springboot專案(api 服務)

2、通過dockerCompose+nginx設定實現部署spirngboot+vue前後端分離專案

(1) dockerCompose 主要內容：

version: "3"
services:
  api:
    image: api
    container_name: api
    expose:
      - "8888"
  nginx:
    image: nginx
    container_name: nginx
    ports:
      - 80:80
      - 443:443
    volumes:
      - /mnt/docker/nginx/:/etc/nginx/
      - /mnt/shan/blog:/shan/blog
    links:
      - api
    depends_on:
      - api

(2) nginx 主要設定：

upstream apistream{
        server api:8888;# 通過dockerCompose編排，服務名相當於域名
}

server {
               listen       80;
               server_name  blog.yilele.site;
               index   index.html;          
               location / {
                        root /shan/blog/;
                        index index.html;
               }
              location ~* .(jpg|jpeg|gif|png|swf|rar|zip|css|js|map|svg|woff|ttf|txt)$ {
                        root /shan/blog/;
                        index index.html;
                        add_header Access-Control-Allow-Origin *;
              }
              location /api {# 請求https://blog.yilele.site/api 會代理轉發到 api:8888
					  proxy_pass http://apistream;
              }  
}

到此這篇關於nginx靜態資源的伺服器設定方法的文章就介紹到這了,更多相關nginx靜態資源伺服器內容請搜尋it145.com以前的文章或繼續瀏覽下面的相關文章希望大家以後多多支援it145.com！