Nginx处理Web项目前后端分离最佳实践

前言

最近有点关于前后端分离处理的心得,分享出来。从以下三个方面来分析前后端分离:

  • 什么是前后端分离
  • 为什么要前后端分离
  • 怎样实现前后端分离

以上三点基本解决了我们实际开发中前后端分离的所有问题。

什么是前后端分离,为什么要实现前后端分离?

资深老 web 和我闲聊,别看现在前端开发工程师如日中天,就是几年前还没前端开发这岗位,所有的事情都需要后台来搞,前端静态页面、中间 Java 代码、后台数据库处理,后台工作量任务繁重。慢慢大家对网站的审美、体验要求提高,才出现前端开发,前端静态页面代码都交予前端开发,后台也能专心自己的 Java 工作,专注于代码的优化、并发的处理。

当然上面扯远了。从工作分配上看,前后端分离是指前后端代码各自有专业的人负责。但是在实际开发中就涉及到两个问题。

  • 代码管理
  • Ajax 跨域

我们知道Ajax是不能跨域请求的。简单来说Ajax请求的url只能是个相对路径,而不能像http一样的绝对路径。 这就要求我们将前端静态页面复制拷贝到web项目下,Ajax才能发送请求。

但是项目是由一个团队负责的,前端人员提交的代码不可能提交到我们 web 项目下,如果前端代码更新了,我们不可能每次都去复制拷贝一次,所以这就要求我们能够前后端分离。

希望通过一系列处理,最终能达到的效果:前端团队代码提交到自己对应的位置不用管,而后台通过处理,在项目运行时Ajax请求能发挥作用。

怎样实现前后端分离?

如果我们去网上搜,估计能搜出一大堆解决办法。最常见的应该是JSONP,老 web 和我说当年他也是这样处理的。

但是现在使用代理方式解决较多,如下:

  • 前端Ajax请求地址是本机地址
  • 本地地址监控到请求后向实际接口请求数据,然后再将数据返回前端

现在比较多的 Node.js就是这,但是我们可以用更加方便的反向代理解决跨域问题。

步骤

关于Nginx的使用,我的理解是,简单的使用比较简单,功能复杂的配置却比较难。这里我拿本地的环境来测试下吧,生成环境是一样的,毕竟Nginx最重要的就是conf的配置,而它在 Window 和 Linux 是一样的。

1.下载 window nginx

下载地址

2.准备好相关资源。静态页面、解压Nginx、web项目

《Nginx处理Web项目前后端分离最佳实践》

《Nginx处理Web项目前后端分离最佳实践》

3.配置conf

		location / {
                root   E:/workspace/web/ksd-guangfu/; #html访问路径
                index  login.html; #html文件名称
            }	

对比如上我的静态页面地址路径

再配置代理,特别要注意反向代理只会代理 ip+port这一串,接口后面的并不影响,如下举例:

http://127.0.0.1:80/test

通过配置转发后,只会反向代理其他服务器和端口,如下

http://10.2.9.49:8080/test

当然,除非在里面使用正则表达式重写请求字符串地址

现在拿真实例子测试下。

《Nginx处理Web项目前后端分离最佳实践》

这里我监听本地的 80 端口,在加上前面配置的静态页面地址,当在浏览器输入

http://localhost:80

会跳转到前面配置的 login.html

再看Ajax请求地址

《Nginx处理Web项目前后端分离最佳实践》

       location /kstar_api/ { 
                proxy_pass http://localhost:8080;        #代理地址 --服务器接口域名 这里写你的后端服务ip+端口
        }

location 后面使用了kstar_api匹配,因为我实在本地测试,web项目运行在本地 8080 端口,所以这里直接代理到

http://localhost:8080

然后因为我的本地 Java代码的路径也是/kstar_api/system/login ,所以后面并不需要作处理。

特别要注意,复杂的匹配特别复杂。但是里面的规则都是和正则表达式一样,这里贴一篇常见配置

nginx 配置 location 总结及 rewrite 规则写法

同时关于Nginx在window下使用命令常见如下:

cmd进入控制台,切换到Nginx安装目录下

  • 启动

start nginx

  • 停止

nginx.exe -s stop

  • 重新加载配置文件

nginx.exe -s reload

怎么说呢?不管有用没,还是想加上这句
老郭原创,转载请加上Nginx处理Web项目前后端分离最佳实践
点赞

发表评论

电子邮件地址不会被公开。 必填项已用*标注