[详细教程]SpringBoot+Vue前后端分离项目部署到阿里云服务器

摸魚的猫

已于 2023-08-10 17:35:17 修改

阅读量9.6k

点赞数 46

文章标签： vue.js 服务器 spring boot linux

于 2023-07-20 09:42:23 首次发布

本文链接：https://blog.csdn.net/weixin_44567080/article/details/131770045

版权

本文详细介绍了如何在阿里云CentOS服务器上配置环境，包括设置密码、管理安全组、安装Xshell，然后分别安装和配置JDK、MySQL、Redis，接着部署后端SpringBoot应用和前端Vue项目，最后通过Nginx做反向代理实现完整应用的部署。同时，文章提供了常用Linux命令的参考。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

一、准备一台云服务器

1.去阿里云领取免费试用云服务器

Linux操作系统本篇教程选用CentOS 8.4 64位

2.进入控制台

3.设置密码

4.管理安全组

设置常用的端口号，如默认：80端口、MySQL：3306、Redis：6379、后端：8080端口。

5.测试连接

出现上述界面表示连接成功

二、使用Xshell远程管理服务器

1.下载Xshell

https://pan.baidu.com/s/1oHftPUSvb_Y1K6VTWvZTOA?pwd=8rdn

2.Xshell的使用

Xshell是一个强大的安全终端模拟软件，Xshell可以通过网络与远程主机进行安全的连接和管理。

3.Xftp的使用

Xftp是一个功能强大的SFTP、FTP 远程文件传输软件，能够安全的、可视化的在Windows和Linux之间传输文件。在Xshell套件里已经包含了Xftp，点击Xftp图标即可打开Xftp软件。

三、JDK下载及配置

1.下载JDK

下载地址：https://www.oracle.com/java/technologies/downloads

官网下载Linux版本，注意下载版本尽量和本地项目版本保持一致

2.使用Xftp将JDK上传到服务器

自己在服务器/usr/local目录创建一个文件夹java（推荐放在此目录下，大部分开源软件的安装目录也是在/usr/local下，将所有软件统一安装在同一地方便于管理和维护）

进入java文件夹，将下载好的JDK从本地拖过去即可上传

3.解压tar压缩包

# 进入文件夹目录
cd /usr/local/java
# 解压
tar -zxvf jdk-17_linux-x64_bin.tar.gz

4.配置环境变量

# 打开profile文件进行编辑
sudo vi /etc/profile
# profile文件中，按i键进行编辑插入
# 在最上面写入如下环境变量的配置
export JAVA_HOME=/usr/local/java/jdk-17.0.7
export CLASSPATH=$JAVA_HOME/lib/
export PATH=$PATH:$JAVA_HOME/bin
export PATH JAVA_HOME CLASSPATH
# 编辑完按Esc键退出编辑，最后输入:wq保存退出（注意:要写）

5.生效profile文件

# 使profile文件立即生效
source /etc/profile
# 查看是否配置环境变量成功
java -version

看到java的版本号表示环境变量配置成功

四、MySQL下载及配置

1.下载MySQL

下载地址：https://downloads.mysql.com/archives/community

选择对应的MySQL版本和Linux版本，例如CentOS 8.4 64位，选择Red Hat Enterprise Linux / Oracle Linux ，OS Version选择Red Hat Enterprise Linux 8 / Oracle Linux 8 (x86,64-bit)

2.使用Xftp将MySQL上传到服务器

在服务器/usr/local目录创建一个文件夹mysql，将下载好的mysql拖过去

3.解压并安装

# 进入mysql文件夹
cd /usr/local/mysql
# 解压
tar -xvf mysql-8.0.33-1.el8.x86_64.rpm-bundle.tar
# 依次执行以下命令安装rpp包
rpm -ivh mysql-community-common-8.0.33-1.el8.x86_64.rpm
rpm -ivh mysql-community-client-plugins-8.0.33-1.el8.x86_64.rpm
rpm -ivh mysql-community-libs-8.0.33-1.el8.x86_64.rpm
rpm -ivh mysql-community-devel-8.0.33-1.el8.x86_64.rpm
rpm -ivh mysql-community-client-8.0.33-1.el8.x86_64.rpm
rpm -ivh mysql-community-icu-data-files-8.0.33-1.el8.x86_64.rpm
rpm -ivh mysql-community-server-8.0.33-1.el8.x86_64.rpm

查看是否安装成功

4.启动MySQL

# 启动mysql
systemctl start mysqld
# 重启mysql
systemctl restart mysqld
# 关闭mysql
systemctl stop mysqld
# 查看mysql状态
systemctl status mysqld

5.连接mysql数据库

查看初始随机密码

