使用Docker将vue+springboot项目部署在服务器上

本文涉及的产品
云数据库 RDS MySQL,集群系列 2核4GB
推荐场景:
搭建个人博客
RDS MySQL Serverless 基础系列,0.5-2RCU 50GB
RDS MySQL Serverless 高可用系列,价值2615元额度,1个月
简介: 本文介绍新手如何使用Docker将vue+springboot项目部署在服务器上。

本文介绍新手如何使用Docker将vue+springboot项目部署在服务器上。

前言

本次使用服务器为阿里云学生免费的2核2g,应该是突发性能型t6.(提一下关于服务器的理解,阿里云ECS大概分两种,共享性和突发性能型,区别就是突发性能型有个cpu积分,运行消耗cpu积分,cpu负载越高消耗的越多,同时cpu积分也在不断上涨,但是就本次部署的项目感觉,总cpu积分达到上限后就没下降过,所以选购服务器只要负载不是特别高都不用担心积分问题,担心也可选购共享性,cpu积分详情参考阿里云突发性能实例CPU积分详解 – 阿里云百科 (aliyunbaike.com)

系统为Centos7.6

操作步骤

1.Docker环境

Dokcer功能类似虚拟机,与虚拟机有一定区别。

可以通过Docker镜像来搭建环境,比如你想在服务器上部署一个MySQL,正常你需要通过yum进行安装,过程复杂,还有可能因为网络问题迟迟安装不上;如果你想安装hadoop等大数据环境,还需要进行繁琐的配置,还有可能出各种问题。但使用Docker就不一样了,只需要使用docker pull拉取镜像,再通过docker run就构建了一个实例,MySQL或者hadoop就已经可以使用了。本质上可以理解为别人在系统上搭建好了一个MySQL环境,并把系统中不需要的功能精简了一下,你拿过来运行就能用了。

Docker安装,参考CentOS Docker 安装 | 菜鸟教程 (runoob.com)

安装完成之后就可以根据菜鸟教程中的Docker Hello World | 菜鸟教程 (runoob.com)测试一下了。

这里安装MySQL测试一下,MySQL有多个版本,可以在Docker Hub Container Image Library | App Containerization中查找,搜索MySQL就可以查看各个版本拉取镜像的命令

c317fc15769b4341a254b2342ac34436红框就是拉取镜像的命令,在命令最后比如那个:latest是指版本,不写默认就是最新,写8.0.25就是8.0.25版本。

运行命令拉取之后,通过下面命令可以查看所有镜像:

docker images

d71217451c9740f29a10d3e246acddf3下一步就是创建实例运行,输入如下命令:

docker run -itd --name mysql-test -p 3306:3306 -e MYSQL_ROOT_PASSWORD=123456 mysql:8.0.25

这里

-t: 在新容器内指定一个伪终端或终端。

-i: 允许你对容器内的标准输入 (STDIN) 进行交互。

--name:后面是实例名字。

-d:容器启动后会进入后台,此时想要进入容器,可以通过docker attach或docker exec加上空格和实例名字或id(推荐大家使用 docker exec 命令,因为此退出容器终端,不会导致容器的停止。),退出终端为exit命令。

例:

docker exec -it 243c32535da7 /bin/bash
docker attach 1e560fca3906

-p 3306:3306:映射容器服务的 3306 端口到宿主机的 3306 端口,外部主机可以直接通过 宿主机IP:3306 访问到 MySQL 的服务。

MYSQL_ROOT_PASSWORD=123456:设置 MySQL 服务 root 用户的密码。

mysql:8.0.25:末尾的这个是指镜像名字和版本,同样不写版本默认最新,本地镜像没有自动从远端拉取。

输入如下命令查看实例

docker ps -a

1ede9d01799c49319c8a664abd30a51e不加-a是查看运行中的实例。

现在阿里云服务器打开3306端口,就可以访问MySQL了,使用navicat可以连接尝试:

0e7e3339539547b0b2b1a92d46980371就可以连接使用了。

删除这个需要先停止运行:

docker stop mysql-test

删除实例是:

docker rm mysql-test

删除镜像是:

docker rmi mysql:8.0.25

2.部署springboot

部署自己的程序需要构建自己的镜像,写好springboot后,打包成一个jar文件,编写一个Dockefile文件就可以使用docker build命令构建镜像。

FROM openjdk:11
ADD cloud-factory-0.0.1-SNAPSHOT.jar app.jar
EXPOSE 9000
ENTRYPOINT ["java","-jar","/app.jar"]

from后面是环境,环境也是dokcer的镜像,这相当与依据原有镜像添加自己的东西构建新镜像,根据自己springboot项目的Java环境来写,我的是jdk11.

jar包与Dockerfile文件上传到服务器,放在同一目录下,add后面第一个是自己打完jar包后的名字,下面两行是暴露端口和运行命令。

编写完上传服务器之后在文件所在目录下运行如下命令构建镜像:

docker build -t springboot-test:v1 .

这里springboot-test:v1是镜像名字和tag(版本),后面的点是指当前目录下,如果你在别的地方运行命令就更换一下这个部分的路径。

最后使用docker run命令

docker run -itd --name springboot -p 9000:9000 springboot-test

这时项目就已经运行了。

3.部署vue

vue部署也是类似,vue可打包为dist文件:

npm run build

vue打包之后本质上就是一堆html、css……的文件,不能提供服务或直接运行,这里就需要使用nginx。

Nginx可能很多人都用过,比如使用它搭建博客等,安装后替换其下index.html即可运行自己的东西,这里便需要使用Nginx让vue运行起来。

Dockerfile如下

FROM nginx
RUN rm /etc/nginx/conf.d/default.conf
ADD default.conf /etc/nginx/conf.d/
COPY dist/ /usr/share/nginx/html/

这里提到了一个default.conf文件,用于进行一些配置,文件如下:

server {
    listen       80;
    server_name  localhost; # 修改为docker服务宿主机的IP
    location / {
        root   /usr/share/nginx/html;
        index  index.html index.htm;
        try_files $uri $uri/ /index.html =404;
    }
    error_page   500 502 503 504  /50x.html;
    location = /50x.html {
        root   html;
    }
}

然后三个文件和文件夹放在服务器同一目录下和springboot一样构建镜像运行即可。

4.Docker网络相关&前后端与MySQL通信

这里部署前需要注意修改通信的地址端口,springboot与MySQL通信需要将地址替换为服务器IP地址,vue一般通过axios通信,地址也需要修改,跨域问题部署前应该已经得到解决,如果springboot有关跨域设置限定来源的话也需要进行修改。(我在部署时就因为这个问题搞了很久,我当时使用的是自己创建一个docker的bridge网络,并将三个服务加入到这个网络中,通信地址没用IP使用的名字,下面有提到,结果忘了跨域请求这个地方发起请求的是本地浏览器,springboot:9000是访问不到的)

由于使用了Docker,所以网络会有差异,通过ifconfig查看三者网络在docker0网卡下,三者相当于在该网络下的三个服务器,访问localhost是访问不到彼此的,只能通过IP

docker0下相当于一个局域网,三者可以通过IP与彼此通信,但IP可能会变动,所以还需要通过docker run时起的名字互相通信,比如springboot通过mysql-test:3306就能访问MySQL

docker中同样可以创建网络,比如创建一个bridge模式网络:

docker network create default_network

这里使用ifconfig发现多了一个虚拟网卡,可以在创建实例时将实例加入该网络,docker run命令中加上--network default_network即可,同一局域网中的各个实例可以通过上述方式通信,也可以通过服务器IP加端口通信。

后记

第一次使用服务器,不像虚拟机一样还得跟着电脑开关机还是很方便的,这次也是第一次使用Docker。Docker还是很好用的,而且并不复杂,可以将自己写过的各种管理系统部署到服务器上,在学习大数据时,搭建hadoop、hbase等的环境也会非常方便。

部署的时候也出现了很多问题,基本就是正文第四部分提到的那些,就vue的axios那个,整了几个小时,当时还以为自己后端跨域配置错了,后来才想起来是地址设置方式错了。

本文转载自飞天加速计划,作者为软件工程大三学生:https://developer.aliyun.com/article/877206

相关实践学习
如何在云端创建MySQL数据库
开始实验后,系统会自动创建一台自建MySQL的 源数据库 ECS 实例和一台 目标数据库 RDS。
全面了解阿里云能为你做什么
阿里云在全球各地部署高效节能的绿色数据中心,利用清洁计算为万物互联的新世界提供源源不断的能源动力,目前开服的区域包括中国(华北、华东、华南、香港)、新加坡、美国(美东、美西)、欧洲、中东、澳大利亚、日本。目前阿里云的产品涵盖弹性计算、数据库、存储与CDN、分析与搜索、云通信、网络、管理与监控、应用服务、互联网中间件、移动服务、视频服务等。通过本课程,来了解阿里云能够为你的业务带来哪些帮助     相关的阿里云产品:云服务器ECS 云服务器 ECS(Elastic Compute Service)是一种弹性可伸缩的计算服务,助您降低 IT 成本,提升运维效率,使您更专注于核心业务创新。产品详情: https://www.aliyun.com/product/ecs
相关文章
|
9天前
|
前端开发 JavaScript Java
基于Java+Springboot+Vue开发的服装商城管理系统
基于Java+Springboot+Vue开发的服装商城管理系统(前后端分离),这是一项为大学生课程设计作业而开发的项目。该系统旨在帮助大学生学习并掌握Java编程技能,同时锻炼他们的项目设计与开发能力。通过学习基于Java的服装商城管理系统项目,大学生可以在实践中学习和提升自己的能力,为以后的职业发展打下坚实基础。
31 2
基于Java+Springboot+Vue开发的服装商城管理系统
|
9天前
|
前端开发 JavaScript Java
SpringBoot项目部署打包好的React、Vue项目刷新报错404
本文讨论了在SpringBoot项目中部署React或Vue打包好的前端项目时,刷新页面导致404错误的问题,并提供了两种解决方案:一是在SpringBoot启动类中配置错误页面重定向到index.html,二是将前端路由改为hash模式以避免刷新问题。
49 1
|
7天前
|
前端开发 JavaScript Java
基于Java+Springboot+Vue开发的大学竞赛报名管理系统
基于Java+Springboot+Vue开发的大学竞赛报名管理系统(前后端分离),这是一项为大学生课程设计作业而开发的项目。该系统旨在帮助大学生学习并掌握Java编程技能,同时锻炼他们的项目设计与开发能力。通过学习基于Java的大学竞赛报名管理系统项目,大学生可以在实践中学习和提升自己的能力,为以后的职业发展打下坚实基础。
21 3
基于Java+Springboot+Vue开发的大学竞赛报名管理系统
|
8天前
|
前端开发 JavaScript Java
基于Java+Springboot+Vue开发的蛋糕商城管理系统
基于Java+Springboot+Vue开发的蛋糕商城管理系统(前后端分离),这是一项为大学生课程设计作业而开发的项目。该系统旨在帮助大学生学习并掌握Java编程技能,同时锻炼他们的项目设计与开发能力。通过学习基于Java的蛋糕商城管理系统项目,大学生可以在实践中学习和提升自己的能力,为以后的职业发展打下坚实基础。
20 3
基于Java+Springboot+Vue开发的蛋糕商城管理系统
|
8天前
|
前端开发 JavaScript Java
基于Java+Springboot+Vue开发的美容预约管理系统
基于Java+Springboot+Vue开发的美容预约管理系统(前后端分离),这是一项为大学生课程设计作业而开发的项目。该系统旨在帮助大学生学习并掌握Java编程技能,同时锻炼他们的项目设计与开发能力。通过学习基于Java的美容预约管理系统项目,大学生可以在实践中学习和提升自己的能力,为以后的职业发展打下坚实基础。
21 3
基于Java+Springboot+Vue开发的美容预约管理系统
|
8天前
|
JavaScript Java 关系型数据库
毕设项目&课程设计&毕设项目:基于springboot+vue实现的在线考试系统(含教程&源码&数据库数据)
本文介绍了一个基于Spring Boot和Vue.js实现的在线考试系统。随着在线教育的发展,在线考试系统的重要性日益凸显。该系统不仅能提高教学效率,减轻教师负担,还为学生提供了灵活便捷的考试方式。技术栈包括Spring Boot、Vue.js、Element-UI等,支持多种角色登录,具备考试管理、题库管理、成绩查询等功能。系统采用前后端分离架构,具备高性能和扩展性,未来可进一步优化并引入AI技术提升智能化水平。
毕设项目&课程设计&毕设项目:基于springboot+vue实现的在线考试系统(含教程&源码&数据库数据)
|
9天前
|
前端开发 JavaScript Java
基于Java+Springboot+Vue开发的房产销售管理系统
基于Java+Springboot+Vue开发的房产销售管理系统(前后端分离),这是一项为大学生课程设计作业而开发的项目。该系统旨在帮助大学生学习并掌握Java编程技能,同时锻炼他们的项目设计与开发能力。通过学习基于Java的房产销售管理系统项目,大学生可以在实践中学习和提升自己的能力,为以后的职业发展打下坚实基础。
25 3
基于Java+Springboot+Vue开发的房产销售管理系统
|
10天前
|
前端开发 JavaScript Java
基于Java+Springboot+Vue开发的反诈视频宣传系统
基于Java+Springboot+Vue开发的反诈视频宣传系统(前后端分离),这是一项为大学生课程设计作业而开发的项目。该系统旨在帮助大学生学习并掌握Java编程技能,同时锻炼他们的项目设计与开发能力。通过学习基于Java的反诈视频宣传管理系统项目,大学生可以在实践中学习和提升自己的能力,为以后的职业发展打下坚实基础。
41 4
基于Java+Springboot+Vue开发的反诈视频宣传系统
|
8天前
|
JavaScript 前端开发 Java
一个基于 SpringBoot + Vue 的在线考试系统
【9月更文挑战第24天】这是一个基于 Spring Boot 和 Vue 构建的在线考试系统。后端采用 Spring Boot、Spring Data JPA 和 MySQL 实现快速开发和数据库操作;前端使用 Vue.js 和 Element UI 快速搭建界面。系统包括用户管理、考试管理、考试答题和成绩管理等功能模块,并设计了相应的数据库表结构。通过 RESTful API 实现前后端数据交互,支持多种题型和权限管理,适用于学校和企业等场景。
|
10天前
|
JavaScript 前端开发
vue配合axios连接express搭建的node服务器接口_简单案例
文章介绍了如何使用Express框架搭建一个简单的Node服务器,并使用Vue结合Axios进行前端开发和接口调用,同时讨论了开发过程中遇到的跨域问题及其解决方案。
12 0
vue配合axios连接express搭建的node服务器接口_简单案例
下一篇
无影云桌面