vue3+springboot前后端分离项目打包教程，附带一些问题的解决

海绵不是宝宝817

已于 2024-03-12 13:36:46 修改

阅读量1.7k

点赞数 21

分类专栏： Vue3 文章标签： spring boot 后端前端 json html5 javascript

于 2024-02-16 19:26:37 首次发布

本文链接：https://blog.csdn.net/weixin_72949205/article/details/136127541

版权

Vue3 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

本文详细介绍了前端应用的发布流程，包括使用Nginx作为Web服务器的配置，以及如何通过Docker进行后端应用的容器化部署，涉及到了基础配置、资源优化和容器制作等内容。

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

前端应用发布

在发布前后端分离的企业级应用时，通常前端应用会被发布到独立的Web 服务器中，如nginx、Apache等。下面我们就以当前被广泛应用的nginx为例，讲解一下如何进行前端应用发布。

nginx的安装

nginx是一个高性能、支持高并发的开源Web服务器，因其占用资源少、性能高、支持高并发，并且能够提供负载均衡和缓存服务，在企业级应用中被广泛应用。

1.nginx的下载

nginx采用类BSD协议的许可证进行发布，可以直接从官网上下载，nginx官网如图所示。

其中，“Mainline version”指最新版本，“Stable version”指稳定版本，“Legacy versions”指老旧版本。我们选择稳定版本的nginx/Windows-1.24.0版本进行下载。

2.nginx的安装

下载完成后，首先选择合适位置进行解压，即可完成安装。

解压完成之后，在nginx根目录新建 nginx-startup.bat 和 nginx-shutdown.bat ，分别作为nginx的启动和停止命令。

nginx的启动代码

@echo off
title nginx Running
start /b nginx.exe -c conf/nginx.conf

nginx的停止代码

@echo off
title nginx Stop
nginx -s stop

nginx的默认配置文件为根目录下 conf 文件夹中的 nginx.conf 文件，后面要用哦。

使用nginx-startup.bat启动时，启动命令没有常驻命令行窗口，如图6-29所示，可在任务管理器中查看nginx的状态。

启动后能在任务管理器中找到nginx的相关进程：一个master进程和一个worker进程。

3.nginx的基本配置与优化

在实际使用中，可以通过对 nginx参数的配置和优化，实现定制化的应用需求，并大幅度地提子运行性能。

监听自定义端口： nginx默认监听80端口，如图所示，可以修改server块中 listen 的端口号来监听自定义端口。
文件服务器：nginx可以根据请求URI将选定格式的请求转发到指定的路径中。如图中6-31所示，请求gif、jpg、jpeg、png等格式的文件时，将会直接从C:/apache-tomcat-7.0.105/webapps目录中进行查找，这样可以实现资源文件的动静分离，提升服务器的性能。
gzip的压解：nginx可以先压缩返回结果，再返回给客户端，能够有效地减少请求所需的流量。

前端应用打包及发布

进入到前端项目根目录中，运行 npm run build 或 cnpm run build，即可进行打包。

如果出现如下提示

<script src="xxx.js"> in "/index.html" can't be bundled without type="module" attribute

大致意思是我们 引入js文件时缺少了type='module'属性

解决方法：

修改HTML文件：在出现错误的HTML文件中，找到引用脚本的部分，检查其type属性。如果type属性为“script”，则将其改为“module”。

例如，将代码中的

 <script type="text/javascript" src="/src/api/GeoUtils.js" ></script>

修改为

 <script type="module" src="/src/api/GeoUtils.js" ></script>

这样可以告诉浏览器该脚本是一个模块，可以被ES6模块系统识别和加载。

但是这样之后，如果页面加载还出现未定义的情况，记得把js里的你用到的函数或者变量export暴露出来，然后在文件中导入对应的内容。因为它已经作为了模块，所以使用的时候需要导入。

打包结束后，会在根目录中生成dist目录，把dist目录中的所有内容，复制到nginx的html目录中。

注意：是把dist目录中的所有文件复制过去，而不是直接把整个dist文件夹复制过去

在nginx的配置文作中，需要配置server中的端口号即可，我这里是5173。

现在前端应用就打包好了，点击 nginx-startup.bat 启动服务器，访问 http://localhost:你的端口号就可以啦！

如果遇到代理失效问题，在nginx的配置文作中的server里添加如下代码：

location /api{
    rewrite ^.+api/?(.*)$ /$1 break;
    proxy_pass   http://127.0.0.1:8080;//替换为你要代理的端口号
}

后端应用发布

SpringBoot导出Jar包

这里演示通过IDEA将SpringBoot项目导出为jar包

打开项目，找到侧边栏的Maven
点击Meavn后，双击 clean ，如果成功，则返回值为0。双击 clean 的目的是清除之前生成的输出文件以及编译内容，确保导出的Jar包是当前项目且是最新的版本。
双击 package 等待打包完成，如果成功，则返回值为0。
打开项目，将所有文件夹进行折叠。找到 target 目录，可以看到最后有一个 .jar 类型的文件，这就是导出的Jar包。

如果打包时以下报错

class lombok.javac.apt.LombokProcessor (in unnamed module @0x3b8a0e68) cannot access class com.sun.tools.javac.processing.JavacProcessingEnvironment (in module jdk.compiler) because module jdk.compiler does not export com.sun.tools.javac.processing to unnamed module @0x3b8a0e68

这种情况是因为你的jdk版本太高与lombok不匹配导致的。

解决方法：

将lombok依赖中的版本改成1.18.20即可

容器化部署后端应用

