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

admin • • 运维

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 创建数据库并导入数据

  • 进入宝塔的数据库界面，添加数据库，填写数据库名、选择字符集、设置访问权限为所有人（这样才能使用其他终端访问），完成后提交，提示添加成功即为创建成功
    [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-fkjp1sk8-1638865326066)(C:UsersQAppDataRoamingTyporatypora-user-imagesimage-20211206191659514.png)]
  • 创建成功后，点击导入，把本地数据库的测试数据导入到服务器中的数据库。提示导入数据库成功即可。在这里插入图片描述
    在这里插入图片描述在这里插入图片描述

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）
    [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-zB2nM8g3-1638865326069)(C:UsersQAppDataRoamingTyporatypora-user-imagesimage-20211207141808228.png)]

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路径是宝塔默认建站目录，放到此处便于查找

    [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-lvcAnWm8-1638865326074)(C:UsersQAppDataRoamingTyporatypora-user-imagesimage-20211207142402694.png)]

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标签不需要变动
      + 修改后内容如图[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-N1RjvpYY-1638865326076)(C:UsersQDesktop屏幕截图 2021-12-07 152729.png)]

  • 重载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、可能存在的问题：

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:IDEAWorkSpacevueblogtargetsurefire-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
本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。
THE END
分享
二维码
< <上一篇
下一篇>>