手牵手教Docker部署Springboot+vue ,全过程十分详细,轻松完成项目部署(简单,高效,通用)
手把手教Docker部署Springboot+vue ,详细全过程,轻松完成项目部署(简单,高效)
上线前准备
腾讯云的服务器,服务器安装好docker 和docker-compose
最好事先了解技术
- nginx
- docker-compose
整体编排
后端部署前期工作
如图所示编写docker-compose.yml文件和Dockerfile
Dockerfile文件
代码如下
FROM openjdk:8-jre #指定jdk 版本
EXPOSE 8082 #部署后端暴露端口
ADD wu-generator-master.jar app.jar #将编译后wu-generator-master.jar 命名为app.jar
RUN bash -c 'touch /app.jar' #对照上面app.jar
ENTRYPOINT ["java", "-jar", "/app.jar", "--spring.profiles.active=pro"] #对照自己上面的命名,重点指定加载pro.yml文件
本来是from java:8的,由于禁用了又想用8就选择了openjdk8
spring.profiles.active部署指定运行yml文件
由于上面我们知道需要pro.yml 文件()
application-pro.yml
修改了两个地方mysql 和redis 的主机地址,用mysql和redis 字符串代替,因为后面部署时候mysql 和redis 容器启动会将ip 地址赋予他们
如何赋予呢?继续引出下一个文件docker compose.yml
server:# 端口port: 8082spring:# 数据源配置datasource:driver-class-name: com.mysql.cj.jdbc.Driverurl: jdbc:mysql://mysql:3306/attendance?useUnicode=true&characterEncoding=UTF-8&serverTimezone=Asia/Shanghaiusername: rootpassword: 123456redis:# redis服务器host: redis# 服务器端口号port: 6379# 密码 没有则可以不填password: "000415"# 选择哪个库,默认库为0database: 0
docker compose.yml
version: "3"
services:nginx: # 服务名称,用户自定义image: nginx:latest # 镜像版本ports:- 80:80 # 暴露端口volumes: # 挂载- /root/nginx/html:/usr/share/nginx/html- /root/nginx/nginx.conf:/etc/nginx/nginx.confprivileged: true # 这个必须要,解决nginx的文件调用的权限问题mysql:image: mysql:8.0.23ports:- 3306:3306environment: # 指定用户root的密码- MYSQL_ROOT_PASSWORD=123456redis:image: redis:latestwu-generator-master:image: wu-generator-master:latestbuild: . # 表示以当前目录下的Dockerfile开始构建镜像ports:- 8082:8082depends_on: # 依赖与mysql、redis,其实可以不填,默认已经表示可以- nginx- mysql- redis
上面文件大体解释已经有了,下面继续分析
关于nginx 挂载
- 后面会在服务器新建/root/nginx/html ,在html 目录下放前端代码,/usr/share/nginx/html 容器默认地址不用改变。
- - /root/nginx/nginx.conf:/etc/nginx/nginx.conf 宿主机的conf 映射到容器conf地址
- wu-generator-master :这个是我的jar 名字 剩下直接对号入座就可以了
后端打包
wu-generator-master 自己的项目名字
<build><finalName>wu-generator-master</finalName><plugins><plugin><groupId>org.springframework.boot</groupId><artifactId>spring-boot-maven-plugin</artifactId><configuration><excludes><exclude><groupId>org.projectlombok</groupId><artifactId>lombok</artifactId></exclude></excludes></configuration></plugin></plugins>
</build>
打包文件放在target
服务器前期准备
上面说到需要新建nginx 的挂载目录
mkdir nginx
touch nginx.conf
mkdir html
第一个就是nignx.conf
前端准备
前端有很多不一样有的人是这样的,我这里列几种请求路径
假设后端的接口是http://localhost:8082
第一种
axios.defaults.baseURL = "http://localhost:8082"使用$axios.get()
如果访问登陆http://localhost:8082/login
第二种使用代理
在请求前缀加了个api ,代理到8082端口,因为前端项目占用一个端口
如果我们访问路径http://localhost:8081/api/login,会代理成http://localhost:8082/login
let base = '/api';
//传送json格式的post请求
export const postRequest = (url, params) => {return axios({method: 'post',url: `${base}${url}`,data: params})
}
vue.config.js
module.exports = {devServer: {//端口号port: 8081,//自动打开浏览器open: true,// 配置代理 proxy: {"/api": {target: 'http://localhost:8082', // 是否改变域名changeOrigin: true, // 代理websocketsws: true,// 路径重写pathRewrite: {"/api": "/"},}},}
};
上面两种nginx 配置文件不一样
第一种配置文件
#user root;
worker_processes 1;
events {worker_connections 1024;
}
http {include mime.types;default_type application/octet-stream;sendfile on;keepalive_timeout 65;server {listen 80;server_name 43.123.42.64; #服务器地址location / {root /usr/share/nginx/html; try_files $uri $uri/ /index.html last; # 避免404index index.html index.htm;}error_page 500 502 503 504 /50x.html;location = /50x.html {root html;}}
}
第二种配置文件,为什么这里使用代理,因为本地代理生产环境会失效,只能用于开发环境
#user root;
worker_processes 1;
events {worker_connections 1024;
}
http {include mime.types;default_type application/octet-stream;sendfile on;keepalive_timeout 65;server {listen 80;server_name 43.123.42.64;location / {root /usr/share/nginx/html;try_files $uri $uri/ /index.html last; #避免404index index.html index.htm;}#ssl配置省略location /api {rewrite ^.+api/?(.*)$ /$1 break;proxy_pass http://43.123.42.64:8082; # 即需要代理的IP地址proxy_redirect off;proxy_set_header Host $host;proxy_set_header X-Real-IP $remote_addr;proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;}error_page 500 502 503 504 /50x.html;location = /50x.html {root html;}}
}
将上面属于自己的配置文件内容粘贴在服务器的nginx.conf
前端打包
使用命令
npm run build
将dist 压缩,拖到服务器hmtl 目录下 进行解压
unzip dist.zipmv dist/* .
rm -rf dist*
这样文件就是
前端也迁移到服务器了,剩下就是整体编排了
正式部署
前提,需要将打包得jar 文件,还有之前编写的docker-compose.yml文件和Dockerfile 都放到根目录
这样就是下面的样子了
根目录执行
docker-compose up -d
如果运行成功,有四个容器,如果少一个就是运行错误
查看容器日志
docker logs 容器号
#清楚所有容器,从来
docker rm -vf $(docker ps -aq)
最后记得连接数据库,增加数据
我遇到的问题
- 405 Not Allowed
- 404
- We’re sorry but template doesn’t work properly without JavaScript enabled.Please enable it to continue.
手牵手教Docker部署Springboot+vue ,全过程十分详细,轻松完成项目部署(简单,高效,通用)相关推荐
- 手牵手教你写代码,从入门到精通
如果说到什么是好代码,我们肯定都能说出一堆规则,例如使用一致的格式和缩进.使用清晰的变量名和方法名.在必要时提供文档与注释.不要过度精简代码等等. 但是对于什么是烂代码,你有比较清晰的认识吗? 在 G ...
- 部署springboot+vue项目文档(若依ruoyi项目部署步骤)
部署springboot+vue项目文档(若依ruoyi项目部署步骤) 一:部署linux + nginx 二:部署windows + tomcat(无nginx) 三:解决调用第三方api如百度地图 ...
- 阿里服务器部署springboot+vue前后端分离项目
服务器部署springboot+vue前后端分离项目 最近刚刚在实习熟悉公司的业务,所有尝试着自己将项目部署到服务器上.本次部署的项目是Spring Boot+Vue前后端分离项目,后端使用的技术有M ...
- SpringBoot+vue前后端分离博客项目
SpringBoot+vue前后端分离博客项目 Java后端接口开发 1.前言 2.新建Springboot项目 3.整合mybatis plus 第一步:导入jar包 第二步:然后去写配置文件: 第 ...
- Springboot Vue个人简历网站系统java项目源码
大学生的就业问题已经成为高校人才培养的一个现实性课题.大学生的就业工作,是一项事关社会和谐发展.高校改革和稳定.大学生切身利益的重要工作.研究大学生的择业行为,培养大学生的正确择业观,做好全员.全程. ...
- Springboot+vue 增删改查的小项目
Springboot+vue 增删改查的小项目 文章目录 Springboot+vue 增删改查的小项目 前言 源码 1. 介绍 2.核心功能 3.软件架构 3.1 目录结构 4.项目流程 4.1导入 ...
- 分享一个SpringBoot+Vue豆宝社区手把手免费项目实战视频教程
豆宝社区项目实战视频教程简介 本项目实战视频教程全部免费,配套代码完全开源.手把手从零开始搭建一个目前应用最广泛的Springboot+Vue前后端分离多用户社区项目.本项目难度适中,为便于大家学习, ...
- 基于SpringBoot+Vue车牌识别的智能停车场项目源码
List item ##基于SpringBoot+Vue车牌识别的智能停车场项目项目说明 智能停车场管理系统在住宅小区.大厦.单位的应用越来越普遍.而人们对停车场管理的要求也越来越高,智能化程度也越来 ...
- 使用Docker部署SpringBoot+Vue博客系统
点击上方 好好学java ,选择 星标 公众号 重磅资讯.干货,第一时间送达 今日推荐:硬刚一周,3W字总结,一年的经验告诉你如何准备校招! 个人原创100W+访问量博客:点击前往,查看更多 在今年年 ...
最新文章
- ​使用端到端立体匹配网络进行单次 3D 形状测量,用于散斑投影轮廓测量
- sohu邮箱outlook设置_Outlook2016如何配置QQ邮箱详细步骤
- 有几个人会用计算机,怎么知道我家的wifi有几个人在使用
- struts2,jsp,freemarker编程小技巧
- 【渝粤教育】国家开放大学2018年春季 0004-22T有机合成单元反应 参考试题
- linux centos/redhat mysql8.0安装(汇总贴)
- Ubuntu外观美化安装WPS
- 小白程序员的成长之路《时间管理大师》
- 操作系统高响应比优先调度算法模拟实验
- iPhone 抓包工具Charles使用
- LaTex 插入超链接
- STL 自定义sort 前缀和差分练习
- docker 安装 Nginx 并配置反向代理
- Android之手机电池电量应用
- Android M新控件之FloatingActionButton,TextInputLayout,Snackbar,TabLayout的使用
- 视频转动漫软件有哪些?小编亲测6款工具,1秒穿越漫画场景
- VS编译器程序运行窗口一闪而过?教你一招!
- 感染了Arp欺骗病毒(木马)
- OPENCV图片数字识别
- 开放环境下的群智决策:概念、挑战及引领性技术