Nginx實現動靜分離

時間 2019-11-12

標籤 nginx 實現動靜分離欄目 Nginx 简体版

原文原文鏈接

結合本文場景，須要安裝Nginx和Java環境（運行SpringBoot項目）。javascript

1.什麼是動靜分離？

在弄清動靜分離以前，咱們要先明白什麼是動，什麼是靜。css

在Web開發中，一般來講，動態資源其實就是指那些後臺資源，而靜態資源就是指HTML，JavaScript，CSS，img等文件。html

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

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

2.項目配置

修改SpringBoot應用啓動類，作簡單跳轉，使訪問根路徑能夠跳轉到index.html，以下代碼所示。nginx

@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。app

3.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;
       }

    }

}
複製代碼

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。