Nginx basics-dynamic and static separation configuration

Take notes:

1. Why do dynamic and static separation

For some applications (such as websites), static resources such as pictures, css files, js files do not need dynamic language support and can be directly returned to the client for use. If these static resources follow the same process as dynamic resources, it would be too wasteful Server resources.
Therefore, the best way is to separate them, the static resources are returned directly from the nginx server, and the dynamic resources are forwarded to the corresponding service by nginx for execution and then returned to the client.

The advantage of separation of activity and static is that it can provide users with a better experience, instead of waiting for the server to return resources all at once.

2. Nginx realizes dynamic and static separation

2.1, nginx configuration

(The environment where the pagoda is installed)
Set the configuration file of the website
Insert picture description here

Modify location in the server ~ .*.(js|css)$

server {
    
    
	.......
      #静态html请求转发到这里
    location ~ .*\.(html|htm)$
    {
    
    
        root /www/wwwroot/mydt.cc/static;
        #expires定义用户浏览器缓存的时间为7天，缓存用上了，节约资源
        expires      7d;
    }
    #静态css请求转发到这里
    location ~ .*\.(js|css)?$
    {
    
    
        root /www/wwwroot/mydt.cc/static/css;
        #expires定义用户浏览器缓存的时间为7天，缓存用上了，节约资源
        expires      7d;
    }
    #静态图片请求转发到这里
    location ~ .*\.(gif|jpg|jpeg|png|bmp|swf)$
    {
    
    
        root /www/wwwroot/mydt.cc/static/img;
        #expires定义用户浏览器缓存的时间为7天，缓存用上了，节约资源
        expires      7d;
    }
}

As shown in the figure:
Insert picture description here

2.2, PHP file

Address: /www/wwwroot/mydt.cc/index.php

<?php
   date_default_timezone_set("Asia/Shanghai");
   #显示时间
   echo date("Y-m-d H:i:s",time());

2.3, static files

file name	address
index.html	/www/wwwroot/mydt.cc/static/index.html
app.css	/www/wwwroot/mydt.cc/static/css/app.css
default.png	/www/wwwroot/mydt.cc/static/img/default.png

The code of index.html is listed here, other pictures can be prepared freely

css
Insert picture description here

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
    <title>动静分离</title>
    <link rel="stylesheet" type="text/css" href="app.css">  <!-- 代理到css/app.css-->
    <script src="https://cdn.bootcss.com/jquery/3.3.0/jquery.js"></script>
</head>
<body>
<h1>动静分离</h1>
<img src="1.jpg">   <!-- 代理到img/1.jpg-->
<h1 id="time">动态 AJAX</h1>
<script>
    $.ajax({
     
     
        url:"/index.php",
        type:"GET",
        dataType : "text",
        success : function(result) {
     
     
            $("#time").html(result);
        },
        error:function(msg){
     
     
           alert("no");
        }
    });
</script>
</body>
</html>

As shown
Insert picture description here