Nginx实现动静分离的示例代码

2024-07-29 03:09:21

结合本文场景，需要安装Nginx和Java环境（运行SpringBoot项目）。

1.1 关于Linux系统安装Nginx可以参考我的文章---(传送门)。

1.2 本文SpringBoot使用了Thymeleaf模板，项目端口号为8888。

1.3 在本地/Users/dalaoyang/Downloads/static文件内存放了jquery.js

2.什么是动静分离？

在弄清动静分离之前，我们要先明白什么是动，什么是静。

在Web开发中，通常来说，动态资源其实就是指那些后台资源，而静态资源就是指HTML，JavaScript，CSS，img等文件。

一般来说，都需要将动态资源和静态资源分开，将静态资源部署在Nginx上，当一个请求来的时候，如果是静态资源的请求，就直接到nginx配置的静态资源目录下面获取资源，如果是动态资源的请求，nginx利用反向代理的原理，把请求转发给后台应用去处理，从而实现动静分离。

在使用前后端分离之后，可以很大程度的提升静态资源的访问速度，同时在开过程中也可以让前后端开发并行可以有效的提高开发时间，也可以有些的减少联调时间。

3.项目配置

修改SpringBoot应用启动类，做简单跳转，使访问根路径可以跳转到index.html，如下代码所示。

@SpringBootApplication
@Controller
public class DemoApplication {

	public static void main(String[] args) {
		SpringApplication.run(DemoApplication.class, args);
	}

	@GetMapping("/")
	public String index(){
		return "index";
	}
}

index.html代码如下所示，注意引入jquery.js，在引用成功会使用jquery给div赋值，代码如下所示。

<!DOCTYPE html>
<!--解决th报错 -->
<html lang="en" xmlns:th="http://www.w3.org/1999/xhtml">
<head>
 <meta charset="UTF-8">
 <title>thymeleaf</title>
</head>
<script type="text/javascript" src="jquery.js"></script>
<body>
<h1>这是一个静态页面</h1>
<div id="test_div"></div>
</body>

<script type="text/javascript">
 $('#test_div').html('引用jquery.js成功');
</script>

</html>

项目结构如下所示，可以看到没有jquery.js，我们要做的就是使用Nginx来访问jquery.js。

4.Nginx配置

修改nginx.conf配置，其中第一个location负责处理后台请求，第二个负责处理静态资源，如下所示。

worker_processes 1;

events {
 worker_connections 1024;
}

http {

 server {
  listen  10000;
  server_name localhost;

  #拦截后台请求
  location / {
  proxy_pass http://localhost:8888;
  proxy_set_header X-Real-IP $remote_addr;
  }

  #拦截静态资源
  location ~ .*\.(html|htm|gif|jpg|jpeg|bmp|png|ico|js|css)$ {
  root /Users/dalaoyang/Downloads/static;
  }

 }

}

5.测试

启动SpringBoot应用，启动Nginx。

在浏览器访问http://localhost:10000/，可以看到如下图所示。

通过图中红框内容都可以看出来引用静态资源成功了。

6.总结

最近一直在看有关nginx的东西，最近一段时间会持续更新相关nginx的文章，如果大家感兴趣可以持续关注。

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。

nginx实现tomcat动静分离详解

1.为什么要实现动静分离 1)nginx的处理静态资源能力超强主要是nginx处理静态页面的效率远高于tomcat的处理能力,如果tomcat的请求量为1000次,则nginx的请求量为6000次,tomcat每秒的吞吐量为0.6M,nginx的每秒吞吐量为3.6M,可以说,nginx处理静态资源的能力是tomcat处理能力的6倍,优势可见一斑. 2)动态资源和静态资源分开,使服务器结构更清晰. 2.动静分离原理服务端接收来自客户端的请求中,有一部分是静态资源的请求,例如html,css,j
Nginx配合Apache或Tomcat的动静分离基本配置实例

其实本人比较喜欢nginx跑静态和做负载反向代理,动态php还是交给apache处理比较稳定,jsp就交给tomcat.resin或jboss.nginx跑静态的能力是无与伦比的,是目前web服务器里最强的.nginx和apache.tomcat.resin的动静分离配置其实很简单,就几句配置,稳定性也非常好. 1.nginx和apache的动静分离配置: 把下面配置放到nginx配置文件相应的server { }里面,如果使用其他端口号,改一下就行: #所有php的动态页面均交由apache处
简单实现nginx+tomcat的反向代理与动静分离

windows下测试 nginx+tomcat实现java web项目的动静分离 1. 安装nginx,访问静态资源安装成功后,启动nginx,浏览器输入http://localhost/出现欢迎页面. 在nginx下依次建立目录 static\test1\js\common,并将jquery.XX.js 放进去. PS: static 代表静态文件主目录,test1 代表tomcat下的项目名称,本机使用jquery-1.12.1.min.js 修改配置文件nginx.conf,添加如下配置
使用Nginx+uWsgi实现Python的Django框架站点动静分离

由于: Django处理静态文件不太友好: 以后有可能需要处理php或者其他资源的请求: 所以考虑结合nginx,使用nignx做它擅长的路由分发功能:同时做动静分离,即Http请求统一由Nginx进行分发,静态文件由Nginx处理,并返回给客户端:而动态的请求,则分发到uWsgi,由uWsgi再分发给Django进行处理.即客户端 <-> nginx <-> socket <-> uwsgi <-> Django 一.环境系统:centOS 6 pyth
nginx实现负载均衡和动静分离

nginx配置(windows配置),供大家参考,具体内容如下以下是我的项目用到的一份配置文件 #user nobody; worker_processes 4; #进程数,一般cpu是几核就写多少 #error_log logs/error.log; #error_log logs/error.log notice; #error_log logs/error.log info; #pid logs/nginx.pid; events { worker_connections 1024;#单
Nginx实现动静分离的示例代码

