一蠢古、Nginx動(dòng)靜分離
-
什么是動(dòng)靜分離
就是將動(dòng)態(tài)的資源與靜態(tài)的資源文件進(jìn)行分離,如圖:
在這里插入圖片描述
-
目的
解決由于靜態(tài)資源和動(dòng)態(tài)資源競(jìng)爭(zhēng)CPU導(dǎo)致的性能問題。
-
場(chǎng)景
主要的使用場(chǎng)景是 Web項(xiàng)目中使用篷角。
比如:查詢某個(gè)商品列表的頁(yè)面,如圖:
在這里插入圖片描述
商品列表頁(yè)面初始化的時(shí)候矗钟,會(huì)加載Js和Css文件和數(shù)據(jù)庫(kù)中的商品數(shù)據(jù)。
前提:并發(fā)量比較大嫌变,動(dòng)態(tài)資源將cpu和內(nèi)存等資源耗盡吨艇,導(dǎo)致靜態(tài)資源無法訪問,所以將項(xiàng)目中的靜態(tài)資源進(jìn)行拆分腾啥。
-
實(shí)例項(xiàng)目
-
條件
- Net5環(huán)境的 mvc項(xiàng)目
- Nginx
-
實(shí)例
- 新建Web項(xiàng)目东涡,靜態(tài)資源未分離的狀態(tài)冯吓,如圖:
在這里插入圖片描述
-
- 運(yùn)行Nginx
如圖:[圖片上傳失敗...(image-5533a7-1647258041984)]
- 項(xiàng)目運(yùn)行后如圖:
- 靜態(tài)資源拆分
將項(xiàng)目中靜態(tài)資源【wwwroot】拆分到其他文件夾中,新建一個(gè)StaticResource文件夾疮跑,如圖:
[圖片上傳失敗...(image-8efdf0-1647258041984)]
因項(xiàng)目中沒有了靜態(tài)資源文件组贺,導(dǎo)致頁(yè)面布局混亂,如圖:

所以需要在Nginx服務(wù)器中配置靜態(tài)文件祖娘,配置代碼如下:
```yaml
#配置靜態(tài)資源
location ~ \.(ico|js|css|png|jpg|mp4)$ {
root 靜態(tài)資源路徑;
}
# ~ 代表優(yōu)先匹配靜態(tài)資源
```
整體配置如下:
```yaml
#user nobody;
worker_processes 1;
#error_log logs/error.log;
#error_log logs/error.log notice;
#error_log logs/error.log info;
#pid logs/nginx.pid;
events {
worker_connections 1024;
}
http {
include mime.types;
default_type application/octet-stream;
server {
listen 80;
server_name localhost;
error_page 500 502 503 504 /50x.html;
location = /50x.html {
root html;
}
#代理 動(dòng)態(tài)數(shù)據(jù)
location / {
proxy_pass http://Demo.Application;
}
#代理 靜態(tài)資源
location ~ \.(ico|js|css|png|jpg|mp4)$ {
root D:/StaticResource/wwwroot;
}
}
#負(fù)載均衡(分流配置)
upstream Demo.Application{
least_conn;
server localhost:5000;
server localhost:5001;
}
}
```
運(yùn)行結(jié)果如圖:

