如何从零将vue+springboot项目打包部署到云服务器（亲测，图文教程超详细！！）

最新推荐文章于 2024-08-01 08:23:29 发布

程恭

最新推荐文章于 2024-08-01 08:23:29 发布

阅读量5.9k

点赞数 31

文章标签：数据库 spring boot vue.js 云服务器 linux

本文链接：https://blog.csdn.net/xiguagaizi88/article/details/111272195

版权

手把手教如何将个人项目部署到云服务器（超详细！！）

步骤目录（如云环境已搭建好可直接从第三节看起）

手把手教如何将个人项目部署到云服务器（超详细！！）
前言
一、云服务器设置
二、远程服务器环境配置
三、打包部署项目文件（vue+springboot）
四、配置访问服务器
五、购买和配置域名
总结

前言

在阅读本教程之前，各位萌新如果不想自己手动部署服务器环境，有两种方法可以快速上手：

使用别人的镜像系统来创建实例
（1）对于未购买实例的用户：
在购买界面>自定义购买>在镜像一栏>镜像市场，有非常多免费镜像提供选择

（2）对于已购买实例的用户：
登录 ECS管理控制台>在左侧导航栏，单击实例与镜像 > 实例>在顶部菜单栏左上角处，选择地域>在操作列中，选择更多 > 磁盘和镜像 > 更换操作系统

更换时，根据自己的需要选择更换类型–镜像市场，提交即可完成更换系统盘；操作系统更换大概需要10分钟。
在这里插入图片描述

注意
（2.1）实例会被分配一块系统盘，磁盘ID会更新，历史系统盘快照不能用于回滚新的系统盘。原系统盘被释放，建议操作前创建快照备份数据或手动备份数据。

（2.2）系统盘的云盘类型不变。实例的IP地址和MAC地址不变。

（2.3）手动创建的快照不受影响，旧系统盘的自动快照会自动删除

使用面板
这里推荐宝塔面板
https://developer.aliyun.com/article/738467?source=5176.11533457&userCode=ffsbbyn0

以上就是搭建环境的懒人方法啦！不过还是比较推荐自己动手来搭建环境，毕竟相比使用别人的东西，靠自己一步步搭建的东西会更有成就感，同时能让自己更加深入去了解系统的原理，命令和运行机制，从而加深印象，在更高级的diy时能够得心应手。

本文将详细演示如何完整地将一个项目部署到云服务器
开发IDE：IDEA
jdk：11
数据库：mysql-8.0（window），-5.6.39（linux）
前端框架：springboot，spring，mybatis
后端框架：vue.js
前端服务器：nigix-1.902（window），-1.6.2（linux）
后端服务器：Tomcat（springboot自带，不需要单独配置）
云服务器：阿里云（centos8.2）

一、云服务器设置

1.1 首先去购买一个云服务器，阿里或腾讯，具体步骤就不讲了

这里我买的是1核2g5m配置
在这里插入图片描述

1.2 拿到服务器后先修改密码

在这里插入图片描述

1.3 修改服务器安全组策略

在这里插入图片描述

这里说明一下
SSH：允许远程使用SSH登陆主机
HTTPS：允许使用https连接传输（我这里暂时没有备案）
Mysql：允许远程连接SQL数据库
redis：允许远程连接redis缓存数据库（本文暂时未使用redis）
RCP：启用终端服务（RDP 远程桌面）
HTTP：允许使用http连接传输

1.4 远程连接云服务器

下载xshell远程连接工具（百度直接搜）
在这里插入图片描述
安装完成之后启动

在这里插入图片描述

点击确定，看到如下提示这说明连接成功

二、远程服务器环境配置

2.1 安装jdk

自己可以到官网（https://www.oracle.com/java/technologies/javase-downloads.html）下载打包到linux上，我这里直接使用yum安装
我这里安装的是jdk11，其他版本可自行选择

(1) 将Linux系统下自带JDK（如果原先安装过，无则忽略）的删除

在这里插入图片描述

(2) JDK11的安装

属于yum命令安装jdk

# 搜索安装包
yum search java-11-openjdk
# 安装
yum install -y java-11-openjdk

完成截图
在这里插入图片描述

# 检查是否安装成功
[root@iZwz996kn383d1o4hdv3snZ ~]# java -version 
openjdk version "11.0.9" 2020-10-20 LTS

(3) 设置JAVA_HOME