结合本文场景,需要安装Nginx和Java环境(运行SpringBoot项目). 1.1 关于Linux系统安装Nginx可以参考我的文章---(传送门). 1.2 本文SpringBoot使用了Thymeleaf模板,项目端口号为8888. 1.3 在本地/Users/dalaoyang/Downloads/static文件内存放了jquery.js 2.什么是动静分离? 在弄清动静分离之前,我们要先明白什么是动,什么是静. 在Web开发中,通常来说,动态资源其实就是指那些后台资源,而静态资源
nginx实现动静分离的方法示例

目录在server1上部署nginx 在server上部署lnmp node3部署httpd 实现分离部署本文主要介绍了nginx实现动静分离的方法示例,具有一定的学习价值,具体如下环境: 系统/主机名 IP地址服务 Redhat8 :server1 192.168.244.131 nginx Redhat8:server2 192.168.244.133 lnmp Content7:node3 192.168.244.142 httpd 在三台主机上关闭防火墙 [root@server
使用shell脚本对Nginx日志进行切分的示例代码

本文介绍了使用shell脚本对Nginx日志进行切分的示例代码,分享给大家,具体如下: 1.日志格式默认的日志格式: main log_format main '$remote_addr - $remote_user [$time_local] "$request" ' $status $body_bytes_sent "$http_referer" ' '"$http_user_agent" "$http_x_forwarded_f
部署Nginx+Apache动静分离的实例详解

Nginx动静分离介绍 Nginx的静态处理能力很强,但是动态处理能力不足,因此,在企业中常用动静分离技术针对PHP的动静分离静态页面交给Nginx处理动态页面交给PHP-FPM模块或Apache处理在Nginx的配置中,是通过location配置段配合正则匹配实现静态与动态页面的不同处理方式反向代理原理 Nginx不仅能作为Web服务器,还具有反向代理.负载均衡和缓存的功能 Nginx通过proxy模块实现将客户端的请求代理至上游服务器,此时nginx与上游服务器的连接是通过http
nginx实现动静分离实例讲解

为了加快网站的解析速度,可以把动态页面和静态页面由不同的服务器来解析,加快解析速度.降低原来单个服务器的压力. 简单来说,就是使用正则表达式匹配过滤,然后交个不同的服务器. 1.准备环境准备一个nginx代理两个http 分别处理动态和静态. 1.配置编译安装的nginx为反向代理upstream: upstream static { server 10.0.105.196:80 weight=1 max_fails=1 fail_timeout=60s; } upstream php {
SpringBoot+MyBatis+AOP实现读写分离的示例代码

目录一. MySQL 读写分离 1.1.如何实现 MySQL 的读写分离? 1.2.MySQL 主从复制原理? 1.3.MySQL 主从同步延时问题(精华) 二.SpringBoot+AOP+MyBatis实现MySQL读写分离 2.1.AbstractRoutingDataSource 2.2.如何切换数据源 2.3.如何选择数据源三 .代码实现 3.0.工程目录结构 3.1.引入Maven依赖 3.2.编写配置文件,配置主从数据源 3.3.Enum类,定义主库从库 3.4.ThreadL
FastApi+Vue+LayUI实现前后端分离的示例代码

目录前言项目设计后端前端运行项目 Q&A 前言在前面的Api开发中,我们使用FastApi已经可以很好的实现.但是实际使用中,我们通常建议前后端项目分离.今天我们就使用FastApi+Vue+LayUI做一个前后端分离的Demo. 项目设计后端后端我们采用FastApi在新的test视图中,定义一个路由,并将其注册到app中,并且在test视图中定义一个接口,实现模拟从数据库读取数据供前端调用渲染. 代码 test.py from fastapi import FastAPI,D
Java基于JNDI 实现读写分离的示例代码

目录一.JNDI数据源配置二.JNDI数据源使用三.web.xml配置四.spring-servlet.xml配置五.spring-db.xml配置六.log4j.properties配置七.相关路由数据源切换逻辑代码八.搭建过程中遇到的问题和解决方案一.JNDI数据源配置在Tomcat的conf目录下,context.xml在其中标签中添加如下JNDI配置: <Resource name="dataSourceMaster" factory="or
使用nginx实现动静分离

本文为大家分享了使用nginx实现动静分离的具体内容,供大家参考,具体内容如下一.什么是动静分离动静分离是指在web服务器架构中,将静态页面与动态页面或者静态内容接口和动态内容接口分开不同系统访问的架构设计方法,进而提升整个服务访问性能和可维护性. nginx 的动静分离,指的是由 nginx 将客户端请求进行分类转发,静态资源请求(如html.css.图片等)由静态资源服务器处理,动态资源请求(如 jsp页面.servlet程序等)由 tomcat 服务器处理,tomcat 本身是用来处理
nginx+vue.js实现前后端分离的示例代码

1.nginx 是一个高性能的HTTP和反向代理服务器,常用于分布式服务器管理. 它常用于做负载均衡(通过调用多台服务器达到此目的) 静态资源输出更快,可以对资源实现gzip压缩后输出(这也是本文为什么用它做静态资源访问的一个重要原因) 适合解决跨域问题和反向代理(因为谁也不想看到在本域名下看到访问其他域名的情况发生,跨域可导致csrf攻击,这是本文用它的第二个原因) 占用内存少,秒启,能快速切换结点,防止宕机 2.es6 是ECMAScript的第六个版本,如果想要学好vue.js等js框架,

Nginx实现动静分离的示例代码

相关推荐

随机推荐