当前位置：首页 > news >正文

关于 Spring Boot + Vue 前后端开发的打包、测试、监控、预先编译和容器部署的详细说明，涵盖从开发到生产部署的全流程

news 来源：原创 2025/9/16 5:56:57

以下是关于 Spring Boot + Vue 前后端开发的打包、测试、监控、预先编译和容器部署 的详细说明，涵盖从开发到生产部署的全流程：

1. 打包

1.1 后端（Spring Boot）

打包方式

使用 Maven 或 Gradle 打包成可执行的 JAR/WAR 文件：

<!-- pom.xml 配置 Spring Boot Maven 插件 -->
<build><plugins><plugin><groupId>org.springframework.boot</groupId><artifactId>spring-boot-maven-plugin</artifactId></plugin></plugins>
</build>

执行命令：

mvn clean package  # 生成 target/*.jar 文件

Docker 包装

创建 Dockerfile：

# 使用官方 JDK 基础镜像
FROM openjdk:8-jdk-alpine
# 复制构建好的 JAR 包
COPY target/*.jar app.jar
# 暴露端口
EXPOSE 8080
# 运行命令
ENTRYPOINT ["java", "-jar", "app.jar"]

1.2 前端（Vue）

打包配置

使用 Vue CLI 的 build 命令生成静态资源：

npm run build  # 生成 dist/ 目录

Vue 配置示例（vue.config.js）

module.exports = {// 指定输出目录outputDir: 'dist',// 静态资源公共路径（用于部署到子路径）publicPath: process.env.NODE_ENV === 'production' ? '/vue/' : '/',// 配置代理解决开发环境跨域devServer: {proxy: {'/api': {target: 'http://localhost:8080',changeOrigin: true,pathRewrite: { '^/api': '' }}}}
};

2. 测试

2.1 后端测试

单元测试（JUnit + Mockito）

@SpringBootTest
class UserControllerTest {@Autowiredprivate UserController userController;@MockBeanprivate UserService userService;@Testvoid testGetUser() {// 模拟 UserService 的返回值when(userService.getUser(1L)).thenReturn(new User(1L, "John"));// 调用 Controller 方法ResponseEntity<User> response = userController.getUser(1L);// 断言结果assertEquals("John", response.getBody().getName());}
}

集成测试（SpringBootTest）

@RunWith(SpringRunner.class)
@SpringBootTest(webEnvironment = SpringBootTest.WebEnvironment.RANDOM_PORT)
public class ApplicationTests {@Autowiredprivate TestRestTemplate restTemplate;@Testpublic void testHealthCheck() {ResponseEntity<String> response = restTemplate.getForEntity("/health", String.class);assertEquals(200, response.getStatusCodeValue());}
}

性能测试（JMeter）

使用 JMeter 脚本模拟高并发请求，测试接口响应时间。
配置线程组、HTTP 请求、断言和监听器（如聚合报告）。

2.2 前端测试

单元测试（Jest）

// user.test.js
import { getUser } from './user';test('getUser should return user data', () => {expect(getUser(1)).toEqual({ id: 1, name: 'Alice' });
});

E2E 测试（Cypress）

// cypress/integration/example_spec.js
describe('访问首页', () => {it('加载首页并验证标题', () => {cy.visit('/');cy.get('h1').contains('欢迎来到 Vue 应用');});
});

静态代码分析（ESLint）

在 package.json 中配置：

{"eslintConfig": {"extends": ["plugin:vue/vue3-essential","eslint:recommended"]}
}

3. 监控

3.1 后端监控

Spring Boot Actuator

依赖配置：

<dependency><groupId>org.springframework.boot</groupId><artifactId>spring-boot-starter-actuator</artifactId>
</dependency>

配置 application.yml：

management:endpoints:web:exposure:include: "health,info,metrics"

常用端点：
- /actuator/health：健康检查。
- /actuator/metrics：性能指标（如内存、CPU、HTTP 请求耗时）。

Prometheus + Grafana

集成 Prometheus：
添加依赖：

<dependency><groupId>io.micrometer</groupId><artifactId>micrometer-registry-prometheus</artifactId>
</dependency>

访问 /actuator/prometheus 获取指标数据。

Grafana 配置：通过 Prometheus 数据源创建仪表盘。

日志监控（ELK Stack）

日志配置（Logback）：

<configuration><appender name="LOGSTASH" class="net.logstash.logback.appender.LogstashTcpSocketAppender"><destination>localhost:4560</destination></appender><root level="INFO"><appender-ref ref="LOGSTASH" /></root>
</configuration>

3.2 前端监控

错误跟踪（Sentry）

Vue 插件配置：

import * as Sentry from '@sentry/vue';Sentry.init({dsn: 'https://your-dsn@o123.ingest.sentry.io/456',integrations: [new Sentry.BrowserTracing(),new Sentry.Vue({ Vue })],
});

性能监控（APM）

使用 New Relic 或 Datadog 的前端 SDK 监控页面加载时间、API 响应时间。

4. 预先编译

4.1 后端预编译

Maven 编译阶段：
```
mvn compile  # 仅编译 Java 代码
```
构建缓存：利用 Maven 的 ~/.m2/repository 缓存依赖，减少重复下载。

4.2 前端预编译

Webpack 配置优化

代码分割（Code Splitting）：

// vue.config.js
chainWebpack(config) {config.optimization.splitChunks({chunks: 'all',minSize: 30000,minChunks: 1,maxAsyncRequests: 5,maxInitialRequests: 3,automaticNameDelimiter: '~',name: true,cacheGroups: {vendors: {test: /[\\/]node_modules[\\/]/,priority: -10},default: {minChunks: 2,priority: -20,reuseExistingChunk: true}}});
}

Tree Shaking：通过 ES6 模块化自动删除未使用的代码。

环境变量管理：

# .env.development
VUE_APP_API_URL=http://localhost:8080/api

5. 容器部署

5.1 Docker 部署

Dockerfile（后端）

# 基础镜像
FROM openjdk:8-jdk-alpine
# 设置工作目录
WORKDIR /app
# 复制构建好的 JAR 包
COPY target/*.jar app.jar
# 暴露端口
EXPOSE 8080
# 启动命令
CMD ["java", "-jar", "app.jar"]

Dockerfile（前端）

# 使用 Nginx 作为静态资源服务器
FROM nginx:alpine
# 复制 Vue 打包后的 dist 目录到 Nginx 默认目录
COPY dist/ /usr/share/nginx/html/
# 暴露端口
EXPOSE 80

Docker Compose（多服务部署）

version: '3'
services:backend:build: ./spring-bootports:- "8080:8080"environment:SPRING_PROFILES_ACTIVE: prodfrontend:build: ./vueports:- "80:80"

5.2 Kubernetes 部署

部署 YAML 文件

# 后端 Deployment
apiVersion: apps/v1
kind: Deployment
metadata:name: spring-boot-deploy
spec:replicas: 3selector:matchLabels:app: spring-boottemplate:metadata:labels:app: spring-bootspec:containers:- name: spring-bootimage: your-registry/spring-boot:latestports:- containerPort: 8080
---
# 前端 Deployment
apiVersion: apps/v1
kind: Deployment
metadata:name: vue-deploy
spec:replicas: 2selector:matchLabels:app: vuetemplate:metadata:labels:app: vuespec:containers:- name: vueimage: your-registry/vue:latestports:- containerPort: 80
---
# 服务（Service）
apiVersion: v1
kind: Service
metadata:name: spring-boot-service
spec:selector:app: spring-bootports:- protocol: TCPport: 8080targetPort: 8080
---
apiVersion: v1
kind: Service
metadata:name: vue-service
spec:selector:app: vueports:- protocol: TCPport: 80targetPort: 80
---
# Ingress（路由配置）
apiVersion: networking.k8s.io/v1
kind: Ingress
metadata:name: ingress-service
spec:rules:- http:paths:- path: /pathType: Prefixbackend:service:name: vue-serviceport:number: 80- path: /apipathType: Prefixbackend:service:name: spring-boot-serviceport:number: 8080

5.3 CI/CD 流水线（GitHub Actions）

示例工作流（.github/workflows/ci-cd.yml）

name: CI/CD Pipelineon:push:branches: [ main ]jobs:build-backend:runs-on: ubuntu-lateststeps:- uses: actions/checkout@v2- name: Set up JDK 11uses: actions/setup-java@v2with:java-version: '11'distribution: 'adopt'- name: Build with Mavenrun: mvn clean package -DskipTestsbuild-frontend:runs-on: ubuntu-lateststeps:- uses: actions/checkout@v2- name: Install Node.jsuses: actions/setup-node@v3with:node-version: '16'- name: Install dependenciesrun: npm install- name: Build Vuerun: npm run builddeploy:needs: [build-backend, build-frontend]runs-on: ubuntu-lateststeps:- name: Push Docker Imagesuses: docker/build-push-action@v3with:context: ./spring-bootpush: truetags: registry.example.com/spring-boot:latestenv:REGISTRY_USER: ${{ secrets.REGISTRY_USER }}REGISTRY_PASSWORD: ${{ secrets.REGISTRY_PASSWORD }}- name: Deploy to Kubernetesrun: |kubectl apply -f k8s/deployment.yamlkubectl rollout status deployment/spring-boot-deploykubectl apply -f k8s/frontend-deployment.yamlkubectl rollout status deployment/vue-deploy

6. 总结

打包：后端用 Maven/Gradle，前端用 Vue CLI，生成可部署的 JAR 和静态资源。
测试：后端用 JUnit + Mock，前端用 Jest + Cypress。
监控：后端用 Actuator + Prometheus/Grafana，前端用 Sentry + APM。
编译优化：代码分割、Tree Shaking、环境变量管理。
部署：Docker 包装 + Kubernetes 部署，结合 CI/CD 实现自动化流水线。

通过以上步骤，可以高效地完成前后端分离应用的开发、测试、监控和部署。

关于 Spring Boot + Vue 前后端开发的打包、测试、监控、预先编译和容器部署的详细说明，涵盖从开发到生产部署的全流程

以下是关于 Spring Boot Vue 前后端开发的打包、测试、监控、预先编译和容器部署的详细说明，涵盖从开发到生产部署的全流程： 1. 打包 1.1 后端（Spring Boot） 打包方式使用 Maven 或 Gradle 打包成可执行的 JAR/WAR 文件&…...

编程日记 2025/9/16 5:56:57

【Raqote】 1.1 路径填充ShaderMaskBlitter 结构体（blitter.rs）

ShaderMaskBlitter 结构体实现了 Blitter trait，用于带遮罩的着色器渲染。结构体定义 pub struct ShaderMaskBlitter<a> {pub x: i32, // 目标区域的起始x坐标pub y: i32, // 目标区域的起始y坐标pub shader: &a dyn Shader, //…...

编程日记 2025/9/14 4:00:05

如何用 esProc 实现 Oracle 和 MySQL 的混合运算

逻辑数仓可以实现多源混算，但需要配置视图、预处理数据，结构太沉重。duckdb 是轻量级的方案，但没有内置 Oracle 的 connector，自己开发难度又太高。同为轻量级方案，esProc 支持 JDBC 公共接口，可以实现任何…...

编程日记 2025/9/8 15:50:30

zabbix和prometheus选择那个监控呢

文章目录 Zabbix 介绍概述架构组成特点适用场景 Prometheus 介绍概述架构组成特点适用场景 Zabbix vs Prometheus 对比架构与组件Zabbix 架构Prometheus 架构监控要点与最佳实践告警与可视化ZabbixPrometheus Alertmanager Grafana 伸缩与高可用ZabbixPrometheus 运维成本与…...

编程日记 2025/9/17 5:38:22

SQL 查询中使用 IN 导致性能问题的解决方法

当 SQL 查询中使用 IN 子句导致查询长时间运行或挂起时，通常是由于以下几个原因造成的： 常见原因 IN 列表中的值过多 - 当 IN 子句包含大量值时（如数千或更多），数据库需要处理大量比较操作缺乏合适的索引 - 被查询的…...

编程日记 2025/9/17 5:36:50

UML-饮料自助销售系统（无法找零）序列图

一、题目： 在饮料自动销售系统中，顾客选择想要的饮料。系统提示需要投入的金额，顾客从机器的前端钱币口投入钱币，钱币到达钱币记录仪，记录仪更新自己的选择。正常时记录仪通知分配器分发饮料到机器前端，但可…...

编程日记 2025/9/12 17:41:55

Go语言中的runtime包是用来做什么的？

在Go语言中，runtime包提供了与Go运行时系统的交互接口。以下是runtime包的主要功能和用途： 1. 运行时信息 runtime包可以获取关于Go程序运行时的信息，包括： 内存使用情况：可以查看内存分配和使用的统计信息&#xf…...

编程日记 2025/9/17 5:38:22

【Linux】用C++实现UDP通信：详解socket编程流程

文章目录协议（Protocol）协议的核心要素常见协议分类 UDP协议（用户数据报协议）1. 基本定义2. 核心特性 UDP协议实现通信服务器端Comm.hppInetAddr.hppUdpServer.hppUdpServer.cc 客户端总结协议（Protocol&#xff09…...

编程日记 2025/9/17 5:39:11

代码随想录-06-二叉树-02.二叉树的递归遍历

二叉树的递归遍历递归思路确定递归函数的参数parameter和返回值确定终止条件确定单层递归逻辑具体代码 CPP 前序遍历 vector<int> res; void traversal(TreeNode *root){if(!root)return;res.push_back(root->val);traversal(root->left);traversal(root-…...

编程日记 2025/9/17 5:39:10

一文详解ffmpeg环境搭建：Ubuntu系统ffmpeg配置nvidia硬件加速

在Ubuntu系统下安装FFmpeg有多种方式，其中最常用的是通过apt-get命令和源码编译安装。本文将分别介绍这两种方式，并提供安装过程。一、apt-get安装使用apt-get命令安装FFmpeg是最简单快捷的方式，只需要在终端中输入以下命令即可： # 更新软件包列表 sudo apt-get updat…...

编程日记 2025/9/17 5:36:49

（四）深入理解AVFoundation-播放：高度自定义视频播放器 UI

引言在之前的博客中，我们已经介绍了如何实现一个简单的播放器，并通过监听资源和播放器的属性来提升播放体验。因此本篇博客将带你进一步自定义播放器 UI。通过构建自己的播放控制界面（如播放/暂停按钮、进度条、全屏切换等）&…...

编程日记 2025/9/17 5:36:49

sqli-labs靶场 less6

文章目录 sqli-labs靶场less 6 报错注入 sqli-labs靶场每道题都从以下模板讲解，并且每个步骤都有图片，清晰明了，便于复盘。 sql注入的基本步骤注入点注入类型字符型：判断闭合方式 （‘、"、’、“”&#xf…...

编程日记 2025/9/17 5:36:50

数据库架构全解析：MyCat、MHA、ProxySQL 的原理、功能与实例

前言 ： 在分布式数据库架构中，分库分表、高可用性（HA）和查询优化是核心需求。本文将深入解析三款主流工具：MyCat（分布式数据库中间件）、MHA（MySQL高可用方案）、ProxySQL…...

编程日记 2025/9/12 7:08:10

【hadoop】Hive数据仓库安装部署

一、MySQL的安装与配置换源： 最下面附加部分 1、在master上直接使用yum命令在线安装MySQL数据库： sudo yum install mysql-server 途中会询问是否继续，输入Y并按回车。 2、启动MySQL服务： sudo service mysqld start 3、设…...

编程日记 2025/9/11 15:35:08

Unity Addressables资源生命周期自动化监控技术详解

一、Addressables资源生命周期管理痛点 1. 常见资源泄漏场景泄漏类型典型表现检测难度隐式引用泄漏脚本持有AssetReference未释放高异步操作未处理AsyncOperationHandle未释放中循环依赖泄漏资源相互引用无法释放极高事件订阅泄漏未取消事件监听导致对象保留高 2. 传统管理…...

编程日记 2025/9/15 4:46:26

Linux网络编程——深入理解TCP的可靠性、滑动窗口、流量控制、拥塞控制

目录一、前言二、流量控制三、TCP的滑动窗口 1、原理 2、机制 3、数据重发 Ⅰ、只是确认应答包(ACK)丢了 Ⅱ、发送数据包丢失 4、缓冲区结构四、TCP的拥塞控制 1、慢启动 2、拥塞避免 3、快速重传 4、快速恢复五、延迟应答六、捎带应答七、再谈TCP的面…...

编程日记 2025/9/10 22:26:15

Manifold-IJ 2022.1.21 版本解析：IntelliJ IDEA 的 Java 增强插件指南

Manifold-IJ-2022.1.21 可能是 IntelliJ IDEA 的一个插件或相关版本，特别是与 Manifold 这个增强 Java 开发体验的框架相关的组件。很多时候没有网络环境，而又需要这个插件。 Manifold-IJ 2022.1.21下载：https://pan.quark.cn/s/ad907344c…...

编程日记 2025/9/10 0:46:27

linux内核

一初识linux内核 1.1操作系统和内核简介操作系统的精确定义并没有一个统一的标准，这里我认为操作系统是指整个系统负责完成最基本功能和系统管理的那些部分这些部分包括内核，设备驱动程序，启动引导程序，基本的文件管理工具和…...

编程日记 2025/9/12 3:24:21

基于CNN-LSTM-GRU的深度Q网络（Deep Q-Network，DQN）求解移动机器人路径规划，MATLAB代码

一、深度Q网络（Deep Q-Network，DQN）介绍 1、背景与动机深度Q网络（DQN）是深度强化学习领域的里程碑算法，由DeepMind于2013年提出。它首次在 Atari 2600 游戏上实现了超越人类的表现，解决了传统…...

编程日记 2025/9/10 4:22:24

C++23新特性：显式对象形参与显式对象成员函数

文章目录一、背景与动机二、语法与基本使用三、优势与应用场景（一）简化代码（二）提升模板编程灵活性（三）与Lambda表达式结合四、限制与注意事项五、总结 C23标准引入了一项重要的语言特性——显式对象形参…...

编程日记 2025/9/10 18:00:05

leetcode_242. 有效的字母异位词_java

242. 有效的字母异位词https://leetcode.cn/problems/valid-anagram/ 1、题目给定两个字符串 s 和 t ，编写一个函数来判断 t 是否是 s 的字母异位词（字母异位词是通过重新排列不同单词或短语的字母而形成的单词或短语，并使用所有原字母一次…...

编程日记 2025/9/11 19:42:24

【Docker基础】容器技术详解：生命周期、命令与实战案例

文章目录一、什么是容器？二、为什么需要容器三、容器的生命周期容器状态容器OOM容器异常退出容器异常退出容器暂停四、容器命令命令清单详细介绍五、容器操作案例容器的状态迁移容器批量操作容器交互模式attached 模式detached 模式interactive 模式容器与宿主…...

编程日记 2025/9/10 6:35:40

电子电气架构 --- 为配备区域计算的下一代电子/电气（E/E）架构

我是穿拖鞋的汉子，魔都中坚持长期主义的汽车电子工程师。老规矩，分享一段喜欢的文字，避免自己成为高知识低文化的工程师：周末洗了一个澡，换了一身衣服，出了门却不知道去哪儿，不知道去找谁，漫无目的走着，大概这就是成年人最深的孤独吧! 旧人不知我近况，新人不知我过…...

编程日记 2025/9/11 18:29:27

n int(input()) for _ in range(n):line input().strip()line list(line)for i in range(1,len(line)1):if i%2 0:line[i-2], line[i-1] line[i-1],line[i-2] print(.join(line))以下分不同数据类型说明 Python 实现奇偶互换的方法： 字符串的奇偶位互换若字…...

编程日记 2025/9/12 13:28:03

51单片机Day03---让一个LED灯闪烁

目录 1.研究原理图： 2.一些小知识（重定义的使用）： （1）在单片机中，unsigned int 常用于以下场景： （2）unsigned char： 3.思路构造：…...

编程日记 2025/9/10 12:52:32

城电科技 | 从概念到落地：如何打造真正的智慧零碳园区？

在科技飞速发展的当下，智慧零碳园区成为了引领未来发展的重要范式。那么，究竟什么是智慧零碳园区呢？ 智慧零碳园区，是借助前沿信息技术，把物联网、云计算、大数据等技术深度融入园区管理及产业运营，以此达…...

编程日记 2025/9/14 1:05:39

oracle常见问题处理集锦

oracle常见问题处理集锦 oracle常见问题处理集锦ORA:28000 the count is locked oracle常见问题处理集锦 ORA:28000 the count is locked ORA-28000: 账户已被锁定这个错误表示你尝试登录的 Oracle 数据库用户账户已被锁定，常见原因包括： 多次密码输错…...

编程日记 2025/9/11 10:26:51

Java-JDBC入门程序、预编译SQL

一. JDBC JDBC：Java DataBase Connectivity 就是使用Java语言操作关系型数据库的一套API 本质：sun公司官方定义一套操作所有关系型数据库的规范，即接口；各个数据库厂商去实现这套接口，提供数据库驱动jar包。我们可以使…...

编程日记 2025/9/11 6:41:47

【SQL】基于多源SQL 去重方法对比 -- 精华版

【SQL】基于SQL 去重方法对比 -- 精华版一、引言二、基于SQL去重方法完整对比1. MySQL去重方法及优劣势1.1 DISTINCT关键字1.2 GROUP BY子句1.3 UNION系列操作1.4 子查询自关联 2. Hive去重方法及优劣势2.1 DISTINCT关键字2.2 GROUP BY子句2.3 ROW_NUMBER窗口函数2.4 …...

编程日记 2025/9/15 16:35:50

list的使用以及模拟实现

本章目标 1.list的使用 2.list的模拟实现 1.list的使用在stl中list是一个链表,并且是一个双向带头循环链表,这种结构的链表是最优结构. 因为它的实现上也是一块线性空间,它的使用上是与string和vector类似的.但相对的因为底层物理结构上它并不像vector是线性连续的,它并没有…...

编程日记 2025/9/16 15:17:12

java继承练习

//创建父类public class Employee {private String id;private String name;private double salary;public Employee() {}public Employee(String id, String name, double salary) {this.id id;this.name name;this.salary salary;}public String getId() {return id;}pu…...

编程日记 2025/9/15 4:27:41