从零到一部署、发布和上线一个SpringBoot+VUE项目

1、服务器准备

1.1、购买服务器

购买服务器是为了最终部署完成之后可以通过外网访问，如果只是单纯想练手的话不买也可以下载一个：VMware Workstation Pro。用虚拟机也可以。

建议大家去阿里云，新人的话是免费给三个月的试用服务器，首页应该就可以看到，点进去按照步骤操作即可，错失机会的可以用家人朋友的账号，能白嫖就白嫖。

如果为了长期使用，可以等618或双十一的时候去买华为云或者阿里云的，会比较便宜，比如我的服务器就是618在华为云买的，35块钱一年还送域名，很合适了。

总之，我们需要一个CentOS虚拟机（实际上Ubuntu也可以，或者其他主流虚拟机都可以，如果果只是单纯部署则不需要可视化界面，Ubuntu还是更适合嵌入式），我的CentOS版本是8.0，大家可以自行选择合适的版本。关于相关配置可参考云服务器购买平台相关资料。

购买服务器参考：如何购买一台云服务器-CSDN博客

1.2、下载JDK

我们在使用shell连接工具连接上服务器后：

输入命令：

yum install -y java-1.8.0-openjdk

进行安装jdk，我这里是1.8版本，可自行选择适合自己的版本。

回车可以看到已经开始下载了：

然后输入：

java -version 

可以看到已经安装完成，已经显示了版本。

1.3、下载docker

首先更新一下yum包：

yum -y update

然后正式安装docker

可以先看一下现在有没有docker

如果之前已经有的话就不用安装了，或者卸载掉，重新安装，卸载命令：

yum remove docker docker-common docker-selinux docker-engine

 安装docker的依赖环境：

yum install -y yum-utils device-mapper-persistent-data lvm2

 完成，然后我们安装docker-ce

yum -y install docker-ce

 安装成功：

如果报错：

则更换更稳定的docker源：

dnf config-manager --add-repo=https://mirrors.aliyun.com/docker-ce/linux/centos/docker-ce.repo

然后重新安装：

dnf install -y docker-ce --nobest 

安装完成后，检查是否安装成功：

docker -v

ok，安装完成，我们接下来启动docker：

systemctl start docker

查看是否启动成功：

systemctl status docker 

 可以看到是启动状态，然后按ctrl+c退出即可。

设置docker开机自启：

systemctl enable docker 

 虽然云服务器一直是启动状态，但是为了防止你修改服务器后重启服务器，还是设置上比较好。

docker安装到此结束。

1.4、配置docker

1.4.1、docker安装MySQL

首先查看下可安装的镜像：

docker search mysql

 接下来拉取镜像（拉取指定5.7版本）：

docker pull mysql:5.7

注意：若想拉取最新版本使用：docker pull mysql

如果出现以下情况：

是因为镜像源是国外或者镜像源太老了，更换镜像源即可，参考：更换CentOS中docker的镜像源-CSDN博客

拉取完毕,检查下：

docker images

就是拉取成功了，如果拉取不成功，参考上面连接换一下镜像试一下。

MySQL镜像拉取完毕，现在做启动容器前期准备。

首先创建一个新的 Docker 卷，由于Docker 容器原则上是短暂的，如果容器被删除，任何数据或配置都可能会丢失。然而，Docker 卷提供了一种机制来保存在 Docker 容器内创建的数据。它们是 Docker 用于存储 Docker 容器持久数据的首选机制。

docker volume create mysql-data

我们将会创建一个名叫mysql-data的新卷。 

查看现有的卷：

docker volume ls

现在启动容器并挂载在刚刚创建的卷中：

docker run -d --restart=always --name=mysql-server -p 3306:3306 -v mysql-data:/var/lib/mysql -e MYSQL_ROOT_PASSWORD=your-pwd mysql:5.7

注：将以上命令中的‘your-pwd’换成你想设置的数据库连接密码

 创建成功，我们检查一下：

docker ps

 现在连接下数据库，看是否启动成功：

点击测试连接

提示连接成功（失败往下划），随便进行一个操作：

create database project

可以看到也是成功了，至此数据库配置完成。

数据库连接失败解决方案：docker拉取MySQL后数据库连接失败解决方案-CSDN博客

1.4.2、安装nginx

docker pull nginx

检查是否拉取成功:

docker images 

 创建一个文件夹(后续直接把前端vue打包好的dist文件夹扔进去就行)：

mkdir /home/nginx

mkdir/home/nginx/dist

 然后挂载部署容器：

 docker run -d -p 80:80 --name nginx  -v /home/nginx/dist:/usr/share/nginx/html --restart=always nginx

检查容器是否启动成功：

docker ps 

此时使用浏览器输入服务器域名可访问到nginx：

 

1.4.3、安装Redis（如果需要）

拉取redis

docker pull redis

查看是否成功：

docker images

 

启动容器： 

docker run \
-d \
--name redis \
-p 6379:6379 \
-v /home/redis/data:/data \
-v /home/redis/conf/redis.conf:/etc/redis/redis.conf \
redis /etc/redis/redis.conf 

 

 检查：

docker ps

 至此基础需求配置已完成，现在我们打包部署项目。

2、项目准备

2.1、前端：

首先想必各位已经有自己的前端代码，代码部分不再赘述，我我们在前端文件夹下执行打包命令：

npm run build

 

看到done就是打包成功了：

这时候再看我们的项目目录：

已经多出了一个dist文件夹。

然后直接把dist文件夹里面的内容复制到我们服务器路径 ：/home/nginx/dist 文件夹下即可：

然后重启下docker中nginx：

docker restart nginx

然后在浏览器中输入服务器域名：

可以看到，前端的界面已经可以展示出来了（404是因为没部署后端，界面有自动展示图片的功能，是动态的，所以就报错，主要是可以展示出界面就可以了！）

2.2、后端：

后端我们用maven进行打包：

选中这三项即可（按住CTRL然后鼠标左键点击即可多选），然后点运行：

执行完毕：

打开项目目录：

打好的包就在target文件夹下：

我们把包上传到服务器中，首先创建一个文件夹：

mkdir /home/java

然后把包扔进去：

创建日志文件：

mkdir home/java/logs

然后我们启动包：

 nohup java -jar /home/java/vue-0.0.1-SNAPSHOT.jar >/home/java/logs/202408012log.txt &

 这行命令的意思是：启动tar包，并将日志输出并记录到java/logs文件夹下的20240812log.txt中，文件名可以随便改，最后的&符号不能丢！

然后我们打开日志文件查看信息：

可以看到已经正常启动了。

这时候已经成功了99%了。

2.3、配置nginx

这时候虽然前后端都已经部署完毕，但是由于vue项目在打包的时候，并不会把解决跨域的配置文件打包进去，因此，我们需要使用nginx的代理，将前后端用代理的方式进行跨域发送请求。

参考：解决Vue项目部署到服务器之后前端向后端发送请求报错404的问题（centos使用docker实现nginx的反向代理）_前后分离前端访问后端404-CSDN博客

至此，全部完成，其中有几个连接跳转，希望大家不要见怪，每一个连接都是我自己的文章，只是因为之前既然发布了相同内容的文章，就不占用大量篇幅了，因为上面几个都是报错的解决方法，并不是所有人都会遇到那些报错，因此不在重复赘述，望大家理解。过后我会基于本文更一篇如何实现一键打包、一键部署，会实现更加方便的部署项目。

最后的最后，感谢可以看到最后， 文章略显稚嫩，恳求各位批评指点。