将前后端项目合并发布部署到云服务器的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加项目启动的端口号就能访问到你的项目了 共勉!

经验分享 程序员 微信小程序 职场和发展