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

news2024/10/6 20:33:56

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

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

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

一、前端依赖Nginx部署渲染

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

 缺点:

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

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

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

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

由后端完全渲染

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

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

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

优点:

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

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

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

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/610088.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

安装lora+启动lora+训练一个model

一、安装步骤 conda create -n kohya_ss python3.10.8 cd code git clone https://github.com/bmaltais/kohya_ss.git cd kohya_ss 然后修改了setup.sh里面的xformers里面的下载地址(因为自带的那个地址,拉取需要1个小时,太慢了)…

chatgpt赋能python:Python基础词汇解析

Python基础词汇解析 作为一门流行且易学的编程语言,Python在很多场合得到了广泛的应用。在学习Python编程的过程中,掌握各类基础词汇是非常关键的。本文将介绍Python编程中一些常见且重要的基础词汇,帮助大家更好地了解和掌握Python编程。 …

chatgpt赋能python:Python多级雷达图绘制解析

Python多级雷达图绘制解析 雷达图(Radar Chart)是一种可视化工具,常用于多个指标的对比展示。与其他图形不同,雷达图中,数据不是放在X、Y轴上,而是以多边形的形式展现。利用Python语言,可以绘制…

chatgpt赋能python:Python声音检测:如何用Python实现声音检测

Python声音检测:如何用Python实现声音检测 声音检测是近年来越来越受到关注的技术,它可以应用在很多场合,如语音识别、安防监控等。Python作为一种强大的编程语言,也可以实现声音检测功能。本文将介绍Python声音检测的原理、实现…

chatgpt赋能python:Python多选:提升代码效率的必备工具

Python 多选:提升代码效率的必备工具 如果你是一个有多年 Python 编程经验的工程师,那么你肯定会知道 Python 多选是一个非常实用的工具。它可以帮助你提高代码的效率,减少编程的时间和工作量。在本文中,我们将介绍 Python 多选的…

模拟实现 Spring IOC(详解)

文章目录 前言Spring IoCSpring IoC 概述Spring IoC 技术难点Spring IoC 框架思考需求分析 Spring IoC 技术难点实现Spring IoC 模拟实现Bean工厂模式实现Bean注解的循环依赖基础建立 前言 Spring是一种 Java 开发框架,其主要功能有两个:IoC(DI)和AOP。…

什么是高并发?

目录 什么是高井发系统 1.1 什么是高井发 1.2 高井发系统有哪些关键指标 1.2.1 响应时间 1.2.2 吞吐量 1.2.3 每秒请求数(QPS) 1.2.4 每秒事务数 (TPS) 1.2.5 访问量 (PV) 1.2.6 独立访客 (UV) 1.2.7 网络流量 1.3 为什么学习高并发系统 1.32在面试中脱颖而出 什么…

Android:Selector + Layer-lists + Shape 实现 “缺右下角Button“

UI需求:实现"缺右下角的渐变Button"效果 实现方式有两种: 一.UI绘制.9背景图,Selector直接实现 二.使用Shape与Selector、Layer-lists实现 UI给的设计稿里没有Button背景图,我用Shape做完了他告诉我他有做背景图&…

字符串搜索算法:暴力搜索,KMP

目录 前言废话暴力搜索KMP算法 前言废话 最近脑子有点昏昏沉沉,喝点那种红枣泡的白酒居然神奇的好了一些,感觉很舒服。看来喝少量的酒可以让人更清醒,长期喝可能有养生的效果? 写道这里去百度了下,发现红枣还真有养生效…

js中this关键字的作用和如何改变其上下文

一、this 关键字的作用 JavaScript 中的 this 关键字引用了所在函数正在被调用时的对象。在不同的上下文中,this 的指向会发生变化。 在全局上下文中,this 指向全局对象(在浏览器中是 window 对象,在 Node.js 中是 global 对象&…

CV | Emotionally Enhanced Talking Face Generation论文详解及代码实现

本博客主要讲解了Emotionally Enhanced Talking Face Generation(情感增强的谈话人脸生成)论文概括与项目实现,以及代码理解。 Emotionally Enhanced Talking Face Generation Paper :https://arxiv.org/pdf/2303.11548.pdf Code: GitHub - s…

ROS:服务数据(srv)的定义与使用

目录 一、服务模型二、创建功能包三、自定义服务数据3.1定义srv文件3.2在package.xml中添加功能包依赖3.3在CMakeLists.txt中添加编译选项3.4编译生成语言相关文件 四、创建代码并编译运行(C)4.1创建代码4.2编译4.3运行 一、服务模型 Client发布显示某个…

价值8800元SEO自动化养权重流量站课程分享(升级版)!

本来想做培训收8800,但是我怕大伙骂我(说我割韭菜),所以我决定免费把这套自动化批量养站的技术和流程详细给大家分享出来。有些朋友可能是手动养,我觉得这种思路是没错的,但是有点鸡肋,先说下缺…

电子科技大学计算机系统结构复习笔记(三):流水线技术

目录 前言 重点一览 流水线定义 基本概念 流水线分类 流水线特点 流水线时空图 流水线性能分析 流水线特点 经典5段流水线RISC处理器 流水线的三种冒险 冒险分类 停顿流水线 结构冒险 数据冒险 控制冒险 流水线处理机的指令系统 流水线指令系统与格式 流水…

nvm安装并配置环境变量使用nvm安装、切换nodejs

目录 第一章 准备工作 1.1 卸载nodejs 1.2 安装nvm 第二章 nvm环境配置 第三章 nodejs安装以及环境配置 3.1 会用nvm常用命令 3.2 nodejs安装 3.3 node环境配置 3.4 遇到的问题 第一章 准备工作 1.1 卸载nodejs 找到自己对应的nodejs文件所在路径 where node 通过控…

Python 异常类型捕获( try ... except 用法浅析)——Don‘t bare except (不要让 except 裸奔)

不要让 except 裸奔!裸奔很爽,但有隐忧。 (本笔记适合学完 Python 五大基本数据类型,有了些 Python 基础的 coder 翻阅) 【学习的细节是欢悦的历程】 Python 官网:https://www.python.org/ Free:大咖免费“圣经”教程…

大模型时代的来临:AI如何改变人类生活和经济?

大模型时代的来临:AI如何改变人类生活和经济? 第三次AI浪潮之下,人类面临着前所未有的机遇和挑战。随着人工智能的快速发展,我们开始高度重视其可能带来的负面影响。 最近,AI领域再次引起了全球范围内的关注&#xff0…

机器视觉_HALCON_图像采集接口编程手册_1.第一章节介绍

文章目录 一、前言二、图像采集接口编程第一章2.1 HALCON的通用图像采集接口2.2 图像采集基础2.3 同步抓取 vs. 异步抓取⭐2.4 缓冲策略⭐2.5 A/D转换和多路复用2.6 HALCON图像采集算子⭐2.6.1 open_framgrabber2.6.2 close_framegrabber2.6.3 info_framegrabber2.6.4 grab_ima…

chatgpt赋能python:Python均值函数介绍

Python均值函数介绍 Python是一种高级编程语言,非常适合数据处理和分析。在数据分析中,均值通常被用来代表一组数据的平均水平。Python提供了多种方式来计算均值,其中最常用的是使用均值函数来计算。 什么是均值函数? 均值函数…

高通 Camera HAL3:添加一个VendorTag

一.概述 MetadataTag在CamX中有两种体现,可以是预定义的AndroidTag或是自定义VendorTag VendorTag在HAL中定义,用来支持Camx和Chi所需的额外metadata VendorTag类型有三种: hwVendorTagInfocomponentvendortaginfocoreVendorTagInfo 根据不…