首页 > 系统相关> 文章详细

Nginx实现动静分离

2022-06-20 16:02:30 阅读：159 来源： 互联网

标签：动静 http conf nginx 分离 server Nginx web01 root

Nginx实现动静分离

Nginx实现动静分离

Nginx动静分离基本概述：

动静分离，通过中间件将动静分离和静态请求进行分离；通过中间件将动态请求和静态请求分离，可以建上不必要的请求消耗，同事能减少请求的延时。

通过中间件将动态请求和静态请求分离，逻辑图如下:

动静分离好处：动静分离后，即使动态服务不可用，但静态资源不会受到影响。

动静分离概念

#什么是静态资源
类似于 .jpg、.png、.css、.js....不需要访问数据库的资源，属于静态资源

#什么是动态资源
需要访问数据库的代码文件，.php、.jsp、.py....

#什么是静态请求
用户发起的请求只访问前端资源，不访问数据库

#什么是动态请求
用户发起的请求访问后端资源，访问数据库
#注意：不是页面会动，就一定是动态请求

#什么是动静分离
又叫做前后端分离，将前端代码和后端代码区分开，前端代码，前端开发人员来写，后端代码，后端的开发人员来写
前端和后端建立连接使用AJAX

Nginx动静分离场景实践：

环境准备

主机名	WanIP	LanIP	角色	应用
web01	10.0.0.7	172.16.1.7	代理	nginx
web02	10.0.0.8	172.16.1.8	静态服务器	nginx
web03	10.0.0.9	172.16.1.9	动态服务器	tomcat

部署前端(动态页面)

1.安装nginx服务

[root@web01 ~]# vim /etc/yum.repos.d/ngx.repo
[nginx-stable]
name=nginx stable repo
baseurl=http://nginx.org/packages/centos/$releasever/$basearch/
gpgcheck=1
enabled=1
gpgkey=https://nginx.org/keys/nginx_signing.key
module_hotfixes=true
[root@web01 ~]# yum install -y nginx

[root@web02 ~]# vim /etc/yum.repos.d/ngx.repo
[nginx-stable]
name=nginx stable repo
baseurl=http://nginx.org/packages/centos/$releasever/$basearch/
gpgcheck=1
enabled=1
gpgkey=https://nginx.org/keys/nginx_signing.key
module_hotfixes=true
[root@web01 ~]# yum install -y nginx

2.配置nginx静态资源配置文件

[root@web02 ~]# vim /etc/nginx/conf.d/static.conf
server {
        listen 80;
        server_name pic.lw.com;
        root /code;
        index index.html;
        charset utf-8;
        
        location ~* .*\.(jpg|png|gif)$ {
        	root /code/images;
		}
}

3.检查语法，启动nginx

#检查语法，启动nginx
[root@web02 ~]# nginx -t
[root@web02 ~]# systemctl restart nginx

4.域名解析

10.0.0.8 pic.lw.com

5.创建站点目录

[root@web02 ~]# mkdir -p /code/images

6.部署前端代码

[root@web02 ~]# echo '这是静态资源页面' > /code/index.html

7.上传图片到/code/images

[root@web02 images]# ll
total 224
-rw-r--r-- 1 root root 228072 Jun 8 11:41 1.jpg
[root@web02 images]# pwd
/code/images

部署后端(动态页面)

# 1.安装JAVA环境
[root@web03 ~]# yum install -y tomcat

# 2.启动tomcat
[root@web03 ~]# systemctl start tomcat

# 3.查看端口
[root@web03 ~]# netstat -lntup|grep java

# 4.tomcat站点目录
[root@web03 ~]# rpm -ql tomcat
/usr/share/tomcat/webapps

# 5.部署后端代码，需要在站点目录下创建一个ROOT目录，将代码部署在ROOT目录下
[root@web03 webapps]# mkdir /usr/share/tomcat/webapps/ROOT

[root@web03 webapps]# vi /usr/share/tomcat/webapps/ROOT/test.jsp
<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
<HTML>
    <HEAD>
        <TITLE>罗炜JSP Page</TITLE>
    </HEAD>
    <BODY>
        <%
            Random rand = new Random();
            out.println("<h1>罗炜随机数:<h1>");
            out.println(rand.nextInt(99)+100);
        %>
    </BODY>
</HTML>

# 6.打开浏览器访问：http://10.0.0.9:8080/test.jsp

在代理上整合资源

# 1.编辑代理配置文件
[root@web01 ~]# vim /etc/nginx/conf.d/proxy.conf
upstream static {
		server 172.16.1.8:80;
}

upstream java {
		server 172.16.1.9:8080;
}

server {
		listen 80;
		server_name pic.lw.com;
		
		location ~* \.(jpg|png|gif)$ {
			proxy_pass http://static;
			proxy_set_header Host $http_host;
		}
		
		location ~ \.jsp {
			proxy_pass http://java;
			proxy_set_header Host $http_host;
		}
}

# 2.启动nginx
[root@web01 ~]# systemctl start nginx

# 3.域名解析
10.0.0.7 pic.drz.com

# 4.浏览器访问：http://pic.drz.com/1.jpg

# 1.修改nginx代理配置文件 加 location /
[root@web01 ~]# vim /etc/nginx/conf.d/proxy.conf
upstream static {
		server 172.16.1.8:80;
}

upstream java {
		server 172.16.1.9:8080;
}

