SpringBoot+Vue项目部署到Linux服务器

Note:

1、Linux服务器选用的是CentOS7.7，其他类型也可以
2、需要在服务器配置jdk，服务SpringBoot项目
3、后端打包类型为jar包，war包需要自行修改后端配置
4、需要在服务器配置Nginx，服务Vue项目
5、暂未部署Docker，后续更新

1、服务器配置

1.1 安装宝塔

• 参考宝塔官方教程即可，首先登录服务器，设置安全组放行端口，把8888放开，然后使用终端执行命令（以CentOS为例）

  yum install -y wget && wget -O install.sh http://download.bt.cn/install/install_6.0.sh && sh install.sh 2c87998c
  

• 安装完成后记录终端处的登录入口、账号、密码，然后登录

• 登录后需要注册个账号，注册绑定后即可正常使用宝塔

1.2 安装并配置MySQL、Redis、Nginx

• 使用宝塔安装Mysql、Redis、Nginx，便于管理
• 在宝塔的软件商店中搜索Mysql、Redis、Nginx并快捷安装

1.3 创建数据库并导入数据

• 进入宝塔的数据库界面，添加数据库，填写数据库名、选择字符集、设置访问权限为所有人（这样才能使用其他终端访问），完成后提交，提示添加成功即为创建成功
  
• 创建成功后，点击导入，把本地数据库的测试数据导入到服务器中的数据库。提示导入数据库成功即可。
  

1.4 安装并配置jdk

1.4.1 官网下载JDK并上传到服务器

• 从官网下载可用于Linux的jdk包，通过宝塔上传到服务器

• 建议上传到/www/server下

  PS：/www/server是宝塔软件的默认安装目录，把软件都放到一起，方便查找

• 然后使用终端，进入jdk的上传目录，使用解压命令，把上传的jdk文件解压到当前目录，然后把解压后的文件夹重命名为jdk8

  tar -zxvf jdk-8u311-linux-x64.tar.gz
  mv jdk1.8.0_311 jdk8
  

1.4.2 配置环境变量

• 1.打开 /etc/profile 文件

  vim profile
  

• 2.在 profile 文件末尾，配置jdk环境

  export JAVA_HOME=/www/server/jdk8
  export CLASSPATH=$:CLASSPATH:$JAVA_HOME/lib/
  export PATH=$JAVA_HOME/bin:$PATH
  export JRE_HOME=$JAVA_HOME/jre
  

• 3.使 profile 生效

  source profile
  

• 4.查看jdk是否配置成功

  java -version 
  

  显示版本号即为配置成功
  

1.5 安全组配置、放行端口配置

1.5.1 安全组配置

• 登录云服务器，在控制台处找到服务器，然后对安全组规则进行更改

• 以华为云为例，在入方向规则处添加前后端使用的端口（如8080和8081）
  

1.5.2 放行端口配置

• 在宝塔的安全功能中放行前后端项目需要使用的端口，如8080和8081

2、SpringBoot项目配置

2.1 配置修改

• 后端拆分application.yml配置文件，可拆分出本地dev和生产pro两个（也可以多拆出test）

• application.yml文件中保留通用配置

• application-dev.yml文件中配置本地运行项目所用的配置

• application-pro.yml文件中配置服务器中运行项目所用的配置，其中服务器数据库名称，即为1.3节中添加的数据库名，密码从宝塔界面点击复制即可，注意不是使用root密码，而是使用刚创建的数据库的密码（下图有误，redis的host保持127.0.0.1即可）

• dev和pro的不同之处主要是MySQL的配置。

  • pro中需要按照服务器的IP和数据库配置来填写，可在application.yml文件中修改active指向pro，来测试是否能够成功连接服务器中的数据库

2.2 打包

• 修改application.yml文件中的active:pro，然后执行maven clean，清除本地测试时生成的jar包
• 执行maven package，后端项目打包完成

2.3 上传到服务器

• 找到项目路径下打包出的文件 target，找到target下的打包文件，后缀名是 .jar，即可运行的jar包，然后使用宝塔将其从本地路径中上传到服务器，路径可以为 /www/wwwroot/project_name，末尾的project_name文件夹可按照自己需求新建

  PS：/www/wwwroot路径是宝塔默认建站目录，放到此处便于查找

  

2.4 后端项目服务器配置

• 只需确保jdk安装成功，且jar包上传成功即可

2.5 运行测试

2.5.1 运行后端jar包

在Linux系统下有多种运行jar包的方式。建议使用方法d，保留项目运行日志。日志文件会生成到项目同级路径下。

