前后端在服务器上常见的几种部署方式

敲TAB键的前端小白
412 阅读4分钟

起因

实习期快结束了，准备转正啦，在一个现场项目中发现一个问题: 前后端代码明明是一体化部署,但是前端配置文件中竟然使用了一个httpPort的配置项

//配置文件 prodctionConfig.js
window.productConfig = {
  productName: 'xxx管理平台',
  httpPort: '8080',
  httpsPort: '8443',
 }

http的baseURL是通过读取配置项去发送网络请求的

//http.js
const prodBaseURL = `${location.protocol}//${location.hostname}:${location.protocol === 'http:' ? productCfg.httpPort : productCfg.httpsPort}`;

axios.defaults.baseURL = process.env.NODE_ENV === 'development' ? '/api/' : prodBaseURL;

看上面的代码可以发现，前后端代码是一体化部署，为什么还要这么麻烦，直接用/或者读取本地浏览器的端口不就好了吗（修改后重新打包部署之后发现是没有问题的）

~

前后端在服务器上常见的几种部署方式

前后端一体化部署(传统方式)

前后端一体化部署的特点：

    -前端打包后的静态资源文件和后端服务器运行在同一个服务器的同一个端口中
    -前端请求API时使用相对路径(如果/api/xxx),会自动拼接服务器的协议IP和端口后面

部署结构

服务器 (IP: 192.168.1.100, Port: 8080)
├── 静态文件 (HTML, CSS, JS)
└── 后端 API 服务

前端配置示例

请求前后端的端口一致
这种情况是指，前端和后端运行在同一个服务进程中，通过同一端口提供服务,然后前端用请求的前缀 “/api” 去标识网络请求,浏览器地址的url和发送请求的url的IP端口都是一致的

// axios 配置
const api = axios.create({
 baseURL: '/api',  // 相对路径,用来标识这个是一个请求，而不是一个静态资源请求，也可以避免前后端的路由冲突
});

// 请求示例
api.get('/users');  // 实际请求: http://192.168.1.100:8080/api/users

前后端分离部署

前后端分离部署的特点

 -需要启动不同的服务器：前端服务器，后端服务器
 -需要涉及到两个不同的端口
 -需要处理跨域的问题

分离部署的工作流程

前端通过nginx服务器提供服务

用户在浏览器输入: http://example.com:80
↓
Nginx服务器(80端口) 返回 index.html、CSS、JS等静态文件

页面中的API请求发送到后端服务器中

axios.get('http://example.com:8080/api/user/list')
↓
请求发送到 Tomcat服务器(8080端口) 处理业务逻辑

也就是说 浏览器输入的地址只是访问前端的服务，但是请求后端的地址还需要在前端中进行配置(具体配置需要与后端协调，拿到协议，IP地址和端口)

很明显，在前后端一体化部署的时候，因为端口是一致的，我们需要使用到/api来区分请求和静态文件，但是在分离部署的时候，因为端口(请求地址)不同,可以很好的区分请求的是静态资源还是网络请求，因此完全不需要使用/api来作区分

但是在前端开发环境中，处理跨域问题，需要使用到代理服务器，仍需要使用到/api做反向代理，因为代理服务器启动时会将静态资源加载进去
例如：
    http://localhost:3000/index.html
    此时这些东西存在前端服务器，会直接返回这些文件，后端无需参与
    假设代理配置为 “转发所有请求至后端”，则前端静态资源请求（如`/static/css/style.css`）会被发送到后端,由于后端通常不存储前端静态文件，会返回`404 Not Found`，导致页面样式、脚本加载失败。

微前端部署

将前端应用拆分为多个独立子应用（微前端），每个子应用可独立开发、部署，最终在主应用中集成。

实现方式

框架支持（如 Single-SPA、qiankun、Module Federation）
主应用负责路由和子应用加载，子应用（如 React、Vue 模块）独立构建并部署在不同域名或路径下
主应用通过`import map`配置子应用地址，运行时动态加载子应用的 JS bundle

部署模式

每个子应用作为独立前端项目部署（如 Nginx 分别配置不同路径的服务），主应用统一管理入口

特点

 -前端可按业务模块拆分（如电商项目的商品、订单、用户模块），团队可并行开发
 -子应用可独立更新，无需重启整个前端服务，运维灵活性高
 -支持技术栈混合（如部分模块用 React，部分用 Vue）
 -架构复杂度高，需处理子应用间的状态共享、样式隔离等问题
 -次加载可能需要请求多个子应用资源，影响性能（需优化资源懒加载）
avatar
文章
阅读
粉丝