利用Nginx实现前后端的分离

傷城~ 2022-02-24 15:06 1290阅读 0赞

首先实现 前后端的分离是指在代码层次上进行分离：代码是作为两个完全不同的项目工程进行分配完成的；

其次是指在部署实行的时候进行服务器的分离：前端代码作为一个访问比较频繁的静态资源放置在Nginx服务器中，增加访问的速度；而java的运行代码则部署在后台的实际服务器上（Tomcat）。

tips：关键在于一个“跨域”的问题上，在后台的代码快上需要增加一个“**@CrossOrigin**”

（默认情况下，@CrossOrigin允许在@RequestMapping注解中指定的所有源和HTTP方法）：

其中@CrossOrigin中的2个参数：

origins  ： 允许可访问的域列表

maxAge：准备响应前的缓存持续的最大时间（以秒为单位）。

@CrossOrigin(origins = "http://domain2.com", maxAge = 3600)

这个时候前台进行访问后台的时候是通过ajax技术，ajax的访问地址必须是全地址，后台代码则是在服务器（Tomcat）上运行一个war包。

基本上就是这样子的一个结构，还有许多细节性的东西需要补充和思考。

一、**@CrossOrigin的作用**

在前后端分离部署的过程中有个重要的问题就是，不同端口之间资源是不通用的。这个时候这个注解就发挥作用了，这个注解就是允许其他端口的请求连接这个资源，默认情况下是允许所有的请求的，也可以进行限制。

**这个注解需要放在controller层。**

二、前端为什么部署在Nginx上

因为Nginx，Apache 服务器只能进行静态资源的访问，而Tomcat则可以进行动态资源的访问。

三、Linux中部署两或者两个以上的Tomcat服务器

[Linux下部署多个Tomcat][Linux_Tomcat]

四、静态资源放置的位置

静态资源放置的位置需要在Nginx的配置文件中进行修改，静态资源路径

server
    
      {
    
        listen 80;#监听端口
    
        server_name localhost;#域名
    
        index index.html index.htm index.php;
    
        root /usr/local/webserver/nginx/html;#站点目录  这个位置就是静态资源的地址
    
          location ~ .*\.(php|php5)?$         #这部分是为了通过正则表达式过滤指定的文件
    
        {
    
          #fastcgi_pass unix:/tmp/php-cgi.sock;
    
          fastcgi_pass 127.0.0.1:9000;
    
          fastcgi_index index.php;
    
          include fastcgi.conf;
    
        }
    
        location ~ .*\.(gif|jpg|jpeg|png|bmp|swf|ico)$
    
        {
    
          expires 30d;
    
      # access_log off;
    
        }
    
        location ~ .*\.(js|css)?$
    
        {
    
          expires 15d;
    
       # access_log off;
    
        }
    
        access_log off;
    
      }

五、利用docker实现多服务器部署

首先部署多个服务器在docker上；

将java文件部署到服务器Tomcat上；

将静态文件部署在Nginx的路径下；

对服务器实现反向代理，并进行负载均衡配置；

访问Nginx地址下的文件即可。

[Linux_Tomcat]: https://app.yinxiang.com/shard/s39/nl/9452315/01d5afe8-dfed-4704-9db9-435f09b4343c