Nginx實現動靜分離

甩鍋俠發表於2017-11-05
原文網址 : https://flycode.co/archives/162973
Nginx

本文利用Nginx實現簡單動靜分離，本文使用Nginx和一個SpringBoot簡單Web應用實現。

1.準備工作。

結合本文場景，需要安裝Nginx和Java環境（執行SpringBoot專案）。

1.1 關於Linux系統安裝Nginx可以參考我的文章---(傳送門)。

1.2 本文SpringBoot使用了Thymeleaf模板，專案埠號為8888。

1.3 在本地/Users/dalaoyang/Downloads/static檔案記憶體放了jquery.js

2.什麼是動靜分離？

在弄清動靜分離之前，我們要先明白什麼是動，什麼是靜。

在Web開發中，通常來說，動態資源其實就是指那些後臺資源，而靜態資源就是指HTML，JavaScript，CSS，img等檔案。

一般來說，都需要將動態資源和靜態資源分開，將靜態資源部署在Nginx上，當一個請求來的時候，如果是靜態資源的請求，就直接到nginx配置的靜態資源目錄下面獲取資源，如果是動態資源的請求，nginx利用反向代理的原理，把請求轉發給後臺應用去處理，從而實現動靜分離。

在使用前後端分離之後，可以很大程度的提升靜態資源的訪問速度，同時在開過程中也可以讓前後端開發並行可以有效的提高開發時間，也可以有些的減少聯調時間 。

3.專案配置

修改SpringBoot應用啟動類，做簡單跳轉，使訪問根路徑可以跳轉到index.html，如下程式碼所示。

@SpringBootApplication
@Controller
public class DemoApplication {

	public static void main(String[] args) {
		SpringApplication.run(DemoApplication.class, args);
	}

	@GetMapping("/")
	public String index(){
		return "index";
	}
}
複製程式碼

index.html程式碼如下所示，注意引入jquery.js，在引用成功會使用jquery給div賦值，程式碼如下所示。

<!DOCTYPE html>
<!--解決th報錯 -->
<html lang="en" xmlns:th="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <title>thymeleaf</title>
</head>
<script type="text/javascript" src="jquery.js"></script>
<body>
<h1>這是一個靜態頁面</h1>
<div id="test_div"></div>
</body>

<script type="text/javascript">
    $('#test_div').html('引用jquery.js成功');
</script>

</html>

複製程式碼

專案結構如下所示，可以看到沒有jquery.js，我們要做的就是使用Nginx來訪問jquery.js。

Nginx實現動靜分離

4.Nginx配置

修改nginx.conf配置，其中第一個location負責處理後臺請求，第二個負責處理靜態資源，如下所示。

worker_processes  1;

events {
    worker_connections  1024;
}

http {

   server {
       listen       10000;
       server_name  localhost;
      
      #攔截後臺請求
      location / {
        proxy_pass http://localhost:8888;
        proxy_set_header X-Real-IP $remote_addr;
      }

      #攔截靜態資源
      location ~ .*\.(html|htm|gif|jpg|jpeg|bmp|png|ico|js|css)$ {
        root /Users/dalaoyang/Downloads/static;
       }

    }

}
複製程式碼

5.測試

啟動SpringBoot應用，啟動Nginx。

在瀏覽器訪問http://localhost:10000/，可以看到如下圖所示。

Nginx實現動靜分離

通過圖中紅框內容都可以看出來引用靜態資源成功了。

6.總結

最近一直在看有關nginx的東西，最近一段時間會持續更新相關nginx的文章，如果大家感興趣可以持續關注。

相關文章