按照以上的nginx配置失尖,動(dòng)態(tài)數(shù)據(jù)與靜態(tài)資源還是共享CPU資源的 ,那么依然沒有解決當(dāng)并發(fā)量過大渐苏,動(dòng)態(tài)資源將cpu和內(nèi)存等資源耗盡掀潮,導(dǎo)致靜態(tài)資源無法訪問的問題,所以我們要將動(dòng)態(tài)數(shù)據(jù)和靜態(tài)資源放在不同的虛擬主機(jī)中整以,配置代碼如下:
```yml
worker_processes 1;
events {
worker_connections 1024;
}
http {
include mime.types;
default_type application/octet-stream;
#加載動(dòng)態(tài)數(shù)據(jù)
server {
listen 801;
server_name localhost;
error_page 500 502 503 504 /50x.html;
location = /50x.html {
root html;
}
#代理
location / {
proxy_pass http://Demo.Application;
}
}
#用來合并 動(dòng)態(tài)數(shù)據(jù)和靜態(tài)資源
server {
listen 80;
server_name localhost;
error_page 500 502 503 504 /50x.html;
location = /50x.html {
root html;
}
#代理 動(dòng)態(tài)數(shù)據(jù)
location / {
proxy_pass http://localhost:801;
}
#代理 靜態(tài)資源
location ~ \.(ico|js|css|png|jpg|mp4)$ {
proxy_pass http://localhost:802;
}
}
#加載靜態(tài)資源
server {
listen 802;
server_name localhost;
error_page 500 502 503 504 /50x.html;
location = /50x.html {
root html;
}
#代理 靜態(tài)資源
location ~ \.(ico|js|css|png|jpg|mp4)$ {
root D:/StaticResource/wwwroot;
}
}
#負(fù)載均衡(分流配置)
upstream Demo.Application{
server localhost:5001;
}
}
```
按照以上的建立兩個(gè)不同的虛擬機(jī)胧辽,但是還在一個(gè)Nginx當(dāng)中,還是會(huì)存在資源競(jìng)爭(zhēng)的問題公黑,所以要將動(dòng)態(tài)數(shù)據(jù)和靜態(tài)資源放在不同的Nginx當(dāng)中,【推薦使用這種方式】實(shí)現(xiàn)如下:
- Nginx 1 動(dòng)態(tài)數(shù)據(jù) 配置文件如下
```yml
worker_processes 1;
events {
worker_connections 1024;
}
http {
include mime.types;
default_type application/octet-stream;
#加載動(dòng)態(tài)數(shù)據(jù)
server {
listen 801;
server_name localhost;
error_page 500 502 503 504 /50x.html;
location = /50x.html {
root html;
}
#代理
location / {
proxy_pass http://Demo.Application;
}
}
#負(fù)載均衡(分流配置)
upstream Demo.Application{
server localhost:5001;
}
}
```
- Nginx2 靜態(tài)資源 配置文件如下
```yml
worker_processes 1;
events {
worker_connections 1024;
}
http {
include mime.types;
default_type application/octet-stream;
#加載靜態(tài)資源
server {
listen 802;
server_name localhost;
error_page 500 502 503 504 /50x.html;
location = /50x.html {
root html;
}
#代理 靜態(tài)資源
location ~ \.(ico|js|css|png|jpg|mp4)$ {
root D:/StaticResource/wwwroot;
}
}
}
```
- Nginx3 合并資源配置文件如下
```yml
worker_processes 1;
events {
worker_connections 1024;
}
http {
include mime.types;
default_type application/octet-stream;
#用來合并 動(dòng)態(tài)數(shù)據(jù)和靜態(tài)資源
server {
listen 80;
server_name localhost;
error_page 500 502 503 504 /50x.html;
location = /50x.html {
root html;
}
#代理 動(dòng)態(tài)數(shù)據(jù)
location / {
proxy_pass http://localhost:801;
}
#代理 靜態(tài)資源
location ~ \.(ico|js|css|png|jpg|mp4)$ {
proxy_pass http://localhost:802;
}
}
}
```
二摄咆、Nginx代理緩存
-
條件
-
定義緩存
proxy_cache_path /cache/nginx/ levels=1:2 keys_zone=mycache:64m;
-
存儲(chǔ)緩存
#代理 動(dòng)態(tài)數(shù)據(jù) location / { proxy_cache mycache; proxy_set_header Host $host; proxy_set_header X-Real-IP $remote_addr; proxy_cache_methods GET HEAD; proxy_cache_revalidate on; proxy_cache_valid 200 302 10m; proxy_cache_valid 404 1m; proxy_cache_valid any 1m; proxy_cache_min_uses 1; proxy_cache_use_stale error timeout invalid_header http_500 http_502 http_503 http_504; proxy_pass http://localhost:801; }
-
建緩存文件夾
nginx-1.20.0\cache\nginx
-
-
運(yùn)行 結(jié)果如下
如圖:
在這里插入圖片描述
在這里插入圖片描述 -
缺陷
-
如果把數(shù)據(jù)庫(kù)的數(shù)據(jù)改了凡蚜,則頁(yè)面不會(huì)發(fā)生變化,緩存時(shí)間過期后吭从,則會(huì)發(fā)生變化朝蜘。
解決方案:使用Redis來解決。
-
三涩金、Nginx http轉(zhuǎn)htts
- 生成證書的工具
四谱醇、Nginx include
-
使用命令
include 配置文件名稱.conf #備注 在nginx配置文件下創(chuàng)建配置文件
五、Nginx Stream 反向代理
-
四層反向代理 mysql數(shù)據(jù)庫(kù)
配置如下:
stream { server { listen 13306; proxy_connect_timeout 1s; proxy_timeout 3s; proxy_pass localhost:3306; } upstream mysql { server localhost:3306; } }