当前位置 > it书童 > nginx > 正文

nginx 配置动静分离

nginx it书童 2019-10-05 11:06:14 0赞 0踩 319阅读 0评论

nginx并不能直接处理动态资源请求,如 php 文件,必须将这些请求转发给 php 服务器,再经由 php 服务器返回解析好的 html,然后 nginx 再将打包好的数据返回给浏览器。

这样的请求路径就很长,需要消耗更多的资源,因此必须区分客户端的请求类型,只将动态资源转发,静态资源直接由nginx返回,而静态资源中的图片加上缓存及进行压缩,能更好地提升性能

nginx 配置

server {
    listen                          80;
    server_name                     local.test;
    root                            /Users/long/code/test;

    location / {
        index  index.html index.htm index.php;
    }

    # 图片资源
    location ~ \.(jpg|png|gif)$ {
        expires 1h;
        gzip on;
    }

    # 转发php请求
    location ~ \.php$ {
        fastcgi_index               index.php;
        fastcgi_param               SCRIPT_FILENAME $document_root$fastcgi_script_name;
        fastcgi_read_timeout        300;
        fastcgi_keep_conn           on;
        include                     /usr/local/etc/nginx/fastcgi_params;
        fastcgi_pass                127.0.0.1:9001;
        index                       index.html index.php;
    }
}

示例代码

index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.1.0/css/bootstrap.min.css">
    <script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>
    <script src="https://cdn.staticfile.org/popper.js/1.12.5/umd/popper.min.js"></script>
    <script src="https://cdn.staticfile.org/twitter-bootstrap/4.1.0/js/bootstrap.min.js"></script>
    <title>动静分离</title>
</head>
<body>
    <div class="container">
        <div class="card" style="width:400px">
            <img class="card-img-top" src="https://ws1.sinaimg.cn/large/006tKfTcgy1g09f9ng3xtj30u00gngne.jpg" alt="" style="width:100%">
            <div class="card-body">
                <h4 class="card-title">流浪地球</h4>
                <p class="time"></p>
                <p class="card-text">你在平原上走着走着,突然迎面遇到一堵墙,这墙向上无限高,向下无限深,向左无限远,向右无限远,这墙是什么?</p>
            </div>
        </div>
        <br>
    </div>
    <script>
        $.ajax({
            type: "GET",
            url: "http://local.test/index.php",
            success: function(data) {
                $('.time').html(data)
            },
            error: function() {
                $('.time').html("获取时间失败")
            }
        })
    </script>
</body>
</html>

index.php

<?php
echo date("Y-m-d H:i:s", time())

演示情况:

关闭php进行演示

接下来我们将php服务关闭 (mac 环境)

$ sudo brew services stop php@7.2
Stopping `php@7.2`... (might take a while)
==> Successfully stopped `php@7.2` (label: homebrew.mxcl.php@7.2)

$ brew services list | grep php@7.2
php@7.2           stopped

再次查看页面:

转载须注明出处:https://www.itshutong.com/articles/266/nginx-configuration-dynamic-static-separation
关于我
一个文科出身的程序员,追求做个有趣的人,传播有价值的知识,微信公众号主要分享读书思考心得,不会有代码类文章,非程序员的同学请放心订阅
发表评论
我有句话,不知当讲不当讲?
要讲之前请先 登录