前端应用发布

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

nginx的安装

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

1.nginx的下载

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

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

打包后的vue项目如何放在springboot项目中 vue打包到springboot_前端

2.nginx的安装

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

打包后的vue项目如何放在springboot项目中 vue打包到springboot_后端_02

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

打包后的vue项目如何放在springboot项目中 vue打包到springboot_后端_03

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进程。

打包后的vue项目如何放在springboot项目中 vue打包到springboot_后端_04

 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。

打包后的vue项目如何放在springboot项目中 vue打包到springboot_前端_05

现在前端应用就打包好了,点击 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包

  1. 打开项目,找到侧边栏的Maven
  2. 打包后的vue项目如何放在springboot项目中 vue打包到springboot_spring boot_06

  3. 点击Meavn后,双击 clean ,如果成功,则返回值为0。双击 clean 的目的是清除之前生成的输出文件以及编译内容,确保导出的Jar包是当前项目且是最新的版本。
  4. 打包后的vue项目如何放在springboot项目中 vue打包到springboot_json_07

  5. 双击 package 等待打包完成,如果成功,则返回值为0。
  6. 打包后的vue项目如何放在springboot项目中 vue打包到springboot_后端_08

  7. 打开项目,将所有文件夹进行折叠。找到 target 目录,可以看到最后有一个 .jar 类型的文件,这就是导出的Jar包。
  8. 打包后的vue项目如何放在springboot项目中 vue打包到springboot_json_09


如果打包时以下报错

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的完整工具包,如图所示,根据提示操作即可。

打包后的vue项目如何放在springboot项目中 vue打包到springboot_spring boot_10



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

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

注意:安装完会重启电脑,切记保存文件哦!!!

3.制作 Docker 镜像

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

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

打包后的vue项目如何放在springboot项目中 vue打包到springboot_html5_11


同时,在该工作目录中创建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

打包后的vue项目如何放在springboot项目中 vue打包到springboot_前端_12

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

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

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

打包后的vue项目如何放在springboot项目中 vue打包到springboot_后端_13

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

打包后的vue项目如何放在springboot项目中 vue打包到springboot_html5_14

 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命令,查看当前运行的容器,如图所示。

打包后的vue项目如何放在springboot项目中 vue打包到springboot_前端_15

当运行镜像时,可以在宿主机中访问http://localhost:8080,对运行中的容器的镜像内容进行验证。