前后端分离的前端部署渲染方案总结

Qensq

已于 2023-09-26 18:58:04 修改

阅读量691

点赞数

文章标签：前端 javascript vue react java

于 2023-06-05 01:34:30 首次发布

本文链接：https://blog.csdn.net/Qensq/article/details/131039796

版权

文章介绍了前后端分离的意义，以及在Java环境下三种不同的部署方法：前端依赖Nginx部署、前端嵌入后端部署和前端独立部署。每种方法的优缺点被详细阐述，特别强调了前端独立部署能减少前端与后端的依赖，提高效率。

摘要由CSDN通过智能技术生成

前后端分离主要是为了区分后端和前端，以前前端代码是直接将HTML和静态文件丢给后端，由后端完成数据动态交互，所以后端既要写后端逻辑，又要写前端的数据交互逻辑。

前后端分离后后端只需要提供接口，前端则必须要完成对接口的调用和数据交互的处理。但是在部署上则是完全与之前不同，作为一个后端和前端都开发的人，我总结了三种前后端的部署方案

前言：讲解内容以java为例子，其他语言根据自身情况而定

一、前端依赖Nginx部署渲染

将前端编译后的dist 文件放入 nginx 的配置中，使用root引用

缺点：

1.前端人员需要学习nginx，前端对nginx不了解的话，没有这种部署思路开发，将会导致开发或者运维需要大量的时间调试。

2.涉及存在交叉引用时，开发如果不规范，将会引起各种路由异常

二、前端嵌入后端部署渲染

将前端编译后的dist 文件放入后端的resource文件下，与原先类似。

由后端完全渲染

缺点：每次修改前端代码后，需要部署的时候，需要后端重新打包编译部署

三、前端独立部署，后端侧载渲染

将前端编译后的dist 文件放入服务器的指定位置，再由后端渲染

优点：

1.前端可以独立部署，不依赖后端

2.前端与后端调试完成，不需要再nginx调试。nginx只需要代理好后端即可

3.不会因为nginx交叉引用导致路由异常

后端springboot 3.0 的thymeleaf渲染代码

配置方案：

spring:
  thymeleaf:
    prefix: 'file:/opt/javaApp/tuge/html/dist/'
    suffix: '.html'
    mode: HTML5
    servlet:
      content-type: text/html
    cache: false
    encoding: utf-8
  web:
    resources:
      static-locations: 'file:/opt/javaApp/tuge/html/dist/'
  mvc:
    servlet:
      load-on-startup: 100 #启动时初始化DispatcherServlet
    static-path-pattern: /**