SpringBoot+Vue前后端分离项目在Linux系统中基于Docker打包发布,并上传镜像到阿里镜像私仓

文章目录

  • SpringBoot+Vue前后端分离项目在Linux系统中基于Docker打包发布,并上传镜像到阿里镜像私仓
  • 一、Java项目基于Docker打包发布
    • 1.打包应用,将打好的jar包放到我们的linux系统中
    • 2.新建dockerfile
    • 3.打包镜像
    • 4.测试运行
    • 5.上传镜像到阿里云免费私仓
  • 二、Vue项目打包到docker镜像
    • 1.编译打包前端项目将打包生成的dist文件夹复制到咱们的wms-web文件夹内
    • 2 前端项目 nginx的配置文件default.conf 和 dockerfile
    • 3.构建镜像(同后端)
    • 4.运行测试

SpringBoot+Vue前后端分离项目在Linux系统中基于Docker打包发布,并上传镜像到阿里镜像私仓

一、Java项目基于Docker打包发布

1.打包应用,将打好的jar包放到我们的linux系统中

在这里插入图片描述

//跳过测试类,更快打包。也可以直接双击侧边栏maven里面的package打包
mvn clean package -DskipTests

在这里插入图片描述
将打好的jar包放到咱们opt目录下的自定义文件夹内
在这里插入图片描述

2.新建dockerfile

FROM  openjdk:8
#设置工作目录
WORKDIR  /opt
#COPY  wms-app-1.0-SNAPSHOT.jar /workspace/app.jar
ADD  wms-app-1.0-SNAPSHOT.jar app.jar
#配置容器暴漏的端口
EXPOSE 8080
#查看是否已经copy进去
RUN  ls 
#java App
ENTRYPOINT  ["java","-jar","app.jar"]

在这里插入图片描述

3.打包镜像

docker build -t wmsapp:v1 .
//最后有一个点不要忘了

在这里插入图片描述
打包成功后
在这里插入图片描述

4.测试运行

–rm 代表退出之后,容器移动删除

//指定在Linux宿主机3999端口运行,这样可以在电脑主机浏览器进行访问
docker run -d -p 3999:8080 wmsapp:v1

可以看到成功启动了服务
在这里插入图片描述

5.上传镜像到阿里云免费私仓

阿里云免费私仓
创建好自己的镜像仓库后会显示操作指南
在这里插入图片描述

身份登录

$ docker login --username=fpl1116 registry.cn-beijing.aliyuncs.com

在这里插入图片描述
将镜像推送到Registry

$ docker tag [ImageId] registry.cn-beijing.aliyuncs.com/fpl-erp/wms-project:[镜像版本号]
$ docker push registry.cn-beijing.aliyuncs.com/fpl-erp/wms-project:[镜像版本号]

在这里插入图片描述

可以在镜像仓库中进行查看
在这里插入图片描述

拉取镜像

$ docker pull registry.cn-beijing.aliyuncs.com/fpl-erp/wms-project:[镜像版本号]

二、Vue项目打包到docker镜像

1.编译打包前端项目将打包生成的dist文件夹复制到咱们的wms-web文件夹内

npm run build

在这里插入图片描述

2 前端项目 nginx的配置文件default.conf 和 dockerfile

default.conf

upstream wms-app {server 192.168.11.87:3999 ;
}
server {listen       80;server_name  localhost;#access_log  /var/log/nginx/host.access.log  main;location / {root   /usr/share/nginx/html;index  index.html index.htm;try_files $uri $uri/ /index.html; #解决单页面找不到路径问题 404}location /api {proxy_pass http://wms-app;  #可以配置多个下游服务,具有负载功能}#error_page  404              /404.html;# redirect server error pages to the static page /50x.html#error_page   500 502 503 504  /50x.html;location = /50x.html {root   /usr/share/nginx/html;}# proxy the PHP scripts to Apache listening on 127.0.0.1:80##location ~ \.php$ {#    proxy_pass   http://127.0.0.1;#}# pass the PHP scripts to FastCGI server listening on 127.0.0.1:9000##location ~ \.php$ {#    root           html;#    fastcgi_pass   127.0.0.1:9000;#    fastcgi_index  index.php;#    fastcgi_param  SCRIPT_FILENAME  /scripts$fastcgi_script_name;#    include        fastcgi_params;#}# deny access to .htaccess files, if Apache's document root# concurs with nginx's one##location ~ /\.ht {#    deny  all;#}
}