• a.当前终端被锁定，可按CTRL + C打断程序运行，或关闭窗口退出程序

  java -jar xxx.jar  
  

• b.当前终端不被锁定，但是当窗口关闭时，程序中止运行

  java -jar xxx.jar &
  

• c.不挂断运行命令,当账户退出或终端关闭时,程序仍然运行

  nohup java -jar xxxx.jar &
  

• d.指定输出日志文件，不挂断运行命令，退出或终端关闭时程序仍然运行

  nohup java -jar xxx.jar > project.log
  

2.5.2 查看日志文件

• 建议使用动态查看命令，查看实时更新的日志，打开一个新的终端，输入如下命令：

  tail -f project.log
  

2.5.2 停止运行后端jar包

• 若使用2.5.1种的方法a、b，直接关闭终端即可

• 若使用2.5.1种的方法c、d，需要查找后端使用端口（这个端口号是填写在SpringBoot项目的application.yml文件中server项中的）占用的进程号，然后关闭进程，即可停掉jar包的运行。命令如下：

  netstat -tunlp | grep 端口号
  
  // 得到进程号
  
  kill -9 进程号
  

• 操作如图，8081是我的后端项目占用的端口号，13061是进程ID
  

3、Vue项目配置

3.1 配置修改

• axios.js文件的URL配置为 服务器公网IP:端口号

• axios.defaults.baseURL = "http://服务器公网IP:端口号"
  // axios.defaults.baseURL = "http://localhost:端口号" 本地使用localhost
  

3.2 打包

• 打包命令

  npm run build
  

• 打包后的文件名为dist，可在项目路径下查看

3.3 上传到服务器

• 通过宝塔可直接上传dist文件夹，如果没有宝塔，可以将dist文件夹压缩后上传到服务器
• 建议上传到与2.3节中提到的后端项目上传路径中，相同一个需求的前后端项目放到同一个文件夹中便于查找：/www/wwwroot/project_name

3.4 前端项目服务器配置

• 需要对服务器的Nginx进行配置，以满足前端项目的运行

• 通过宝塔安装Nginx，其默认的配置文件会被备份为 nginx.conf.default，且生成一份新的配置文件 nginx.conf。

• 如果是使用宝塔安装的Nginx，则文件存放路径为/www/server/nginx/conf

• 首先从 nginx.conf.default 中复制一份以 server 为标签的代码，如下图：

• 真正需要修改文件的是 nginx.conf，此文件可以通过宝塔界面的“软件商店”—“Nginx”—“设置”—“配置修改”来修改，在此处修改时如果修改的格式有误等错误会被提示无法保存
  

• 将上一步复制的server代码段复制到文件中的 include 标签上方（配置文件中会有一个已经存在的server 标签，不需要覆盖，顺着它粘贴代码段A即可，不会冲突）

• 删除代码段中所有注释，保留四个未被注释的标签（listen、server_name、location / 、error_page）即可

• 修改上述四个标签

  • (1)listen标签后填写前端项目要使用的端口号

  • (2)server_name标签填写服务器公网IP

  • (3)location标签的root标签填写vue项目的打包文件dist的路径

  • (4)location标签的添加一行代码标签防止刷新出现404

    try_files $uri $uri/ /index.html; 
    

  • (5)error_page标签不需要变动
    

• 重载Nginx配置并重新启动即可，在宝塔的界面操作很方便

3.5 运行测试

• 确保已经重载Nginx配置并重新启动
• 在浏览器输入服务器公网IP:端口，查看是否能够进入vue项目首页

4、部署到服务器的前后端联调测试

4.1 运行后端项目

• nohup java -jar xxx.jar > project.log

4.2 运行前端项目

• 启动Nginx

4.3 访问与功能测试

• 浏览器输入服务器公网IP:端口，测试能否进入项目
• 测试项目功能是否完整可用
• 测试是否有功能与本地测试效果不符

5、后续部署Docker（待完成）

6、可能存在的问题：

6.1、打包失败

• 保错：

  Failed to execute goal org.apache.maven.plugins:maven-surefire-plugin:2.22.2:test (default-test) on project XXX: There are test failures.

  Please refer to D:\IDEAWorkSpace\vueblog\target\surefire-reports for the individual test results.
  Please refer to dump files (if any exist) [date].dump, [date]-jvmRun[N].dump and [date].dumpstream.

• 解决

  使用命令，跳过测试打包

  mvn clean package -Dmaven.test.skip=true