vue和springboot项目打包发布到服务器流程

前端使vue创建了一个小demo，后端使用springboot写了个接口提供数据给前端，然后申请了一个阿里云的云服务器（可以试用一个月的，哈哈），尝试了一下前后端分离，把项目部署在服务器上，在此记录一下。希望能给还没有经验的人提供一个参考。
一、前端vue项目部署

1. 服务器配置
   1.1 查看 gcc 版本，没有的话进行安装
   命令：gcc -v
   安装命令：yum -y install gcc
   1.2 pcre、pcre-devel 安装（pcre 是一个 perl 库，包括 perl 兼容的正则表达式库，nginx 的 http 模块使用 pcre 来解析正则表达式，所以需要安装 pcre 库）
   命令：yum install -y pcre pcre-devel
   1.3 zlib安装（zlib 库提供了很多种压缩和解压缩方式 nginx 使用zlib 对 http 包的内容进行 gzip，所以需要安装）
   命令：yum install -y zlib zlib-devel
   1.4 安装 opensslopenssl（opensslopenssl 是 web 安全通信的基石，没有 openssl，可以说我们的信息都是在裸奔）
   命令：yum install -y openssl openssl-devel
   1.5 安装 nginx
   1.5.1 先去 nginx 官网下载 nginx 的 linux 版本，然后将其上传到服务器上的某个 /usr/local 目录下（随便哪个目录都行）
   1.5.2 解压
   命令：tar -zxvf nginx-1.19.4.tar.gz
   1.5.3 解压后进入 nginx 安装目录：cd nginx/
   1.5.4 进入目录后执行三个命令，分别是：
   ① ./configure
   ② make
   ③ make install
   1.5.6 验证 nginx 是否安装成功，进入 nginx 安装目录下的 sbin 目录下，执行启动命令：./nginx，然后执行命令：ps -ef | grep nginx，查看 nginx 进程是否存在
   1.5.6 nginx 安装好之后需要进行配置，进入nginx 的安装目录下的 conf 目录，编辑 nginx.conf 文件（vim /nginx/conf/），在 server 中添加如下图内容：
   
   参数说明：
   listen：是监听的前端 vue 项目的启动端口，只要端口不和其他项目冲突就行；
   server_name：访问前端服务的ip；
   location ^~ /product ：当前端请求是以/product开头的时候，会将请求拼上后端接口的基本路径，例如前端url: “/product/list”，最后请求的后端接口地址就是 http://47.97.96.235:8080/product/list。
   到此，前端项目部署所需的服务器环境就配置好了
2. 本地vue项目打包
   2.1 打包方式一：vue项目执行命令 npm run build 命令打包
   2.2 打包方式二：右键 package.json 文件 --> 点击 Show npm Scripts --> 双击 build
   2.3 打包完成后，项目下面会多出来一个 dist 文件夹，将该文件夹上传到 服务器上 nginx 安装的 nginx.conf 配置中的 vuedist 目录下（目录本来不存在，自己创建一下）
   2.4 进入 nginx 安装目录的 sbin 目录下，执行命令：./nginx -s reload,重启 nginx，项目就启动成功了，可以访问了，如下图：
   
   总结：vue项目的部署也是有多种方法的，听说把vue项目打包放在tomcat里面也可以，不过我没尝试过。
   二、springboot 项目部署
3. springboot项目部署需要的服务器环境
   1.1 java 环境
   1.1.1 去 jdk 官网下载 1.8 的 jdk，上传至服务器 /usr/local 目录下（目录随意），执行解压命令：tar -zxvf jdk-8u261-linux-x64.tar.gz
   1.1.2 jdk 解压完成后配置一下环境变量就好了，编辑 /etc/profile 文件（命令：vim /etc/profile），添加如下图所示配置即可：
   
   说明：JAVA_HOME 就是 jdk 解压后所在的目录。
   1.1.3 配置好 jdk 的环境变量之后，执行命令：source /etc/profile，是配置立即生效
   1.1.4 执行命令：java -version，查看 jdk 版本，看到下图所示的结果就表示 jdk 安装成功
   
   1.2 maven 环境
   1.2.1 到 maven 官网下载 linux 版本的 maven 安装包，上传至服务器上的 /usr/local 目录下（目录随意），执行解压命令：tar -zxvf apache-maven-3.6.3-bin.tar.gz
   1.2.2 解压完成后，配置 maven 环境变量，编辑 /etc/profile 文件（命令：vim /etc/profile），添加下图所示配置：
   
   说明：MAVEN_HOME 就是 maven 解压后所在的目录。
   至此 springboot 项目部署所需的服务器环境就已经配置好了。
4. 部署 springboot 项目
   2.1 springboot 项目打成 jar 包，上传只服务器，随便哪个目录都行
   2.2 启动springboot项目，进入springboot项目jar包所在的目录，执行命令：java -jar demo-0.0.1-SNAPSHOT.jar，其中 demo-0.0.1-SNAPSHOT.jar 是我的jar包名称，这样springboot项目就启动起来了，不过这种启动方式，一旦命令行窗口关闭，程序也就会结束，所以这时候需要在后台启动springboot项目，后台启动springboot项目的命令为：nohup java -jar demo-0.0.1-SNAPSHOT.jar > /dev/null 2>&1 &，这样就算关闭命令行窗口，程序也不会结束。springboot 项目启动成功后如下图所示：
   
   2.3 如果是后台启动程序的话，想要关闭程序该怎么办呢？进入springboot 项目 jar 包所在目录，执行命令：ps -ef | grep demo-0.0.1-SNAPSHOT.jar，查看程序进程，然后再执行命令：kill -9 demo-0.0.1-SNAPSHOT.jar，杀死进程即可，如下图：
   
   三、前后端项目都部署好了，最后测试一下，访问一下看看有没有问题，我这边是折腾了很久才搞好的（还是一只小菜鸟），特意记录一下，防止自己以后忘记，也希望能帮助到和我一样还很菜的人。
   
   友情说明：这只是用来测试前后端是否能够联调成功的，整个项目就一个接口，一个页面，什么样式都没有，不要吐槽哈！！！