1.root:设置静态根目录为 /usr/share/nginx/html
2. index:设置目录的默认文件为 index.html 、index.htm、index.php
3. try_files:设置文件查找规则为 $uri $uri/ /index.html。即3个规则,先从 $uri 查找,再从 u r i / 目录中查找,最后查找 / i n d e x . h t m l 。

dockerfile

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

在这里插入图片描述

3.构建镜像(同后端)

docker build -t wmsweb:v1 .

在这里插入图片描述

4.运行测试

docker  run -d -p 3888:80  wmsweb:v1

在这里插入图片描述

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/771090.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

Webpack生成企业站静态页面 - 项目搭建

现在Web前端流行的三大框架有Angular、React、Vue,很多项目经过这几年的洗礼,已经都 转型使用这三大框架进行开发,那为什么还要写纯静态页面呢?比如Vue中除了SPA单页面开发,也可以使用nuxt.js实现SSR服务端渲染&#x…

牛客HJ43 迷宫问题中使用python,append在递归调用时的问题

题目描述 牛客:HJ43 迷宫问题 定义一个二维数组 N*M ,如 5 5 数组下所示: int maze[5][5] { 0, 1, 0, 0, 0, 0, 1, 1, 1, 0, 0, 0, 0, 0, 0, 0, 1, 1, 1, 0, 0, 0, 0, 1, 0, }; 它表示一个迷宫,其中的1表示墙壁,0…

基于前端技术实现的全面预算编制系统

前言 在现代商业环境中,预测销售数据和实际成本是每个公司CEO和领导都极为重视的关键指标。然而,由于市场的不断变化,准确地预测和管理这些数据变得愈发具有挑战性。为了应对这一挑战,建立一个高效的系统来管理和审查销售数据的重…

hbase启动错误-local host is“master:XXXX“ destination is:master

博主的安装前提: zookeeper安装完成,且启动成功 hdfs高可用安装,yarn高可用安装,且启动成功 报错原因:端口配置不对 解决方案: 输入:hdfs getconf -confKey fs.default.name 然后把相应的…

考研数学一——概率论真题——自我总结题型整理(总分393)

系列文章目录 终于考完研了,本人考的是南京航空航天大学的仪器科学与技术,英一数一电路,以下是成绩单: 平时习惯整理自己的学习体系,以下是一个记录。 其实,每个人都应该训练,看到某一类题目…

差异性分析通常包括以下几个基本步骤

差异性分析通常包括以下几个基本步骤: 明确研究目的:首先需要明确研究的目的和问题,确定要比较的变量或因素是什么,以及希望从数据中获得怎样的信息。 收集数据:收集与研究问题相关的数据样本,确保数据的质…

2024/03/25(C++·day1)

一、思维导图 二、练习 练习一 定义自己的命名空间&#xff0c;其中有string类型的变量&#xff0c;再定义两个函数&#xff0c;一个函数完成字符串的输入&#xff0c;一个函数完成求字符串长度&#xff0c;再定义一个全局函数完成对该字符串的反转 #include <iostream&g…

小白windows虚拟机共享文件

