将前后端项目合并发布部署到云服务器的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 (此链接有详细可行的安装教程)
(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加项目启动的端口号就能访问到你的项目了 共勉!