Nginx动静分离

一 动静分离概述

1.1 动静分离介绍

为了提高网站的响应速度，减轻程序服务器（Tomcat，Jboss等）的负载，对于静态资源，如图片、js、css等文件，可以在反向代理服务器中进行缓存，这样浏览器在请求一个静态资源时，代理服务器就可以直接处理，而不用将请求转发给后端服务器。对于用户请求的动态文件，如servlet、jsp，则转发给Tomcat，Jboss服务器处理，这就是动静分离。即动态文件与静态文件的分离。

1.2 动静分离原理

动静分离可通过location对请求url进行匹配，将网站静态资源（HTML，JavaScript，CSS，img等文件）与后台应用分开部署，提高用户访问静态代码的速度，降低对后台应用访问。通常将静态资源放到nginx中，动态资源转发到tomcat服务器中。
clipboard

二 动静分离实现--根据文件后缀

2.1 环境准备


主机

IP

角色

备注

nginx01

172.24.10.21

Nginx Proxy主机

接受请求，并代理至后端css存储点

nginx02

172.24.10.22

Nginx 静态服务器

处理静态请求

nginx03

172.24.10.23

Nginx 动态服务器

处理动态请求
本实验动静分离主要是通过nginx+tomcat来实现，其中nginx01进行前端代理，同时本地处理css静态文件，nginx02处理图片、html、JS等静态文件，tomcat处理jsp、servlet等动态请求。

2.2 创建静态站点

[root@nginx02 ~]# mkdir /usr/share/nginx/staticrs/
[root@nginx02 ~]# echo '<h1>Static_Web</h1>' > /usr/share/nginx/staticrs/index.html
[root@nginx02 ~]# ll /usr/share/nginx/staticrs/        #上传示例图片静态资源
total 16K
-rw-r--r-- 1 root root  20 Jun 20 14:32 index.html
-rw-r--r-- 1 root root 11K Jun 20 14:35 nginx.jpg
[root@nginx02 ~]# mv /etc/nginx/conf.d/default.conf /etc/nginx/conf.d/default.conf.bak
复制代码
[root@nginx02 ~]# vi /etc/nginx/conf.d/staticrs.conf
server {
    listen  80;
    server_name  staticrs.linuxds.com;
    access_log  /var/log/nginx/staticrs.access.log  main;
    error_log   /var/log/nginx/staticrs.error.log  warn;
    location / {
        root   /usr/share/nginx/staticrs;
        index  index.html;
    }
}
复制代码
1 [root@nginx02 ~]# nginx -t -c /etc/nginx/nginx.conf    #检查配置文件
  2 [root@nginx02 ~]# nginx -s reload            #重载配置文件
手动访问后端静态站点及资源：http://staticrs.linuxds.com/及http://staticrs.linuxds.com/nginx.jpg。
clipboard
clipboard

2.3 创建动态站点

1 [root@nginx03 ~]# yum install -y tomcat
  2 [root@nginx03 ~]# mkdir -p /usr/share/tomcat/webapps/ROOT
复制代码
[root@nginx03 ~]# vi /usr/share/tomcat/webapps/ROOT/javatest.jsp    #构建动态测试页面
<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
<HTML>
  <HEAD>
    <TITLE>JSP Test Page</TITLE>
  </HEAD>

  <BODY>
    <%
      Random rand = new Random();
      out.println("<h1>随机数:<h1>");
      out.println(rand.nextInt(99)+100);
    %>
  </BODY>
</HTML>
复制代码
1 [root@nginx03 ~]# systemctl start tomcat.service    #启动tomcat

2.4 配置前端动静分离

1 [root@nginx01 ~]# mkdir -p /usr/share/nginx/dss
  2 [root@nginx01 ~]# ll /usr/share/nginx/dss/
  3 total 4.0K
  4 -rw-r--r-- 1 root root 1.9K Jun 20 18:10 test.css    #模拟css
复制代码
[root@nginx01 ~]# vi /etc/nginx/conf.d/dss.conf        #配置Dynamic-Static Separation
upstream static_server {
    server 172.24.10.22;
}
upstream tomcat_server {
    server 172.24.10.23:8080;
}

server {
    listen       80;
    server_name  dss.linuxds.com;
    access_log  /var/log/nginx/dss.access.log  main;
    error_log   /var/log/nginx/dss.error.log  warn;
    proxy_set_header    X-Real-IP       $remote_addr;
    proxy_set_header    Host            $host;
    proxy_set_header    X-Forwarded-For         $proxy_add_x_forwarded_for;
    proxy_set_header    X-Forwarded-Proto       $scheme;
#    location / {
#        root html;
#        index index.html;
#    }
    location / {
        proxy_pass http://static_server;
    }
    location ~  .*\.(css)$  {
        root   /usr/share/nginx/dss;
    }
    location ~ .*\.(htm|html|gif|jpg|jpeg|png|gif|bmp|swf|ioc|rar|zip|txt|flv|mid|doc|ppt|pdf|xls|mp3|wma) {
        proxy_pass http://static_server;
        expires 5d;
    }
    location ~ .*\.jsp$ {
        proxy_pass http://tomcat_server;
        expires 1h;
    }
    error_page   500 502 503 504  /50x.html;
    location = /50x.html {
        root   html;
    }
}
复制代码
1 [root@nginx01 ~]# nginx -t -c /etc/nginx/nginx.conf    #检查配置文件
  2 [root@nginx01 ~]# nginx -s reload            #重载配置文件

2.5 访问测试

