nginx动静分离众客华禹 – 网站运维分享-IT技术资源教程-运维成长之路-个人随笔-华禹个人博客网站众客华禹

一、nginx动静分离
1、概念
动静分离是让动态网站里的动态网页根据一定规则把不变的资源和经常变的资源区分开来，动静资源做好了拆分以后，我们就可以根据静态资源的特点将其做缓存操作，这就是网站静态化处理的核心思路

2、优点
动静分离后, 即使动态服务不可用, 但静态资源不会受到影响。
动静分离将网站静态资源（HTML，JavaScript，CSS，img等文件）与后台应用分开部署，提高用户访问静态代码的速度，降低对后台应用访问。这里我们将静态资源放到nginx中，动态资源转发到tomcat服务器中。

3、架构分析

二、nginx动静分离应用案例
1、环境准备

系统 服务 地址
CentOS7.5 proxy 192.168.0.112
CentOS7.5 Nginx 192.168.0.113
CentOS7.5 TOmcat 192.168.0.113

2、.在192.168.0.113静态资源

[root@nginx conf.d]# cat access.conf
server{
listen 80;
root /soft/code;
index index.html;

location ~ .*\.(png|jpg|gif)$ {
gzip on;
root /soft/code/images;
}
}

//准备目录, 以及静态相关图片
[root@nginx ~]# wget -O /soft/code/images/nginx.png http://nginx.org/nginx.png

3、在192.168.0.113准备动态资源

[root@nginx ~]# wget -O /soft/package/tomcat9.tar.gz \
http://mirror.bit.edu.cn/apache/tomcat/tomcat-9/v9.0.7/bin/apache-tomcat-9.0.7.tar.gz
[root@nginx ~]# mkdir /soft/app
[root@nginx ~]# tar xf /soft/package/tomcat9.tar.gz -C /soft/app/

[root@nginx ~]# vim /soft/app/apache-tomcat-9.0.7/webapps/ROOT/java_test.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>Random number:</h1>");
out.println(rand.nextInt(99)+100);
%>
</BODY>
</HTML>

4、在192.168.0.112配置负载均衡代理调度, 实现访问jsp和png

upstream static {
server 192.168.69.113:80;
}

upstream java {
server 192.168.69.113:8080;
}

server {
listen 80;
server_name 192.168.69.112;

location / {
root /soft/code;
index index.html;
}

location ~ .*\.(png|jpg|gif)$ {
proxy_pass http://static;
include proxy_params;
}

location ~ .*\.jsp$ {
proxy_pass http://java;
include proxy_params;
}
}

5、在192.168.0.112 proxy代理上编写动静整合html文件

[root@nginx ~]# cat /soft/code/mysite.html

 <html lang="en">
<head>
<meta charset="UTF-8" />
<title>测试ajax和跨域访问</title>
<script src="http://libs.baidu.com/jquery/2.1.4/jquery.min.js"></script>
</head>
<script type="text/javascript">
$(document).ready(function(){
$.ajax({
type: "GET",
url: "http://192.168.0.112/java_test.jsp",
success: function(data) {
$("#get_data").html(data)
},
error: function() {
alert("fail!!,请刷新再试!");
}
});
});
</script>
<body>
<h1>测试动静分离</h1>
<img src="http://192.168.0.112/nginx.png">
<div id="get_data"></div>
</body>
</html>

当停止Nginx后, 强制刷新页面会发现静态内容无法访问, 动态内容依旧运行正常

当停止tomcat后, 静态内容依旧能正常访问, 动态内容将不会被请求到
三、nginx手机电脑应用案例

1、根据不同的浏览器, 以及不同的手机, 访问的效果都将不一样。
//通过浏览器来分别连接不同的浏览器访问不同的效果。

http {
...
upstream firefox {
server 172.12.0.133:80;
}
upstream chrome {
server 172.12.0.133:8080;
}
upstream iphone {
server 172.12.0.134:8080;
}
upstream android {
server 172.12.0.134:8081;
}
upstream default {
server 172.12.0.134:80;
}
...
}

//server根据判断来访问不同的页面
server {
listen 80;
server_name www.test.com;

#safari浏览器访问的效果
location / {
if ($http_user_agent ~* "Safari"){
proxy_pass http://dynamic_pools;
}
#firefox浏览器访问效果
if ($http_user_agent ~* "Firefox"){
proxy_pass http://static_pools;
}
#chrome浏览器访问效果
if ($http_user_agent ~* "Chrome"){
proxy_pass http://chrome;
}

#iphone手机访问效果
if ($http_user_agent ~* "iphone"){
proxy_pass http://iphone;
}

#android手机访问效果
if ($http_user_agent ~* "android"){
proxy_pass http://and;
}

#其他浏览器访问默认规则
proxy_pass http://dynamic_pools;
include proxy.conf;
}
}
}

2、根据访问不同目录, 代理不同的服务器

//默认动态，静态直接找设置的static，上传找upload
upstream static_pools {
server 10.0.0.9:80 weight=1;
}
upstream upload_pools {
server 10.0.0.10:80 weight=1;
}
upstream default_pools {
server 10.0.0.9:8080 weight=1;
}

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

#url: https://www.test.com/
location / {
proxy_pass http://default_pools;
include proxy.conf;
}

#url: https://www.test.com/static/
location /static/ {
proxy_pass http://static_pools;
include proxy.conf;
}

#url: https://www.test.com/upload/
location /upload/ {
proxy_pass http://upload_pools;
include proxy.conf;
}
}

//方案2：以if语句实现。
if ($request_uri ~* "^/static/(.*)$")
{
proxy_pass http://static_pools/$1;
}
if ($request_uri ~* "^/upload/(.*)$")
{
proxy_pass http://upload_pools/$1;
}
location / {
proxy_pass http://default_pools;
include proxy.conf;
}

文章版权归作者所有，未经允许请勿转载。

THE END