将前后端项目合并发布部署到云服务器的docker中

一、部署准备

1.ECS云服务器一台(我这里是用的阿里云服务器)

2.前后端分离项目:一个vue前端项目+一个spring后台项目

3.用到的工具 :IDEA、VScode、Navicat、Xshell、Xftp

二、 在云服务器上安装项目运行相关环境

以我这个要部署的项目为例，需要在服务器上安装:
1.java环境
2.docker
3.mysql
4.redis

以下为安装步骤

先通过xshell连接上自己的云服务器
(1)Java安装

yum -y install java-1.8.0-openjdk

安装完成后查看Java的版本

(2)安装docker
https://www.cnblogs.com/featherwit/p/12931264.html
(此链接有详细可行的安装教程)

(3)使用docker安装MySQL

docker pull mysql:latest

然后使用

docker run -p 3306:3306 --name mysql -e MYSQL_ROOT_PASSWORD=123456 -d mysql_name

去开启MySQL服务；
(前面那个mysql表示的是docker images命令中的镜像的名字，后面的mysql_name表示镜像实例的名字)

(4)使用docker安装最新的redis

docker pull redis:latest

然后使用命令

docker run --name redis -p 6379:6379 -d redis

启动redis服务

tips:1.使用docker ps命令可以查看已经启动的服务；
2.使用docker images命令查看已经安装的服务；

三、前后端项目打包

1.VScode中的vue前端项目打包

(1)注意:前端需要请求的后端api地址中的localhost需要修改为你的云服务器的IP地址

例如这里的localhost需要修改为你云服务器的IP地址
(2)项目打包配置
vue.config.js文件中:

module.exports = {
  devServer: {
    port: 8044,
    disableHostCheck: true
  }
};

(3)在终端中运行命令: npm run build

(4)最终打包成功

(5)打包出来的dist文件夹下的所有文件拷贝到后台项目的static目录下

建议:在这里先运行一下项目能否正常运行并访问前端页面
如果出现访问根路径时，显示的是后端项目接口的返回，则去后端项目中的controller层删除“/”的请求，例:

删除之后就不会报错了，这是因为后端的请求路径和前端的请求路径相冲突，后端会优先请求接口

2.IDEA中的后台项目打包

(1)maven的选择，先选择你自己安装的maven的路径

(2)在IDEA中点击右边的maven，然后先clean项目，完成后再点击package进行打包

(3)打包完成后会生成target目录，其下.jar文件就是打包好的完整的项目

四、文件布置

1.通过xftp将得到的.jar包放到云服务器上的文件夹下

2.在navicat工具中建立新连接

主机名填写你的云服务器的IP地址(公网IP)

导入你的数据库文件，建表 ，加入数据

最终运行

进入到存放jar文件的目录下，通过运行命令

java -jar xxxxx.jar

其中的jar文件是你的项目打包文件

至此，你的项目就已经在云服务器上跑起来了
但是，还需要配置云服务器的端口

这样，在浏览器中通过访问你的云服务器公网IP加项目启动的端口号就能访问到你的项目了

共勉!