server {
		listen 80;
		server_name pic.lw.com;
		
		location / {
			root /code;
			index index.html;
		}
		
		location ~* \.(jpg|png|gif)$ {
			proxy_pass http://static;
			proxy_set_header Host $http_host;
		}
		
		location ~ \.jsp {
			proxy_pass http://java;
			proxy_set_header Host $http_host;
		}
}

# 2.创建站点目录
[root@web01 ~]# mkdir /code

# 3.编写资源整合代码
[root@web01 ~]# cat /code/index.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://pic.lw.com/java_test.jsp",
        success: function(data){
                $("#get_data").html(data)
        },
        error: function() {
                alert("哎呦喂,失败了,回去检查你服务去~");
        }
        });
});
</script>
        <body>
                <h1>罗炜带你测试动静分离</h1>
                <img src="http://pic.lw.com/cjk.gif">
                <div id="get_data"></div>
        </body>
</html>

# 4.重启nginx
[root@web01 ~]# nginx -t
[root@web01 ~]# systemctl restart nginx

# 5.打开浏览器访问：http://pic.lw.com/

Nginx实现资源分离

环境准备

主机名	WanIP	LanIP	角色	应用
lb01	10.0.0.5	172.16.1.5	代理	nginx
web01	10.0.0.7	172.16.1.7	PC端页面	nginx、PC端的代码
web02	10.0.0.8	172.16.1.8	安卓端页面	nginx、安卓端的代码
web03	10.0.0.9	172.16.1.9	IOS端页面	nginx、IOS端的代码

部署PC端

# 1.编写PC端nginx配置文件
[root@web01 ~]# vim /etc/nginx/conf.d/pc.conf
server {
        listen 9090;
        server_name pc.lw.com;
        charset utf-8;
        	
		location / {
			root /code/pc;
			index index.html;
		}
}

# 2.创建站点目录
[root@web01 ~]# mkdir /code/pc

# 3.部署pc端代码
[root@web01 ~]# echo '这里是PC端页面' > /code/pc/index.html

# 4.重新启动nginx
[root@web01 ~]# nginx -t
nginx: the configuration file /etc/nginx/nginx.conf syntax is ok
nginx: configuration file /etc/nginx/nginx.conf test is successful
[root@web01 ~]# systemctl restart nginx

# 5.域名解析
10.0.0.7 pc.lw.com

# 6.浏览器访问：http://pc.lw.com:9090/

部署安卓端代码

# 1.编写安卓端nginx配置文件
[root@web01 ~]# vim /etc/nginx/conf.d/android.conf
server {
        listen 9091;
        server_name android.lw.com;
        charset utf-8;
        	
		location / {
			root /code/android;
			index index.html;
		}
}

# 2.创建站点目录
[root@web01 ~]# mkdir /code/android

# 3.部署pc端代码
[root@web01 ~]# echo '这里是android端页面' > /code/android/index.html

# 4.重新启动nginx
[root@web01 ~]# nginx -t
nginx: the configuration file /etc/nginx/nginx.conf syntax is ok
nginx: configuration file /etc/nginx/nginx.conf test is successful
[root@web01 ~]# systemctl restart nginx

# 5.域名解析
10.0.0.7 android.lw.com

# 6.浏览器访问：http://android.lw.com:9091/

部署IOS页面

# 1.编写安卓端nginx配置文件
[root@web01 ~]# vim /etc/nginx/conf.d/IOS.conf
server {
        listen 9092;
        server_name IOS.lw.com;
        charset utf-8;
        	
		location / {
			root /code/IOS;
			index index.html;
		}
}

# 2.创建站点目录
[root@web01 ~]# mkdir /code/IOS

# 3.部署pc端代码
[root@web01 ~]# echo '这里是IOS端页面' > /code/IOS/index.html

# 4.重新启动nginx
[root@web01 ~]# nginx -t
nginx: the configuration file /etc/nginx/nginx.conf syntax is ok
nginx: configuration file /etc/nginx/nginx.conf test is successful
[root@web01 ~]# systemctl restart nginx

# 5.域名解析
10.0.0.7 android.lw.com

# 6.浏览器访问：http://android.lw.com:9090/

资源分离配置

[root@lb01 conf.d]# vim /etc/nginx/conf.d/source.conf
upstream android {
        server 172.16.1.7:9090;
}
 
upstream iphone {
        server 172.16.1.8:9091;
}
 
upstream pc {
        server 172.16.1.9:9092;
}
 
server {
        listen 80;
        server_name www.lw.com;
        charset 'utf-8';
 
        location / {
 
                #如果客户端来源是Android则跳转到Android的资源；
                if ($http_user_agent ~* "Android") {
                        proxy_pass http://android;
                }
 
                #如果客户端来源是Iphone则跳转到Iphone的资源；
                if ($http_user_agent ~* "Iphone") {
                        proxy_pass http://iphone;
                }
 
                #如果客户端是IE浏览器则返回403错误；
                if ($http_user_agent ~* "MSIE") {
                        return 403;
                }
 
                #默认跳转pc资源；
                proxy_pass http://pc;
        }
}

标签：动静,http,conf,nginx,分离,server,Nginx,web01,root
来源： https://www.cnblogs.com/lwlw/p/16393525.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

Nginx实现动静分离

Nginx实现动静分离

Nginx动静分离基本概述：

Nginx动静分离场景实践：

Nginx实现资源分离