浏览器分别访问：http://dss.linuxds.com/，http://dss.linuxds.com/javatest.jsp，http://staticrs.linuxds.com/nginx.jpg，http://dss.linuxds.com/test.css。
clipboard

三 动静分离实现--根据文件路径

3.1 环境准备

参考2.1.

3.2 创建静态站点

[root@nginx02 ~]# mkdir /usr/share/nginx/staticrs/
[root@nginx02 ~]# echo '<h1>Static_Web</h1>' > /usr/share/nginx/staticrs/index.html
[root@nginx02 ~]# ll /usr/share/nginx/staticrs/        #上传示例图片静态资源
total 16K
-rw-r--r-- 1 root root  20 Jun 20 14:32 index.html
-rw-r--r-- 1 root root 11K Jun 20 14:35 nginx.jpg
[root@nginx02 ~]# mv /etc/nginx/conf.d/default.conf /etc/nginx/conf.d/default.conf.bak
复制代码
[root@nginx02 ~]# vi /etc/nginx/conf.d/staticrs.conf
server {
    listen  80;
    server_name  staticrs.linuxds.com;
    access_log  /var/log/nginx/staticrs.access.log  main;
    error_log   /var/log/nginx/staticrs.error.log  warn;
    location /static {
        alias   /usr/share/nginx/staticrs;
        index  index.html;
    }
}
复制代码
1 [root@nginx02 ~]# nginx -t -c /etc/nginx/nginx.conf    #检查配置文件
  2 [root@nginx02 ~]# nginx -s reload            #重载配置文件
手动访问后端静态站点及资源：http://staticrs.linuxds.com/static/及http://staticrs.linuxds.com/static/nginx.jpg。

3.3 创建动态站点

1 [root@nginx03 ~]# yum install -y tomcat
  2 [root@nginx03 ~]# mkdir -p /usr/share/tomcat/webapps/ROOT/dynamic
复制代码
[root@nginx03 ~]# vi /usr/share/tomcat/webapps/ROOT/dynamic/javatest.jsp
<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
<HTML>
  <HEAD>
    <TITLE>JSP Test Page</TITLE>
  </HEAD>

  <BODY>
    <%
      Random rand = new Random();
      out.println("<h1>随机数:<h1>");
      out.println(rand.nextInt(99)+100);
    %>
  </BODY>
</HTML>
复制代码
 1 [root@nginx03 ~]# systemctl start tomcat.service    #启动tomcat
手动访问后端动态站点及资源：http://dynamic.linuxds.com:8080/dynamic/javatest.jsp
3.4 配置前端动静分离
复制代码
[root@nginx01 ~]# vi /etc/nginx/conf.d/dss.conf        #配置Dynamic-Static Separation
upstream static_server {
    server 172.24.10.22;
}
upstream tomcat_server {
    server 172.24.10.23:8080;
}

server {
    listen       80;
    server_name  dss.linuxds.com;
    access_log  /var/log/nginx/dss.access.log  main;
    error_log   /var/log/nginx/dss.error.log  warn;
    proxy_set_header    X-Real-IP       $remote_addr;
    proxy_set_header    Host            $host;
    proxy_set_header    X-Forwarded-For         $proxy_add_x_forwarded_for;
    proxy_set_header    X-Forwarded-Proto       $scheme;
#    location / {
#        root html;
#        index index.html;
#    }
    location / {
        proxy_pass http://static_server;
    }
    location ~  .*\.(css)$  {
        root   /usr/share/nginx/dss;
    }
    location /static/ {
        proxy_pass http://static_server;
        expires 5d;
    }
    location /dynamic/ {
        proxy_pass http://tomcat_server;
        expires 1h;
    }
    error_page   500 502 503 504  /50x.html;
    location = /50x.html {
        root   html;
    }
}
复制代码
1 [root@nginx01 ~]# nginx -t -c /etc/nginx/nginx.conf    #检查配置文件
  2 [root@nginx01 ~]# nginx -s reload            #重载配置文件

3.5 访问测试

浏览器分别访问：http://dss.linuxds.com/，http://dss.linuxds.com/dynamic/javatest.jsp，http://staticrs.linuxds.com/static/nginx.jpg，http://dss.linuxds.com/test.css。
clipboard
参考：https://klionsec.github.io/2017/12/21/nginx-static-dynamic/。
posted @   星火撩原  阅读(96)  评论(0)  编辑  收藏  举报
编辑推荐：
· AI与.NET技术实操系列（二）：开始使用ML.NET
· 记一次.NET内存居高不下排查解决与启示
· 探究高空视频全景AR技术的实现原理
· 理解Rust引用及其生命周期标识（上）
· 浏览器原生「磁吸」效果！Anchor Positioning 锚点定位神器解析
阅读排行：
· DeepSeek 开源周回顾「GitHub 热点速览」
· 物流快递公司核心技术能力-地址解析分单基础技术分享
· .NET 10首个预览版发布：重大改进与新特性概览！
· AI与.NET技术实操系列（二）：开始使用ML.NET
· 单线程的Redis速度为什么快？
历史上的今天：
2019-12-13 KVM 虚拟化技术
2019-12-13 RAID几种方式
2019-12-13 Centos7 自定义systemctl服务脚本
2019-12-13 nginx配置优化+负载均衡+动静分离详解
2019-12-13 nginx负载均衡配置
2019-12-13 keepalived高可用反向代理的nginx
点击右上角即可分享
微信分享提示
AI FOR CODE 大赛

目录导航