ls -lr $(which java)
ls -lrt /etc/alternatives/java

在这里插入图片描述
进入配置文件

vim /etc/profile

在文件末尾添加的环境变量配置

export JAVA_HOME=/usr/lib/jvm/java-11-openjdk-11.0.4.11-1.el7_7.x86_64/bin/java
export JRE_HOME=$JAVA_HOME/jre
export CLASSPATH=$JAVA_HOME/lib:$JRE_HOME/lib:$CLASSPATH
export PATH=$JAVA_HOME/bin:$JRE_HOME/bin:$PATH

配置如图
在这里插入图片描述

# 刷新配置
[root@iZwz996kn383d1o4hdv3snZ ~]# source /etc/profile
# 检查配置是否生效，注意JAVA_HOME全部大写
[root@iZwz996kn383d1o4hdv3snZ ~]# echo $JAVA_HOME 
/usr/lib/jvm/java-11-openjdk-11.0.4.11-1.el7_7.x86_64/bin/java

2.2 安装配置MySQL

（1）下载mysql

官网下载（地址：https://downloads.mysql.com/archives/community/）
（MySQL-5.6.39下载直链：https://cdn.mysql.com/archives/mysql-5.6/mysql-5.6.39-linux-glibc2.12-x86_64.tar.gz），我这里安装是社区版的MySQL-5.6.39
在这里插入图片描述
下载到本地文件夹后，利用上传工具将压缩包放到服务器**/usr/local/**目录下，这里推荐使用winscp，可以直接拖拽很方便

嫌下载麻烦可直接用xshell自带的ftp传输

直接关闭即可

使用put命令直接将文件upload的远程服务器

sftp:/root> cd /usr/local
sftp:/usr/local> put D:\xshell6\传输安装文件\mysql-5.6.39-linux-glibc2.12-x86_64.tar.gz

（2）卸载Maria DB（若无或新买的服务器可跳过此步）

CentOS默认安装的数据库是Maria DB，我们要先将他卸载掉之后再安装MySQL。

# rpm -qa|grep maria*

查询出来已经安装了的Maria DB

# rpm -e --nodeps 文件名

注：文件名为上面查询出来的文件名，如果有多个执行多次即可。然后再重新执行一下第1步的查询命令确认是否都卸载完成。

删除etc目录下的my.cnf

# rm /etc/my.cnf

（3）安装前准备

创建MySQL用户组

# groupadd mysql

添加MySQL用户并添加到MySQL用户组

# useradd -g mysql mysql

将下载好的压缩包移动到/usr/local/ 目录下，如果已经在目录下则不用处理

# mv mysql-5.6.39-linux-glibc2.12-x86_64.tar.gz /usr/local/

解压安装包

# tar -zxvf mysql-5.6.39-linux-glibc2.12-x86_64.tar.gz

如果是xz包（后缀为tar.xz），则命令为

# tar -xJf mysql-5.6.39-linux-glibc2.12-x86_64.tar.gz

将解压后的文件夹重命名为mysql

# mv mysql-5.6.39-linux-glibc2.12-x86_64 mysql

（4）配置my.cnf文件

将/usr/local/mysql/support-files路径下的my-default.cnf文件拷贝到/etc/my.cnf命名为my.cnf

[root@localhost support-files]# cp my-default.cnf /etc/my.cnf

配置/etc目录下的my.cnf文件，直接在末尾添加

# vim /etc/my.cnf

[mysql]
# 设置mysql客户端默认字符集
default-character-set=utf8
socket=/var/lib/mysql/mysql.sock
[mysqld]
skip-name-resolve
#设置3306端口
port = 3306  
socket=/var/lib/mysql/mysql.sock
# 设置mysql的安装目录
basedir=/usr/local/mysql
# 设置mysql数据库的数据的存放目录
datadir=/usr/local/mysql/data
# 允许最大连接数
max_connections=1000 
# 服务端使用的字符集默认为8比特编码的latin1字符集
character-set-server=utf8
# 创建新表时将使用的默认存储引擎
default-storage-engine=INNODB
lower_case_table_name=1 
max_allowed_packet=16M

（5）安装mysql

安装Data:Dumper模块

# yum -y install autoconf

进入到mysql文件目录下，执行如下命令

# cd /usr/local/mysql
修改当前目录拥有者为mysql用户
# chown -R mysql:mysql ./ 
安装数据库
# ./scripts/mysql_install_db --user=mysql --basedir=/usr/local/mysql/ --datadir=/usr/local/mysql/data/

修改当前data目录的拥有者为mysql用户

# chown -R mysql:mysql data

（6）配置MySQL

授予my.cnf最大权限

# chown 777 /etc/my.cnf

设置MySQL自启动，复制启动脚本到资源目录（目的想实现mysqld -install这样开机自动执行效果，/etc/init.d/ 目录等效于注册表）

# cp ./support-files/mysql.server /etc/rc.d/init.d/mysqld

将mysqld服务加入到系统服务

# chkconfig --add mysqld

检查mysqld服务是否已经生效

# chkconfig --list mysqld

出现如下结果说明生效
在这里插入图片描述
创建/var/lib/mysql文件，由于MySQL服务不具备目录 /var/lib/mysql 的写入权限，无法生成mysql.sock文件，服务启动时会无法找到该文件。所以要给目录 /var/lib/mysql 付予写入权限或者最大权限

# mkdir /var/lib/mysql
# chmod 777 /var/lib/mysql

将mysql的bin目录加入PATH环境变量，编辑 ~/.bash_profile文件

# vim ~/.bash_profile

在文件最后添加如下信息：指定环境变量启动程序位置，如果已经存在export命令，可以先删除掉相关内容，直接替换成下面的命令。

export PATH=$PATH:/usr/local/mysql/bin

执行下面的命令使修改的内容立即生效

# source ~/.bash_profile

启动mysqld服务

# service mysqld start

以root账户登录mysql,默认是没有密码的，要输入密码的时候直接回车即可。

# mysql -u root -p

设置root账户密码为root（也可以修改成你要的密码）

mysql>use mysql
mysql>update user set password=password('root') where user='root' and host='localhost';
mysql>flush privileges;

设置远程主机登录，使用下面命令查看和添加，注意下面的your username 和 your password改成你需要设置的用户和密码

-查看用户
select Host,User,Password from mysql.user;
+-------------------------+------+-------------------------------------------+
| Host                    | User | Password                                  |
+-------------------------+------+-------------------------------------------+
| localhost               | root | *81F5E21E35407D884A6CD4A731AEBFB6AF209E1B |
| izwz996kn383d1o4hdv3snz | root |                                           |
| 127.0.0.1               | root |                                           |
| ::1                     | root |                                           |
| localhost               |      |                                           |
| izwz996kn383d1o4hdv3snz |      |                                           |
+-------------------------+------+-------------------------------------------+
6 rows in set (0.00 sec)

（嫌麻烦以下步骤可省略）
创建用户
create user test identified by '123456';
分配权限
grant all privileges on *.* to 'test'@'%'identified by '123456' with grant option;
刷新
flush privileges ;
修改指定用户密码
update mysql.user set password=password('111111') where User="test" and Host="localhost";
删除用户
delete from user where User='test' and Host='localhost';

（7）连接MySQL

这里推荐Navicat，超级好用，具体下载方法自己搜吧
选择连接在这里插入图片描述
选择ssh连接，填写相关内容后测试连接，成功后确定

成功后就能够在侧边栏看到所连接的远程数据库啦
在这里插入图片描述

（8）如果连接不了

如果还是拒绝访问，有可能是你的防火墙没有关闭或部分端口没开启，可以进行如下配置：

查看已开放的端口(默认不开放任何端口)
[root@localhost ~]#firewall-cmd --list-ports
查询端口号80是否开启！
查询端口号
[root@localhost ~]#firewall-cmd --query-port=80/tcp
开启80端口
[root@localhost ~]#firewall-cmd --zone=public --add-port=80/tcp --permanent
用同样的方法开启3306端口
重启防火墙
[root@localhost ~]#firewall-cmd --reload
停止防火墙
[root@localhost ~]#systemctl stop firewalld.service
禁止防火墙开机启动
[root@localhost ~]#systemctl disable firewalld.service

还有别忘了在云服务器安全组策略设置开放3306端口哦（查看第一节）

2.3 安装nginx（不同版本会有些坑）

（1）下载安装依赖包

yum install -y gcc-c++
yum install -y pcre pcre-devel
yum install -y zlib zlib-devel
yum install -y openssl openssl-devel

或者直接一句命令

yum install -y gcc-c++ pcre pcre-devel zlib zlib-devel zlib zlib-devel openssl openssl-devel

（2）下载nginx的tar包，到/usr/local目录下

cd /usr/local
wget http://nginx.org/download/nginx-1.6.2.tar.gz

（3）安装完之后解压

tar zxvf nginx-1.6.2.tar.gz

（4）进入nginx目录，执行命令

cd /usr/local/nginx-1.16.2
./configure

（5）编译安装

在/usr/local/nginx-1.16.2下执行以下命令

make
make install

这步要注意，高版本linux系统安装会出现一些报错！！
我的版本是centos8.2，安装是出现如下报错，然后并没有找到sbin目录的启动文件
在这里插入图片描述
解决方法：
在nginx安装文件夹（即/usr/local/nginx-1.6.2）下输入

vim src/os/unix/ngx_user.c

在末行模式下/cd.current找到如下红框，注释掉它
在这里插入图片描述
然后进入解压目录的objs文件夹下下，编辑Makefile文件，将-Werror删除

vim /usr/local/nginx-1.6.2/objs/Makefile

在这里插入图片描述
回到解压目录下再次执行

# make
# make install
# whereis nginx
nginx: /usr/local/nginx

会发现不报错，而且在/usr/local目录下创建了nginx文件夹，此时也有sbin目录了
这是我安装是会出现的问题，折腾了不少时间，如果你没有出现这些问题，恭喜你，这步可以不看

（6）启动nginx

测试配置文件

注意，该路径非/usr/local/nginx-1.6.1
# cd /usr/local/nginx
# sbin/nginx -t

出现以下提示说明配置成功
在这里插入图片描述
常用命令
//启动命令
安装路径下的/nginx/sbin/nginx
//停止命令
安装路径下的/nginx/sbin/nginx -s stop
或者 : nginx -s quit
//重启命令
安装路径下的/nginx/sbin/nginx -s reload
//查看进程命令
ps -ef | grep nginx
至此nginx安装结束

2.4 安装Tomcat（springboot内置，暂时不写了）

2.5 安装redis（有空再补）

三、打包部署项目文件（vue+springboot）

3.1 打包部署vue到服务器

（1）修改conf配置

修改本地config配置，不然访问静态资源会出错
在config/index修改如下：
在这里插入图片描述
如果使用了element控件，则在build/utils修改如下：

在文件目录下用terminal或命令行运行

npm run build

待其构建打包好之后会在根目录生成dist文件，如图
在这里插入图片描述
将dist文件上传到服务器springboot的jar包同目录下，方法略

3.2 打包部署springboot到服务器

（1）本地准备

打包方式有两种，一种是打包成war包，这个时候需要在云服务器中部署tomcat才能够运行。
第二种是打包成jar包，这种由于springboot内置了tomcat，所以只需要服务器上有jdk就可以了。需要注意的是springboot最低需要jdk1.8及以上版本。
我们之前已经安装了jdk11，现在我们打成jar包，省去了安装Tomcat的麻烦

首先在pom.xml最外层中加入依赖

    <build>
        <plugins>
            <plugin>
                <groupId>org.springframework.boot</groupId>
                <artifactId>spring-boot-maven-plugin</artifactId>
            </plugin>
        </plugins>
        <resources>
            <resource>
                <!-- 指定resources插件处理哪个目录下的资源文件 -->
                <directory>${basedir}/src/main/webapp</directory>
                <!-- 需要将资源文件放到该目录下才能访问 -->
                <targetPath>META-INF/resources</targetPath>
                <includes>
                    <include>**/**</include>
                </includes>
            </resource>

            <resource>
                <directory>${basedir}/src/main/resources</directory>
            </resource>
        </resources>
    </build>
    <!-- 打包成jar包 -->
    <packaging>jar</packaging>

