获取全套nginx教程，请访问瓦力博客

动静分离就是通过中间nginx中间件将静态请求和动态请求分开。分离资源后，减少不必要的请求消耗，减少请求延时，减轻服务器压力。

现在项目基本都是前后端分离，前端的项目结构，assets目录一般都是存放静态资源的

/src
|-assets 
   |-iconfont
   |-img
   |-lib
   |-...
|...

演示实例

服务目录

/opt/app/code8
|-api
   |-rand.php
|-assets
   |-css
      |-index.css
   |-image
      |-test.jpeg
|-index.html

/etc/nginx/conf.d
|-balancing.conf

rand.php

<?php
    echo rand(1,100);

index.css

*{
    padding:0;
    margin:0;
}

img{
    width:500px;
    height:auto;
}

index.html

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <link rel="stylesheet" href="/assets/css/index.css">
</head>
<body>

    <div class="app">
        <h1> 随机数 <span id="rand"></span>  </h1>
        <img src="/assets/image/test.jpeg"/>
    </div> 

</body>
</html>
<script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
<script>
$.post("/api/rand.php",{name:'张三'},function(data){
    if(data){
        $('#rand').text(data);
    }
})
</script>

balancing.conf

server {
    listen       80; 
    server_name  walidream.com www.walidream.com;

    #charset koi8-r;
    access_log  /var/log/nginx/proxy_test.log  main;

    add_header Access-Control-Allow-Origin *;  
    add_header Access-Control-Allow-Methods GET,POST,PUT,DELETE,OPTIONS;

    root /opt/app/code8;

    location / { 
        index index.html;
    }   

    location ~ .\.php$ {
        fastcgi_pass 127.0.0.1:9000;
        fastcgi_index index.php;
        include fastcgi_params;
        fastcgi_param SCRIPT_FILENAME $document_root$fastcgi_script_name;    
    }   

    location /assets {
        expires 4h; 
        gzip on; 
        gzip_http_version 1.1;
        gzip_comp_level 2;
        gzip_types text/plain application/javascript application/x-javascript text/css application/xml text/javascript application/x-httpd-php image/jpeg image/gif image/png;

    } 
}

当访问主页时，assets下面的静态资源css,js,image,iconfont等等就会被nginx缓存起来，动态请求数据则不会，从而实现动静分离。

ssl

[深] nginx 动静分离(22)

演示实例

rand.php

index.css

index.html

balancing.conf

猜你喜欢