ubuntu访问windows共享文件 [windows 管理员 创建共享用户bat set userflyShare set pwd123 net user %user% /add net user %user% %pwd% net localgroup Users %user% /delete net user %user% /passwordchg:nonet share toUbuntuH: ( /grant:%user%,full 指定用户权限…

windows powershell连接linux 上传下载文件

连接&#xff1a;输入下面命令&#xff0c;回车 输入密码进入linux系统 ssh root192.168.188.128退出linux logoutwindow上传文件到Linux服务器 把桌面的123.txt 上传到linux home文件夹下 scp C:\Users\pzx\Desktop\123.txt root192.168.188.128:/homelinux下载文件到windo…

Midjourney公司新功能发布公告

亲爱的Midjourney用户们&#xff0c;您好&#xff01; 在这个创新不断的时代&#xff0c;Midjourney一直致力于为您提供最前沿的技术和服务。今天&#xff0c;我们非常兴奋地宣布推出两个全新的算法和一个新的版本控制功能&#xff0c;旨在进一步优化您的体验&#xff0c;并且更…

# vue刷新当前页面

vue刷新当前页面 背景 在项目开发中遇到了需要刷新当前页面的场景。中途尝试了以下四种方法 1、this. f o r c e U p d a t e ( ) t h i s . forceUpdate() this. forceUpdate()this.forceUpdate() 是Vue.js中的一个方法&#xff0c;用于强制组件重新渲染&#xff0c;即使没有…

景联文科技上新高质量大模型训练数据!

在过去的一年中&#xff0c;人工智能领域呈现出了风起云涌的态势&#xff0c;其中模型架构、训练数据、多模态技术、超长上下文处理以及智能体发展等方面均取得了突飞猛进的发展。 在3月24日举办的2024全球开发者先锋大会的大模型前沿论坛上&#xff0c;上海人工智能实验室的领…

Rancher(v2.6.3)——Rancher部署Redis(单机版)

Rancher部署Redis详细说明文档]&#xff1a;https://gitee.com/WilliamWangmy/snail-knowledge/blob/master/Rancher/Rancher%E4%BD%BF%E7%94%A8%E6%96%87%E6%A1%A3.md#6rancher%E9%83%A8%E7%BD%B2redis ps&#xff1a;如果觉得作者写的还行&#xff0c;能够满足您的需求&#…

【Android】美团组件化路由框架WMRouter源码解析

前言 Android无论App开发还是SDK开发&#xff0c;都绕不开组件化&#xff0c;组件化要解决的最大的问题就是组件之间的通信&#xff0c;即路由框架。国内使用最多的两个路由框架一个是阿里的ARouter&#xff0c;另一个是美团的WMRouter。这两个路由框架功能都很强大&#xff0…

一篇文章,告别Flutter状态管理争论,问题和解决

起因 每隔一段时间&#xff0c;都会出现一个新的状态管理框架&#xff0c;最近在YouTube上也发现了有人在推signals, 一个起源于React的状态管理框架&#xff0c;人们总是乐此不疲的发明各种好用或者为了解决特定问题而产生的方案&#xff0c;比如Bloc, 工具会推陈出新&#x…

[Vue warn]: Invalid vnode type when creating vnode: false

如题&#xff0c;意思是创建vnode时&#xff0c;vnode类型无效:false。 根据右边的索引点进去&#xff0c;发现定位的是组件loading。搜索loading发现声明了变量loading&#xff0c;更改后问题消失。

【python】获取4K壁纸保存到本地文件夹【附源码】

图片信息丰富多彩&#xff0c;许多网站上都有大量精美的图片资源。有时候我们可能需要批量下载这些图片&#xff0c;而手动一个个下载显然效率太低。因此&#xff0c;编写一个简单的网站图片爬取程序可以帮助我们高效地获取所需的图片资源。 目标网站&#xff1a; 如果出现模…

时间复杂度的计算分类汇总

比较官方的关于时间复杂度的计算我们给出的解释是这样的&#xff1a;要计算时间复杂度等价于计算基本语句执行次数的最高次幂&#xff0c;并把系数去掉。一般算法中执行次数最多的那条语句就是基本语句&#xff0c;通常是最内层循环的循环体。而内层循环执行的顺序要遵循 for 循…

物联网云组态是什么?部署物联网云组态有什么作用?

在信息化与工业化的深度融合进程中&#xff0c;物联网云组态以其独特的优势&#xff0c;正在成为企业数字化转型的重要工具。那么&#xff0c;物联网云组态究竟是什么呢&#xff1f;部署物联网云组态又能给企业带来哪些实质性的好处呢&#xff1f;今天&#xff0c;我们将围绕这…

vue 消息左右滚动(前后无缝衔接)

之前一直用vue-seamless-scroll&#xff0c;无奈此组件有两个缺点不满足实际效果&#xff1a;1&#xff09;标题过长被截取、2&#xff09;标题果断也会滚动&#xff0c;无奈我自己封装一个&#xff0c;满足此两个弊端&#xff0c;也能达到vue-seamless-scroll组件的功能&#…