如图
在这里插入图片描述
配置端口和主机名，防止有可能发生本地访问但发布到服务器却访问不了的情况

在其自动下载加载完之后，点击package打包

在这里插入图片描述
打包完会在target目录下出现jar包，如图

在部署到服务起之前，先试着本地访问
进入jar包所在目录下cmd运行

java -jar 包名.jar

见到下图说明顺利运行在这里插入图片描述

（2）在服务器下运行

将jar包通过发送到服务器中（略过）
查看端口使用情况，防止被占用
//netstat -anp | grep <端口号>

netstat -anp | grep 8082

如果被占用了，（没被占用的时候不显示任何东西），查看占用端口的PID

sudo lsof -i:8800 //sudo lsof -i:<端口号>

kill掉占用的进程，再执行netstat -anp | grep <端口号>看是否还占用

sudo kill -9 进程号

进入jar包所在的目录下touch创建一个start.sh和log.txt脚本文件。

touch start.sh log.txt

用vim向start.sh中添加字段： java -jar 包名.jar > log.txt

目的是让打印的信息重定向到log.txt中去
给这个start.sh 提权，然后用nohup指令不间断地运行

# chmod 777 start.sh //赋予最高权限
# nohup ./start.sh & //不间断运行文件内的指令

查看端口，发现已经被使用，说明已经启动
在这里插入图片描述