# 查看初始随机密码
grep 'temporary password' /var/log/mysqld.log
# 登录mysql数据库
mysql -u root -p

6.设置密码

ALTER USER 'root'@'localhost' IDENTIFIED WITH mysql_native_password BY '新密码';

如果报错Your password does not satisfy the current policy requirements，则表明设置的密码强度过低。

解决办法：①先设置一个符合强度的密码；②查看密码验证插件；③降低密码验证规则的值。

# 设置一个符合规则的密码
ALTER USER 'root'@'localhost' IDENTIFIED WITH mysql_native_password BY 'root@_1Root';
# 查看密码验证插件
SHOW VARIABLES LIKE 'validate_password%';
# 设置密码验证规则的值为LOW
set global validate_password.policy=LOW;
# 设置密码长度限制的值为1
set global validate_password.length=1;

然后再重新设置你想设置的密码

7.开启远程登录

开启远程登录可以让本地MySQL数据库管理工具连接

# 打开权限
UPDATE mysql.user SET host = '%' WHERE user='root';
# 进行刷新
FLUSH PRIVILEGES;

8.使用本地MySQL数据库管理工具连接

使用SQLyog作为示范

如果报错2058，参考https://blog.csdn.net/weixin_44567080/article/details/131477078

注意，刚刚设置服务器的MySQL密码时，已经将服务器的MySQL身份验证插件设置为mysql_native_password。

五、Redis下载及配置

1.下载Redis

下载地址：https://redis.io/download/

如果想下载其他版本，在此处下载：https://download.redis.io/releases/

2.使用Xftp上传到服务器

在/usr/local目录下，新建文件夹redis，进入redis文件夹，将下载好的redis上传

3.解压并安装

# 进入目录
cd /usr/local/redis
#解压缩包到当前目录
tar -xvf redis-7.0.12.tar.gz
# 进入目录
cd redis-7.0.12
# 执行编译
make
# 执行安装命令，默认安装到/usr/local/bin
make install

查看是否安装成功

4.Redis的启动及配置

4.1直接启动Redis

redis-server

4.2修改redis.conf文件中的一些配置

redis.conf文件默认在解压的/usr/local/redis/redis-7.0.12中

使用vim编辑redis.conf，或者直接在Xftp中找到redis.conf用记事本打开编辑

vim /usr/local/redis/redis-7.0.12/redis.conf

修改如下内容

# 允许访问的地址，修改为0.0.0.0则可以在任意IP访问
bind 0.0.0.0
# 守护进程，修改为yes后即可后台运行
daemonize yes
# 设置redis密码，默认无需密码
requirepass 你的密码

4.3使用指定配置启动Redis

cd /usr/local/redis/redis-7.0.12
# 启动
redis-server redis.conf

5.设置Redis开机自启

新建一个系统服务文件

vi /etc/systemd/system/redis.service

写入如下内容，注意文件的路径修改为自己的

[Unit]
Description=redis-server
After=network.target

[Service]
Type=forking
ExecStart=/usr/local/bin/redis-server /usr/local/redis/redis-7.0.12/redis.conf
PrivateTmp=true

[Install]
WantedBy=multi-user.target

如何重载系统服务

systemctl daemon-reload

之后就可以使用下面这些命令运行Redis

# 启动
systemctl start redis
# 允许开机自启
systemctl enable redis
# 停止
systemctl stop redis
# 重启
systemctl restart redis
# 查看状态
systemctl status redis

六、部署后端Spring Boot

使用jar包方式部署，因为Spring Boot项目已经内置tomcat，所以只需要将项目打包成jar包即可。

1.修改本地项目的配置

将端口号添加到阿里云服务器的安全组规则中

在IDEA中按Ctrl+Shift+R一键查找localhost，全部替换为服务器的IP地址

2.打包成jar包

点击右边的Maven，点击Lifecycle下的package打包成jar包

打包完会在项目下的target目录生成jar包

如果项目是有多个模块的，那么在每个模块的target目录都会生成一个jar包，我们只需要找有Application启动类的那一个模块下的jar包即可

3.将jar包上传到服务器

创建一个目录用于存放项目

4.使用命令进行部署

# 进入jar包目录
cd /目录
# 启动jar包，xxx为你的jar包名
java -jar xxx.jar

看到启动的端口号和启动耗费的时间表示启动成功

5.保持项目后台启动

按ctrl c关闭当前运行的项目，使用下面命令重新启动项目，这样项目就能在后台运行，即使关闭Xshell也在运行

# xxx为你的jar包名
nohup java -jar  xxx.jar  &

七、部署前端Vue

1.修改本地项目配置

因为此处使用build将前端打包为静态页面，所以不需要考虑前端的端口号

