目錄

• 一、nginx 作用
• 二、nginx 靜態(tài)HTTP服務(wù)器配置
• 三、nginx HTTP服務(wù)器（動(dòng)靜分離--nginx+tomcat實(shí)現(xiàn)動(dòng)靜分離）
• 四、 反向代理----使用proxy_pass
• ? nginx 配置springboot+vue 前后端分離項(xiàng)目
• 1、思路：nginx 結(jié)合自身特性，本身一個(gè)靜態(tài)資源的服務(wù)器，
• 2、通過(guò)dockerCompose+nginx配置實(shí)現(xiàn)部署spirngboot+vue前后端分離項(xiàng)目

一、nginx 作用

★ 靜態(tài)HTTP服務(wù)器

★ HTTP服務(wù)器（動(dòng)靜分離）

★ 反向代理

★ 負(fù)載均衡

二、nginx 靜態(tài)HTTP服務(wù)器配置

Nginx本身也是一個(gè)靜態(tài)資源的服務(wù)器，當(dāng)只有靜態(tài)資源的時(shí)候，就可以使用Nginx來(lái)做服務(wù)器，同時(shí)現(xiàn)在也很流行動(dòng)靜分離，就可以通過(guò)Nginx來(lái)實(shí)現(xiàn)。

# nginx 靜態(tài)資源配置--靜態(tài)服務(wù)器(也是最簡(jiǎn)單的配置)
server {
	listen 80; # 監(jiān)聽(tīng)端口號(hào)
	server_name localhost; # 主機(jī)名
	index index.html index.htm; # 默認(rèn)頁(yè)名稱(chēng)
	root html; # 靜態(tài)資源存放目錄
	location / { # 匹配路徑
		root html; # 文件根目錄
		index index.html index.htm; # 默認(rèn)頁(yè)名稱(chēng)
	}
	error_page 500 502 503 504 /50x.html; # 報(bào)錯(cuò)編碼對(duì)應(yīng)頁(yè)面
	location = /50x.html {
		root html;
	}
}

● url 和 uri:

網(wǎng)址是url，url=主機(jī):端口+uri

uri 是資源，是location后面的匹配規(guī)則，即 location uri

● location uri，當(dāng)規(guī)則匹配上了就到root目錄找頁(yè)面

location / { #匹配路徑
		root html; #文件根目錄
		index index.html index.htm; #默認(rèn)頁(yè)名稱(chēng)
	}

● location 配置方法

location 配置可以有兩種配置方法

① 前綴 + uri（字符串/正則表達(dá)式）

② @ + name

前綴含義

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

~* ：忽略大小寫(xiě)

^~ ：只需匹配uri部分

@ ：內(nèi)部服務(wù)跳轉(zhuǎn)

三、nginx HTTP服務(wù)器（動(dòng)靜分離--nginx+tomcat實(shí)現(xiàn)動(dòng)靜分離）

靜態(tài)資源：數(shù)據(jù)不變，請(qǐng)求不需要后臺(tái)處理；動(dòng)態(tài)資源：模板，jsp、templates等，數(shù)據(jù)需要后臺(tái)處理后渲染到網(wǎng)頁(yè)，動(dòng)態(tài)網(wǎng)頁(yè)。

Nginx可以根據(jù)一定規(guī)則把不變的資源和經(jīng)常變的資源區(qū)分開(kāi)，對(duì)動(dòng)靜資源進(jìn)行拆分，實(shí)現(xiàn)對(duì)靜態(tài)資源的做緩存，從而提高資源響應(yīng)的速度。這就是網(wǎng)站靜態(tài)化處理的核心思路。

upstream tomcat{  
	server localhost:8080;  
}   
server {  
	listen       80;  
	server_name  localhost;  
	location / {  
		root   html;  
		index  index.html;  
	}  
	# 所有靜態(tài)請(qǐng)求都由nginx處理，存放目錄為html  
	location  ~* \.(gif|jpg|jpeg|png|bmp|swf|css|js)$ {  
		root   html;  
	}  
	# 所有動(dòng)態(tài)請(qǐng)求都轉(zhuǎn)發(fā)給tomcat處理  
	location ~ *jsp$ {  
		proxy_pass  http://tomcat; # 代理轉(zhuǎn)發(fā)
	}  
	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地址或域名:端口號(hào);
       }  
}

? nginx 配置springboot+vue 前后端分離項(xiàng)目

1、思路：nginx 結(jié)合自身特性，本身一個(gè)靜態(tài)資源的服務(wù)器，

(1) 通過(guò)nginx實(shí)現(xiàn)域名的方式訪問(wèn)網(wǎng)站，以及把對(duì)數(shù)據(jù)的請(qǐng)求通過(guò)nginx反向代理轉(zhuǎn)發(fā)給后端容器(后端服務(wù))，避免了接口暴露的不安全

① 訪問(wèn)網(wǎng)站，首先習(xí)慣上訪問(wèn)網(wǎng)站的首頁(yè)，通常訪問(wèn)路徑是/ [location /]，然后默認(rèn)頁(yè)面是首頁(yè);

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

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

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 *;
 }

③ 默認(rèn)首頁(yè)，需要有數(shù)據(jù)

在vue中首頁(yè)實(shí)際上編寫(xiě)了很多個(gè)接口在請(qǐng)求數(shù)據(jù)，這些動(dòng)態(tài)數(shù)據(jù)是來(lái)自 springboot項(xiàng)目(api 服務(wù))，需要咱通過(guò)定義一個(gè)匹配接口路徑的規(guī)則[location /api]，然后進(jìn)行請(qǐng)求轉(zhuǎn)發(fā)到 springboot項(xiàng)目(api 服務(wù))

2、通過(guò)dockerCompose+nginx配置實(shí)現(xiàn)部署spirngboot+vue前后端分離項(xiàng)目

(1) dockerCompose 主要內(nèi)容：

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;# 通過(guò)dockerCompose編排，服務(wù)名相當(dāng)于域名
}

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 {# 請(qǐng)求https://blog.yilele.site/api 會(huì)代理轉(zhuǎn)發(fā)到 api:8888
					  proxy_pass http://apistream;
      }  
}

到此這篇關(guān)于nginx靜態(tài)資源的服務(wù)器配置方法的文章就介紹到這了,更多相關(guān)nginx靜態(tài)資源服務(wù)器內(nèi)容請(qǐng)搜索以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持！