四、配置访问服务器

（1）配置nginx

进入配置文件

cd /usr/local/nginx/conf
vim nginx.conf

配置如图
3VhZ2Fpemk4OA==,size_16,color_FFFFFF,t_70)
启动nginx

/nginx/sbin/nginx

正常的话前台服务可以顺利使用公网ip访问了
如图
在这里插入图片描述

（2）启动后端服务

进入jar所在的目录，运行我们刚才配置的脚本

./start.sh

查看日志文件log.txt，正常即可顺利启动
在这里插入图片描述
这个时候就可以尝试使用浏览器查看整体部署情况啦！！

一些小坑

配置后台时当时可是踩了不少坑，

启动项目但无论怎样都连接后台
查看端口时发现启动主机名（即ip）是空的

解决：在打包jar包前把主机名也写上，别只写端口，参考3.2>(1)
配置的后台端口后，发现还是连接不上
查看log.txt，后端没动静，说明可能是nginx代理问题
查看请求头，发现不知怎么就请求到http://公网ip/api去了，我本来项目里配置请求的是http://localhost:8888/api，可能是我vue配置问题,懒得再重新打包了，我当时索性把后端域放在80端口代理下了，不过这样需要配置响应头向alloworigin设为前台的域，不然将后台端口直接暴露在公网下很危险
代理解决了，在次连接时，发现可以连接，但却报500错误
解决：查看log.txt，如图