搜索localhost，全部替换为服务器IP

2.打包

运行npm run build:prod命令进行打包（有些vue项目命令不同，可以在package.json文件中查看）

打包完成，在项目下会生成dist文件

3.将dist上传到服务器

创建一个存放目录，将dist上传

八、使用nginx反向代理

1.下载nginx安装包

下载地址：http://nginx.org/en/download.html

2.使用Xftp上传到服务器

在/usr/local目录下，新建文件夹nginx，进入nginx文件夹，将下载好的nginx上传

3.解压并安装nginx

# 进入目录
cd /usr/local/nginx
# 解压缩包到当前目录
tar -xvf nginx-1.24.0.tar.gz
# 进入目录
cd nginx-1.24.0
# 编译 执行命令 考虑到后续安装ssl证书 添加两个模块  如不需要直接执行./configure即可
./configure --with-http_stub_status_module --with-http_ssl_module
# 执行编译
make
# 执行安装命令
make install

4.启动nginx

cd /usr/local/nginx/sbin
# 默认配置文件为/usr/local/nginx/conf/nginx.conf
# 启动nginx
./nginx

在浏览器中输入：服务器IP地址

看到下面这个界面则表示nginx启动成功

5.配置nginx.config

使用vi命令打开nginx.conf编辑，或者直接在Xftp中找到nginx.conf用记事本打开编辑

# 打开配置文件
vi /usr/local/nginx/conf/nginx.conf

找到server部分，修改如下内容

# 设置nginx连接超时
keepalive_timeout  300;
proxy_connect_timeout 300;   #单位秒 默认60
proxy_send_timeout 300;   #单位秒 默认60
proxy_read_timeout 300;   #单位秒 默认60

server {
    listen       80;  # 监听端口，可以换成任意自己想要的
    server_name  localhost;  # 可以换成任意名称
    #charset koi8-r;
    #access_log  logs/host.access.log  main;
    location / {
        root   /quosystem/quosystemvue/dist;  # 前端vue存放路径，写到dist即可
        index  index.html index.htm;
        try_files $uri $uri/ /index.html;  # 处理前端路由刷新问题
    }
    location /prod_api/ {   # 这里的 /prod_api/ 是你想要代理的后端api路径开头
        proxy_pass http://xxxx:port/;  # 替换成服务器IP地址：后端应用的端口
	    # 设置请求头，以保留访问客户端的真实IP地址
	    proxy_set_header X-Real-IP $remote_addr;
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
    }
    # 解决前端无法访问上传的文件问题
    location /quosystem/upload/ {      # 设置一个访问的路由
   	    alias /quosystem/upload/;    # 允许通过设置的路由访问该目录下的文件
	}

注意监听端口需要添加到阿里云的安全组规则中

这里的/prod_api/指的是前端是以/prod_api/开头的请求转发到后端服务器，不同的vue项目有所不同，比较常见为/api/

设置完成后，只需在浏览器输入：服务器IP地址＋监听端口，就可以浏览到前端页面，并且访问/prod_api/的请求将被代理到后端接口。

6.重启nginx

cd /usr/local/nginx/sbin
# 重启命令
./nginx -s reload
# 停止指令
./nginx -s stop

7.设置nginx开机自启

新建一个系统服务文件

vi /etc/systemd/system/nginx.service

写入如下内容，注意文件的路径修改为自己的

[Unit]
Description=Nginx HTTP Server
After=network.target

[Service]
Type=forking
ExecStart=/usr/local/nginx/sbin/nginx
ExecReload=/usr/local/nginx/sbin/nginx -s reload
ExecStop=/usr/local/nginx/sbin/nginx -s quit
PIDFile=/usr/local/nginx/logs/nginx.pid
PrivateTmp=true

[Install]
WantedBy=multi-user.target

重载系统服务

systemctl daemon-reload

之后就可以使用下面这些命令运行nginx

# 启动
systemctl start nginx
# 允许开机自启
systemctl enable nginx
# 停止
systemctl stop nginx
# 重启
systemctl restart nginx
# 查看状态
systemctl status nginx

至此Spring Boot + Vue的前后端分离项目部署就完成了。

九、其他

1.常用Linux指令

# 终止当前进程      
Ctrl c        
# 列出java的进程（java还可以换成redis、mysql等等）  
ps -ef | grep java   
# 列出XXXX端口号的进程  
lsof -i:XXXX   
# 杀死PID进程
kill -9 PID     
# 列出当前目录下的文件
ls
# 彻底删除文件及子文件（无需确认）
rm -rf /xx/xx
# 移动文件夹或重命名
mv oldFileName newFileName  #重命名
mv /source/dir /destination/dir  #移动文件夹位置