前面介紹了Nginx的負載均衡，一般來說，都需要将動态資源和靜态資源分開，這樣可以很大程度的提升靜态資源的通路速度，同時在開過程中也可以讓前後端開發并行可以有效的提高開發時間，也可以有些的減少聯調時間 。接下來介紹什麼是動靜分離以及如何使用Nginx實作動靜分離。
一、什麼是動靜分離
在Web開發中，通常來說，動态資源其實就是指那些背景資源，而靜态資源就是指HTML，JavaScript，CSS，img等檔案。
動靜分離，說白了，就是将網站靜态資源（HTML，JavaScript，CSS，img等檔案）與背景應用分開部署，提高使用者通路靜态代碼的速度，降低對背景應用伺服器的請求。背景應用伺服器隻負責動态資料請求。
優勢：分擔負載，減輕web伺服器的壓力，适用于大負載。靜态資源放置cdn，同時還可以通過配置緩存到客戶浏覽器中，這樣極大減輕web伺服器的壓力。
劣勢：網絡環境不佳時，ajax回應很慢，導緻頁面出現空白，出錯處理會不好看。不利于網站SEO（搜尋引擎優化），增加了開發複雜度。
二、實作方案
動靜分離就是根據一定規則靜态資源的請求全部請求Nginx伺服器，背景資料請求轉發到Web應用伺服器上。進而達到動靜分離的目的。目前比較流行的做法是将靜态資源部署在Nginx上，而Web應用伺服器隻處理動态資料請求。這樣減少Web應用伺服器的并發壓力。具體如下圖所示：
三、配置Nginx動靜分離
1. 修改nginx.conf配置，其中第一個location負責處理背景請求，第二個負責處理靜态資源， nginx 的其他配置，請參考前之前的文章。 具體如下所示：
#攔截靜态資源
location ~ .*\.(html|htm|gif|jpg|jpeg|bmp|png|ico|js|css)$ {
root static;
expires 30d;
}
上面的示例，主要是配置image、js、css等資源檔案的路徑和位址。然後設定緩存失效的時間。
完成的Nginx配置如下所示：
worker_processes 1;
events {
worker_connections 1024;
}
http {
server {
listen 80;
server_name localhost;
#攔截背景請求
location / {
proxy_pass http://localhost:81;
proxy_set_header X-Real-IP $remote_addr;
}
#攔截靜态資源
location ~ .*\.(html|htm|gif|jpg|jpeg|bmp|png|ico|js|css)$ {
root static;
expires 30d;
}
}
} 2. 在Nginx 下 建立 static 目錄，将圖檔，js, css 等檔案 拷貝到該目錄下
3. 重新開機Nginx，使用指令： ./nginx -s reload 重新啟動Nginx。
四、驗證測試
Nginx 配置完成之後，在浏覽器中通路：
http://localhost/ 檢視頁面的請求效果。
通過浏覽器的調試工具，通過圖中紅框内容都可以看出來引用靜态資源成功了。動态請求轉發到了81端口的web應用伺服器，而靜态的資源檔案，通路的是80端口。說明Nginx的動靜分離配置成功。
最後
以上，就把如何配置Nginx動靜分離介紹完了，是不是特别簡單。
因為後面還要介紹Nginx 的優化，免不了檢視Nginx的狀态。是以這裡就提前介紹下。下篇會介紹Nginx的高性能優化，怎麼讓Nginx伺服器實作10w的并發通路量。
這是系列課程，大家關注我的微信公衆号（架構師精進），随時交流。
推薦閱讀：
Nginx極簡入門（八）Nginx性能監控及性能狀态參數詳解！ Nginx極簡入門（七）Nginx的日志管理及配置 Nginx極簡入門（六）配置Nginx負載均衡，提高系統并發性能！ Nginx極簡入門（五）配置Nginx反向代理 Nginx極簡入門（四）基于域名的虛拟主機配置 Nginx極簡入門（三）基于端口的虛拟主機配置 Nginx極簡入門（二）配置基于ip的虛拟主機 Nginx極簡入門（一）如何在Linux系統編譯安裝Nginx服務 Nginx極簡實戰—Nginx伺服器高性能優化配置，輕松實作10萬并發通路量