个人技术博客——服务器部署

[222100123姚磊]

目录

• 1 技术概述
• 2 技术使用场景
• 3 实现部分
• 3.1 获得一个阿里云服务器
• 3.2 方法一、使用Xshell和Xftp 7部署后端Springboot代码
• 3.3 方法二、使用宝塔进行后端springboot代码部署
• 3.3 通过Nginx来部署前端vue项目
• 4 可能遇到的问题及解决方法
• 4.1 出现跨域问题
• 4.2 访问前端页面是黑色的情况
• 5 参考博客

1 技术概述

此技术是在阿里云服务器部署springboot+vue前后端分离项目，不涉及mybatis数据库部署部分，如有需要可参考文末相关资料。

2 技术使用场景

springboot+vue前后端分离项目部署阿里云服务器。

3 实现部分

3.1 获得一个阿里云服务器

点击阿里云官网页面登录后，在产品中找到云服务器ECS。

购买一台服务器并选择适合自己项目的配置。在购买之后按照以下步骤找到相应实例。

先重置密码，接着进行远程连接 这部分可参考博客

出现以下页面说明获取阿里云服务器成功

3.2 方法一、使用Xshell和Xftp 7部署后端Springboot代码

这个方法是我在第一次学习部署云服务器的时使用的方法，这个方法可以参考一下博客。参考博客

3.3 方法二、使用宝塔进行后端springboot代码部署

访问宝塔官网,点击立即免费安装

将页面划到下面一点使用Linux面板在线安装 输入相应ip地址和密码，生成相应宝塔信息，宝塔信息要保存好。因为宝塔默认打开端口是8888（这里可以根据生成的宝塔网页ip自行判断），需要在云服务器安全组中将8888端口打开。

然后进入宝塔界面。

到官网地址下载linux对应jdk版本

然后进入宝塔文件模块，进入自己想要上传的文件夹中上传刚刚下载好的jdk并完成解压

开始配环境变量，从根目录进入etc文件夹，在etc文件夹下的profile文件中编辑。
export JAVA_HOME=/java/jdk1.8.0_411
export CLASSPATH=$JAVA_HOME/lib/
export PATH=$PATH:$JAVA_HOME/bin
export PATHJAVA_HOME CLASSPATH
按以上的方式配置 JAVA_HOME=你所解压的jdk所在文件夹路径/jdk版本号

在终端界面输入java -version命令查看环境是否配置完成
如上所示就说明配置完成

如有需要配置数据库，同样参考博客

接着在自己的springboot项目代码中的application.properties或是application.yml中找到配置端口号的选项(我的项目是在application.yml,参考博客是在application.properties中，读者可参考自己的项目进行配置)

直接使用maven中所带的package进行打包，打包好的jar包存在项目的target文件夹下，然后和上传jdk一样步骤上传到宝塔服务器中。

上传之后点击终端会用到以下指令:
cd /backend 进入文件夹
nohup java -jar brightwall-api.jar //加载jar包 brightwall-api为打包后的jar包名字
出现以下信息并且在文件夹中有nohup.out文件时，说明后端代码部署完成

如果要重新部署，要使用指令：
ps -ef | grep java //查看已经运行的jar包
kill -9 端口号 //杀死进程
然后重新使用上面的指令进行部署 以下就是杀手进程的结果图

3.3 通过Nginx来部署前端vue项目

在vscode中打开vue项目->点击终端->新建终端->在终端处输入npm run build 回车进行打包

在目录下找到dist文件并上传到自己想要的文件夹下

在宝塔下软件商店下载Nginx，并完成配置后重启 记得把配置的监听端口在宝塔和阿里云服务器安全组打开

最后访问ip:端口号 访问成功

4 可能遇到的问题及解决方法

4.1 出现跨域问题

可能性1：在本地使用类让它实现WebMvcConfigurer接口解决跨域问题后在部署服务器后又出现跨域问题
解决方法：这种情况不用这个类，将这个类删除，并且在每个controller类的顶部添加@CrossOrigin注释。

可能性2：前后端访问接口的路径不对应，出现url写错的情况。
解决方法：检查是哪里的url写错并修改

可能性3：没有把后端代码端口打开，导致前端访问不到后端代码。
解决方法：在服务器和宝塔把端口打开

4.2 访问前端页面是黑色的情况

可能性1：配置完Nginx没有重启。
解决方法：重启Nginx
可能性2：配置的dist所在文件夹路径有问题或者是访问路径有问题。
解决方法：查看配置路径
可能性3；Nginx的监听端口没有打开。
解决方法：在服务器和宝塔把端口打开

5 参考博客

保姆级级教程——将springboot+vue前后端分离项目部署到阿里云服务器（包教包会）2023年最新版
Vue+SpringBoot使用注解@CrossOrigin解决跨域问题
vue项目打包后部署到服务器(超详细步骤)