当前位置: 首页 > news >正文

Nginx实现动静分离

本文利用Nginx实现简单动静分离,本文使用Nginx和一个SpringBoot简单Web应用实现。

1.准备工作。

结合本文场景,需要安装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的文章,如果大家感兴趣可以持续关注。

相关文章:

  • Java基础教程,第四讲,字符串使用以及常用字符串处理函数
  • 树链剖分算法解析
  • 数据库还原失败System.Data.SqlClient.SqlError: 无法执行 BACKUP LOG,因为当前没有数据库备份...
  • 前端技术周刊 2019-02-11 Serverless
  • 杂篇:一代版本一代神[-Gradle-]
  • MySQL 大表迁移简单方案
  • cenots6.5安装 git version 2.0.5
  • Codeforces Global Round1 简要题解
  • Terraform入门 - 1. 安装Terraform
  • ps/kill/pkill简单应用
  • 测试工程师年度计划制定
  • P1967 货车运输
  • 微信如何实现自动跳转到用其他浏览器打开指定页面下载APP
  • Spring实践--spring事务:基础知识
  • 开工大吉,推荐几个Vim神级插件
  • [iOS]Core Data浅析一 -- 启用Core Data
  • “寒冬”下的金三银四跳槽季来了,帮你客观分析一下局面
  • 【comparator, comparable】小总结
  • 【译】React性能工程(下) -- 深入研究React性能调试
  • 78. Subsets
  • es6(二):字符串的扩展
  • Java到底能干嘛?
  • React Native移动开发实战-3-实现页面间的数据传递
  • STAR法则
  • UMLCHINA 首席专家潘加宇鼎力推荐
  • 阿里云爬虫风险管理产品商业化,为云端流量保驾护航
  • 程序员最讨厌的9句话,你可有补充?
  • 对象引论
  • 那些被忽略的 JavaScript 数组方法细节
  • 你不可错过的前端面试题(一)
  • 如何将自己的网站分享到QQ空间,微信,微博等等
  • 入门到放弃node系列之Hello Word篇
  • 适配mpvue平台的的微信小程序日历组件mpvue-calendar
  • Mac 上flink的安装与启动
  • shell使用lftp连接ftp和sftp,并可以指定私钥
  • ​ ​Redis(五)主从复制:主从模式介绍、配置、拓扑(一主一从结构、一主多从结构、树形主从结构)、原理(复制过程、​​​​​​​数据同步psync)、总结
  • ​Base64转换成图片,android studio build乱码,找不到okio.ByteString接腾讯人脸识别
  • (多级缓存)缓存同步
  • (翻译)Quartz官方教程——第一课:Quartz入门
  • (附源码)spring boot车辆管理系统 毕业设计 031034
  • (译)2019年前端性能优化清单 — 下篇
  • (转)PlayerPrefs在Windows下存到哪里去了?
  • .NET/C# 使用 ConditionalWeakTable 附加字段(CLR 版本的附加属性,也可用用来当作弱引用字典 WeakDictionary)
  • .NET中 MVC 工厂模式浅析
  • /dev/sda2 is mounted; will not make a filesystem here!
  • @hook扩展分析
  • [2023年]-hadoop面试真题(一)
  • [Android]一个简单使用Handler做Timer的例子
  • [bzoj2957]楼房重建
  • [CISCN2019 华北赛区 Day1 Web2]ikun
  • [C语言]编译和链接
  • [ExtJS5学习笔记]第三十节 sencha extjs 5表格gridpanel分组汇总
  • [Gradle] 在 Eclipse 下利用 gradle 构建系统
  • [IE技巧] 让IE 以全屏模式启动
  • [javaSE] GUI(Action事件)