容器技术支持将应用打包进一个可以移植的容器中，重新定义了应用开发、测试和部署的过程，其典型应用场景是为开发运维提供持续集成和持续部署的服务。容器技术与微服务有着天然的联系，微服务只有借助容器技术才能发挥最大的潜力。下面将以Docker为例，介绍如何使用容器技术进行企业级应用的发布。

1.Docker 简介

Docker是一个基于Go语言开发的开源的应用容器引擎，遵循Apache 2.0协议。Docker能够凭借比虚拟机平台更高的资源使用率，轻松支撑自动化测试、持续集成、快速部署和快速扩展等功能。

Docker包括如下3个基本概念。

镜像(image)：镜像是包含了应用所有信息的文件系统，除了提供容器运行时所霜的程序、用资源、配置等文件，还提供一些为运行准备的配置参数(如匿名卷、环境变量、用户等)。镜像不包含任何动态数据，其内容在构建之后也不会被改变。
容器(container)：容器是运行中的镜像，包含了单个镜像的运行状态。
仓库(repository)：仓库是镜像的集合，可以通过仓库来管理镜像的版本，以及进行发布、下要镜像等操作。

在Linux系统中， Docker 依赖于内核提供的 namespace 来实现进程、文件、网络资源的隔离，cgroup用于实现物理资源(CPU、内存)的隔离，所有的容器与宿主机(host)共享内核。在老版本的Windons系统中，Docker会使用Hyper-V 虚拟化平台创建一个Linux虚拟机，然后所有的操作都通过这个虚拟机进行。在支持WSL(适用于Linux的Windows子系统)的Windows操作系统中，Docker通过WSL进行所有操作。无论是哪种方式，Docker都能实现容器与容器、容器与宿主机的资源隔离。

2.Docker 安装

以 Windows 操作系统为例，从 Docker 官网下载 DockerDesktop 应用，即可进行安装。

Install Docker Engine on Fedora | Docker Docs

如果windows版本比较低，下载低版本的，这里提供

4.4.4window版本

在Windows 10 2004及以上版本号的计算机上进行安装时，Docker安装程序会提示可以使用WSL2这样的安装选项，如图所示。
如果不选择此选项，Docker会使用Hyper-V技术来实现虚拟化，性能会比WSL2差一些。如果没有安装过WSL 2, Docker Desktop安装程序还会提示用户到微软官网去下载WSL的完整工具包，如图所示，根据提示操作即可。

在 Dooker Desktop 安装完成后，用鼠标左键单击“start”打开Docker，如果是第一次使用Doked会提示用户进行基础教程学习，如图5-25所示。

在实际使用中，建议使用命令行进行Docker相关的操作，如构建镜像、发布镜像、运行容器等。

注意：安装完会重启电脑，切记保存文件哦！！！

3.制作 Docker 镜像

制作Docker 镜像并不复杂，重点是要写好 Dockerfile。Docker 会按照 Dockerfile 中定义的步骤，在宿主机中构建镜像。

Dockerfile的命令一共有11个：FROM、RUN、CMD、ENTRYPOINT、EXPOSE、ARG、ENV、ADD、 COPY、 WORKDIR 和 VOLUME。
接下来，让我们为后端项目制作镜像。首先创建一个文件夹作为工作目录，这里以 BootHello-Docker 为例，然后将后端项目中的 jar 包复制到工作目录中，如图所示。

同时，在该工作目录中创建Dockerfile文件(注意，Dockerfile 没有扩展名)，文件中的内容如代码所示。

FROM openjdk:17
# 拷贝 jar 包到镜像中
ADD springboot-test1-0.0.1-SNAPSHOT.jar /opt
# 设定时区
ENV TZ=Asia/Shanghai
RUN ln -snf /usr/share/zoneinfo/$TZ /etc/localtime && echo $TZ > /etc/timezone
WORKDIR /opt
# 设置暴露的端口
EXPOSE 8080
# 启动命令
CMD java -jar springboot-test1-0.0.1-SNAPSHOT.jar

第1行的FROM指令标记了镜像的基础包来源于openjdk:17，这个基础包仅包含了基础的Java运行环境。第3行的ADD指令将jar包拷贝到/opt目录中，第5行设置时区是为了让启动后打印的日志使用北京时间，这是因为镜像的默认时间一般都是UTC时间，与北京时间相差8小时。第7行设置了镜像内的工作目录为/opt目录，结合第11行的CMD指多相当于执行命令时会先切换到/opt目录。

如果没有jdk17，输入下面的命令拉取JDK17的镜像文件

 docker pull openjdk:17

现在可以使用命令进行镜像的构建，运行时要确保当前目录为创建的工作目录。构建镜像的代码所示。

docker build -t boot-hello/jeelp:0.1 .

-t是tag的缩写，即为构建的镜像作标记，boot-hello/jeelp:0.1指当前镜像为boot-hello的镜像在jeelp的组织下，版本号为0.1。最后的参数“.”代表以当前目录中的Dockerfile构建镜像。

可以看到Docker在构建镜像时，严格按照 Dockerfile中的步骤进行，并且每一步操作都会成为镜像中的一层。
此时使用 docker images 命令，即可看到刚才构建的镜像，如图所示

4.运行 Docker 镜像

如果想运行镜像，使用 docker run命令即可，如代码所示。

docker run -d -p 8080:8080 --name boot-hello boot-hello/jeelp:0.1

-d指令是指Docker 容器在后台运行，-p 8080：8080指将容器的8080端口映射到宿主机的8080端口，--name boot-hello 指为容器取名为 boot-hello。执行命令后，Docker会将容器的ID返回到控制台中。
此时可以使用docker ps命令，查看当前运行的容器，如图所示。