数据库拒绝我访问，原因是访问主机名不正确
解决：在刚安装mysql时，系统会默认提供4种host下得root用户，如下图所示

这些root用户默认都没有密码，我们在使用时会根据需要来设置密码。通常来讲，大家都认为localhost和127.0.0.1相同，因此之前我们设置localhost的密码以后，也认为在127.0.0.1上也能用该密码进行登录，但实际上就会遇到我们题目中提到的问题。而造成这个问题出现的原因是：在mysql中，在选择127.0.0.1时，是通过TCP/IP协议连接到本机的；而在选择localhost时，是通过Unix Socket连接到本机的。因此，需要为127.0.0.1设置一个密码。

[root@iZwz996kn383d1o4hdv3snZ nginx]# mysql -u root -p
Enter password: 

mysql> use mysql
Reading table information for completion of table and column names
You can turn off this feature to get a quicker startup with -A

Database changed
mysql> update user set password=password('root') where user='root' and host='127.0.0.1';
Query OK, 1 row affected (0.00 sec)
Rows matched: 1  Changed: 1  Warnings: 0

mysql> flush privileges;
Query OK, 0 rows affected (0.02 sec)

注意：所有配置文件修改之后都要重启，不然会不生效

五、购买和配置域名

持续更新…

总结

总的来说，这次配置服务器是我一步一个坑走过来的，每一步都是相对比较细致、从0开始的配置流程，跟着步骤走肯定能配置成功，希望这篇服务器配置教程对你有所帮助，如果你能从中有所收获，希望给作者留个赞鼓励一下：）。

程恭

关注

31
点赞
踩
121

收藏

觉得还不错? 一键收藏
4
评论
如何从零将vue+springboot项目打包部署到云服务器（亲测，图文教程超详细！！）

手把手教如何将个人项目部署到云服务器（超详细！！）步骤目录手把手教如何将个人项目部署到云服务器（超详细！！）前言一、云服务器设置1.1 首先去购买一个云服务器，阿里或腾讯，具体步骤就不讲了1.2 拿到服务器后先修改密码1.3 修改服务器安全组策略1.4 远程连接云服务器二、远程服务器环境配置2.1 安装jdk(1) 将Linux系统下自带JDK（如果原先安装过，无则忽略）的删除(2) JDK11的安装(3) 设置JAVA_HOME2.2 安装配置MySQL（1）下载mysql（2）卸载Maria DB
复制链接

扫一扫