Nginx實現動靜分離

時間 2019-11-21

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

原文原文鏈接

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

1.準備工做。

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

1.1 關於Linux系統安裝Nginx能夠參考個人文章---(傳送門)。html

1.2 本文SpringBoot使用了Thymeleaf模板，項目端口號爲8888。java

1.3 在本地/Users/dalaoyang/Downloads/static文件內存放了jquery.jsjquery

2.什麼是動靜分離？

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

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

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

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

3.項目配置

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

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

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

    }

}
複製代碼