Vite+Vue3+SpringBoot项目如何打包部署

Vue+SpringBoot项目如何打包部署

Springboot后端打包

这里我以jar包的方式进行打包
1、我们需要在Pom.XML文件里面确保有maven的依赖：

  <build>
        <plugins>
            <plugin>
                <groupId>org.springframework.boot</groupId>
                <artifactId>spring-boot-maven-plugin</artifactId>
            </plugin>
        </plugins>
    </build>

通过这个插件我们可以将项目打包成一个可运行的jar文件，无需在tomact服务器上面运行

IDEA默认的打包方式是repackage，通过Spring-boot-maven-plugin插件我们可以将项目打包成两个在target目录下的文件：一个是以jar为后缀，另一个是以.jar.original为后缀

.jar文件：是可执行jar包，包含了pom中的所有依赖，可以直接用java -jar 命令执行
.jar.original文件：是普通jar包，不包含依赖。这是Maven在Spring Boot重新打包之前创建的原始jar文件。（只包含少量用户的类，不包含依赖）

在项目部署的时候我们使用jar包，如果是给别的项目用我们需要使用**.jar.original** 这个包
以下是具体的打包步骤：

看到SUCCESS则说明我们已经打包成功

在项目目录我们可以发现多了一个target的目录，可以里面包含了 .jar和.jar.original的两个包

如果需要重新打包，我们则可以双击clean，清除target目录，再次点击package进行打包

部署运行jar包

项目打包完成后，我们可以使用终端进入target路径，在我们本地的终端上运行我们的jar包
执行命令：

java -jar springboot-0.0.1-SNAPSHOT.jar

项目不报错，则说明我们的项目已经部署成功，可以正常使用对应的路径进行访问对应的接口。

前端打包

🚀在学习vite+vue3打包之前我们需要了解Nginx

🎆 Nginx

Nginx 是一个高性能的 HTTP 和反向代理服务器，也是一个 IMAP/POP3/SMTP 代理服务器。它以其高稳定性、丰富的功能集、便捷的配置以及对高负载的良好支持而闻名。Nginx 被广泛用于托管网站、实现负载均衡以及作为反向代理来缓存数据并提高响应速度。
🌟主要特点
高性能：Nginx 设计用于实现高并发连接，可以处理大量的请求而不牺牲性能。
低资源消耗：相比于其他 web 服务器如 Apache，Nginx 在处理静态文件方面消耗更少的内存。
反向代理：它可以作为反向代理服务器，为后端服务提供负载均衡，并且能够缓存数据以减轻后端服务器的压力。
模块化设计：通过使用第三方模块扩展功能，如日志分析、健康检查等。
高可用性与负载均衡：支持多种负载均衡算法，如轮询（Round Robin）、最少连接（Least Connections）等。
HTTP/2 支持：支持 HTTP/2 协议，允许在单个 TCP 连接上进行多路复用，提高传输效率。
TLS/SSL 支持：支持安全连接，并且可以通过配置 SSL/TLS 证书来加密通信。
易于配置：Nginx 的配置文件语法简洁，便于理解和修改。
💫使用场景
Web 服务器：可以直接用来托管静态文件或作为动态内容服务器。
反向代理：隐藏并保护后端服务器，同时提供负载均衡和缓存功能。
邮件代理服务器：处理电子邮件流量，支持 IMAP、POP3 和 SMTP 协议。
微服务网关：在现代的微服务体系结构中充当 API Gateway。

使用Nginx代理的目的

在平常开发中我们都是前后端进行数据交互，在我们使用工具的时候它会为我们提供proxy代理因此解决了开发环境的跨域请求问题，当我们的项目上线需要重新处理，这是我们就需要Nginx来帮我们做proxy代理.

解决跨域问题：由于浏览器的同源策略，Vue项目不能直接去访问第三方接口或者是其他域名下的资源，我们就可以用到Nginx代理进行跨域访问

静态资源缓存：在前端项目中会存在一些静态资源比如js、css、img等文件，通过Nginx实现缓存从而减少了服务器压力和提高网站的性能

负载均衡：当前端项目部署在多台服务器上时，可以通过Nginx来实现负载均衡，将请求发给不同的服务器，提高了系统的稳定性

安装Nginx

官网下载：https://nginx.org/en/download.html

安装

下载完成后，将压缩包解压到本地即可

第一次访问会出现这个弹窗，点击运行访问

通过下面的命令查看Nginx是否启动成功

tasklist /fi “imagename eq nginx.exe”

当我们再次点击Nginx图标的时候，再来查看Nginx的运行状态发现已经运行正常了

打包Vue

在项目根目录打开终端，运行npm run build

复制打包项目的dist路径

找到Nginx安装的路径找到conf文件夹的nginx.conf配置文件：


完成修改并保存。再次执行以下命令
先把Nginx停了：

nginx -s stop

然后启动：

start nginx

其实重启之后它就会去重新扫描配置文件了，下面这条命令可以省略。
需要重新加载以下配置文件：

nginx -s reload

我们根据我们配置的端口号去访问项目，只要Nginx启动的时候都可以随时访问项目

今天的分享就到这里啦，小江会一直与大家一起努力，文章中如有不足之处，还请指出哦，感谢支持，持续更新中 ……