Nginx實(shí)現(xiàn)動(dòng)靜分離的示例代碼

更新時(shí)間：2019年01月02日 09:36:04 作者：dalaoyang

這篇文章主要介紹了Nginx實(shí)現(xiàn)動(dòng)靜分離的示例代碼，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧

結(jié)合本文場景，需要安裝Nginx和Java環(huán)境（運(yùn)行SpringBoot項(xiàng)目）。

1.1 關(guān)于Linux系統(tǒng)安裝Nginx可以參考我的文章---(傳送門)。

1.2 本文SpringBoot使用了Thymeleaf模板，項(xiàng)目端口號為8888。

1.3 在本地/Users/dalaoyang/Downloads/static文件內(nèi)存放了jquery.js

2.什么是動(dòng)靜分離？

在弄清動(dòng)靜分離之前，我們要先明白什么是動(dòng)，什么是靜。

在Web開發(fā)中，通常來說，動(dòng)態(tài)資源其實(shí)就是指那些后臺(tái)資源，而靜態(tài)資源就是指HTML，JavaScript，CSS，img等文件。

一般來說，都需要將動(dòng)態(tài)資源和靜態(tài)資源分開，將靜態(tài)資源部署在Nginx上，當(dāng)一個(gè)請求來的時(shí)候，如果是靜態(tài)資源的請求，就直接到nginx配置的靜態(tài)資源目錄下面獲取資源，如果是動(dòng)態(tài)資源的請求，nginx利用反向代理的原理，把請求轉(zhuǎn)發(fā)給后臺(tái)應(yīng)用去處理，從而實(shí)現(xiàn)動(dòng)靜分離。

在使用前后端分離之后，可以很大程度的提升靜態(tài)資源的訪問速度，同時(shí)在開過程中也可以讓前后端開發(fā)并行可以有效的提高開發(fā)時(shí)間，也可以有些的減少聯(lián)調(diào)時(shí)間。

3.項(xiàng)目配置

修改SpringBoot應(yīng)用啟動(dòng)類，做簡單跳轉(zhuǎn)，使訪問根路徑可以跳轉(zhuǎn)到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，在引用成功會(huì)使用jquery給div賦值，代碼如下所示。

<!DOCTYPE html>
<!--解決th報(bào)錯(cuò) -->
<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>這是一個(gè)靜態(tài)頁面</h1>
<div id="test_div"></div>
</body>

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

</html>

項(xiàng)目結(jié)構(gòu)如下所示，可以看到?jīng)]有jquery.js，我們要做的就是使用Nginx來訪問jquery.js。

4.Nginx配置

修改nginx.conf配置，其中第一個(gè)location負(fù)責(zé)處理后臺(tái)請求，第二個(gè)負(fù)責(zé)處理靜態(tài)資源，如下所示。

worker_processes 1;

events {
 worker_connections 1024;
}

http {

 server {
  listen  10000;
  server_name localhost;
  
  #攔截后臺(tái)請求
  location / {
  proxy_pass http://localhost:8888;
  proxy_set_header X-Real-IP $remote_addr;
  }

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

 }

}

5.測試

啟動(dòng)SpringBoot應(yīng)用，啟動(dòng)Nginx。

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