请选择 进入手机版 | 继续访问电脑版
 找回密码
 立即注册

QQ登录

只需要一步,快速开始

搜索
开启左侧

Nginx实现动静分离

马上注册,分享更多源码,享用更多功能,让你轻松玩转云大陆。

您需要 登录 才可以下载或查看,没有帐号?立即注册

x
本文利用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赋值,代码如下所示。
Nginx实现动静分离-1.jpg 项目结构如下所示,可以看到没有jquery.js,我们要做的就是使用Nginx来访问jquery.js。
Nginx实现动静分离-2.jpg

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/,可以看到如下图所示。
Nginx实现动静分离-3.jpg

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


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


作者:dalaoyang
来源:慕课网
本文首次发布于慕课网 ,转载请注明出处,谢谢合作
回复

使用道具 举报

您需要登录后才可以回帖 登录 | 立即注册

  • 0 关注
  • 0 粉丝
  • 5 帖子
广告招商