2025—阿里云部署SpringBoot+Vue前后端分离项目：保姆级教程，手把手教你从0到1上线！

码农NPC-代号黄昏

已于 2025-02-09 21:04:38 修改

阅读量1.3k

点赞数 32

分类专栏：部署文章标签：阿里云 spring boot vue.js

于 2025-02-09 20:53:31 首次发布

本文链接：https://blog.csdn.net/Mikey287326/article/details/145536929

版权

部署专栏收录该内容

1 篇文章

订阅专栏

步骤1-获取阿里云服务器

1.去阿里云官网

阿里云官网链接：阿里云-计算，为了无法计算的价值

2.然后进入ECS云服务器页面

3.点击试用个人版

4.然后配置按需选择（以下是我选择的一个）

5.创建成功会弹出这个，然后点击管理控制台

6.进入控制台页面后找到刚刚创建的实例，并重置密码

7.然后进入安全组中配置网络规则

8.配置好后返回实例页面进行远程登录（输入刚刚重置的密码）

9.出现该页面即阿里云服务器搭建完成

步骤二-下载并安装Xshell以及Xftp并使用该工具连接到阿里云服务器

1.安装Xshell及Xftp

官网：家庭/学校免费 - NetSarang Website

2.使用Xshell连接阿里云服务器

在实例页面复制公网ip用于连接

将复制到的ip放入下面主机然后点击连接

然后出现弹框（用户名和密码都和重置密码时的一致）

至此我们便可以使用Xshell对服务器进行操作了！！

步骤三：阿里云服务器上安装JDK

1.前往下载（我的版本是）：Java Downloads | Oracle

2.使用Xftp连接服务器（操作同步骤二）

3.连接成功后将下载好的jdk上传到阿里云服务器上（上传直接拖动即可）

可以新建一个文件夹用于存放jdk

4.在Xshell里进入到该目录使用tar命令解压压缩包

tar -zxvf 文件名

cd命令用于进入该目录（不了解Linux基础命令先去了解一下）

可参考该博客：

史上最全的Linux常用命令汇总（超全面！超详细！）收藏这一篇就够了！_linux命令汇总-CSDN博客

5.编辑profile文件

使用如下指令

vim /etc/profile

profile文件中，按键盘i键，进入编辑模式

在文件末尾加上以下几行(请注意JAVA_HOME文件路径)

JAVA_HOME文件路径请按照自己的进行修改

export JAVA_HOME=/java/jdk-23.0.2
export CLASSPATH=$JAVA_HOME/lib/
export PATH=$PATH:$JAVA_HOME/bin
export PATHJAVA_HOME CLASSPATH

这一步要注意注意再注意！！！

编辑完成后如上图所示，然后按esc退出编辑模式

输入:wq 退出并保存

6.立即执行profile文件，使之生效，使用source命令（source命令：依次执行文件所有语句）

source /etc/profile

至此JAVA配置完毕

步骤四-在阿里云服务器安装Mysql5.7

1.可先在xftp中创建一个mysql的文件夹

2.进入mysql文件夹然后使用以下命令进行下载yum源

wget 'https://dev.mysql.com/get/mysql57-community-release-el7-11.noarch.rpm'

完成后如下图

3.使用以下命令安装yum源

rpm -Uvh mysql57-community-release-el7-11.noarch.rpm

4.使用以下命令查看安装的mysql

yum repolist all | grep mysql

5.使用以下命令安装mysql

yum install -y mysql-community-server

可能出现的问题：

1.GPG公钥问题

解决方法：使用以下命令

/* 1.导入MysqlGPG公钥 */
 rpm --import https://repo.mysql.com/RPM-GPG-KEY-mysql-2022
/* 2. 再尝试安装   */
yum clean all
yum makecache fast
yum install mysql-community-server -y

出现Complete！即安装成功！

6.启动mysql并且查看mysql运行状态

systemctl start mysqld
systemctl status mysqld

如下图所示即启动成功！

7.查看初始密码并使用该密码登录数据库

grep 'temporary password' /var/log/mysqld.log

8.使用下方指令修改mysql密码（NewPass@123即新密码可以自行修改）

ALTER USER 'root'@'localhost' IDENTIFIED BY 'NewPass@123';

注：自行修改密码需注意Mysql默认的密码策略如需更改策略使用下方指令

SET GLOBAL validate_password_policy = LOW;  /*密码强度等级*/
SET GLOBAL validate_password_length =4;   /*密码最少长度*/

9.开启远程登录，授权root远程登录，即让阿里云服务器打开权限，让windows上Navicat能连接上服务器的数据库

UPDATE mysql.user SET host = '%' WHERE user='root';
FLUSH PRIVILEGES;

10.到阿里云官网配置阿里云服务器的安全组，开放Mysql3306端口

11.在windows上，用Navicat连接云服务器上的mysql数据库

下图即连接成功

步骤五-部署SpringBoot项目

1.将后端项目的端口添加到云服务器的安全组中

2.在IDEA中项目打包（我这边是Maven项目）

直接就点击下图按钮进行打包

如下方所示即打包成功（jar包所在位置在项目目录的target文件夹里）

3.将打包好的jar包上传到云服务器，可自行在服务器建立文件夹用来放置文件

4.在Xshell里进入到放jar包的文件夹,输入下方指令

java -jar 文件名

5.让后端在服务器中不停的运行使用下方指令

nohup java -jar  文件名.jar  &

到这项目后端就启动成功了！！

步骤六-部署vue前端（该教程采用nginx）

1.更新系统软件包：

yum update

2.安装Nginx：

sudo yum install nginx

3.启动Nginx服务：

sudo systemctl start nginx

4.验证安装：使用以下命令检查 Nginx 服务是否正在运行：

sudo systemctl status nginx

如下图即启动成功

5.在windows里测试能否访问(注云服务器的安全组协议记得添加80端口)

公网ip:80 这里的公网ip即前面提到的阿里云服务器公网ip

出现页面即安装成功

6.打包vue项目并上传到服务器上

在idea里打开vue项目或者进入项目目录

在项目目录打开终端输入指令

npm run build

打包完成后将生成的dist目录压缩后上传压缩包到服务器中

7.解压上传的dist文件，输入下方指令

unzip dist.zip

解压完成如下图

8.查找nginx配置文件

先查找nginx.conf位置（一般位于/etc/nginx）

找不到可以使用下方命令查找

sudo find / -name nginx.conf

9.修改nginx配置文件

进入目录后，使用下方指令编辑nginx.conf

vim nginx.conf

编辑参照下图

10.修改后查看语法是否有误

sudo nginx -t

没问题如下图

11.重新加载Nginx并重启：

sudo systemctl reload nginx
sudo systemctl restart nginx

到此即全部部署完成，输入对应ip加端口即可访问！