Docker部署Vue+Springboot项目

一、部署Springboot项目

  1.1先将本地的java项目打成jar包。

         再右上角进行maven操作。

  1.2将jar包上传到服务器当中。

先再目录/home 下创建一个文件夹(classRoom)用于存放后端打镜像时需要的文件。

如果是服务器的话可以直接将文件拖拽到想要转移的地方。

因为我们需要将这个jar包打成镜像放在docker上运行,那么我们需要一个配置文件用于镜像的运行。图片中的Dockerfile就是这个配置文件,要注意这个两个文件要放在同一目录下。那么现在就开始来编写配置文件。

DockerFile:(这里里面我只写了必须的配置,其他配置都走的是默认配置)

#表示从名为 java 的官方镜像库中拉取标签为 8 的镜像作为基础镜像
FROM java:8   
#表示将构建上下文中的 classroom-realtime-feedback-0.0.1-SNAPSHOT.jar 文件复制到镜像中的 #classroom-realtime-feedback.jar
COPY classroom-realtime-feedback-0.0.1-SNAPSHOT.jar classroom-realtime-feedback.jar
#声明镜像中的应用程序会监听 8080 端口
EXPOSE 8080
#表示定义镜像的入口点,即当容器启动时,会执行 java -jar classroom-realtime-feedback.jar 命令来运行应用程序
ENTRYPOINT ["java","-jar","classroom-realtime-feedback.jar"]

1.3开始构建镜像并运行容器。

        要在classRom目录下执行这条语句,注意最后还有一个“ ”,这个点表示的是当前目目录,表示使用当前目录下的Dockerfile文件进行镜像的构建一个名字为classroom-realtime-feedback的镜像。

执行完语句之后我们可以看看有没有这个镜像。

那么后面我们就开始创建个容器执行这个镜像。执行下面这条语句,可以看到我写了三个端口映射,是因为我这个是websocket项目,有两个端口是websocket监听的。要注意如果你们项目有多个端口,那么一定要进行映射,不然请求就打不到后端。我之前就是只监听了一个端口导致没有ws请求没有建立连接。所以这个端口映射是因项目而异。

        这个语句的意思就是为名为classroom-realtime-feedback的镜像创建一个容器名为classroom-realtime-feedback并运行。

 通过docker ps命令可以看到我们这个容器正在运行:

到此位置springboot项目已经部署成功。

二、部署vue项目(使用nginx配合转发)

注意vue项目部署有一个大坑!!!

        就是我正常部署完成后我的前端请求一直打不到后端,报post 405错误,然后我搁往上查了半天好多博客都说是什么nginx无法使用Post请求访问静态资源,要用GET请求。然后我按照他们的要求进行修改结果还是没成功,结果最后发现并不是他们说的那样。

        是因为我之前再vue项目中使用了路由转发。但是这个配置只有再开发环境时能生效,再生产环境时,无法生效,就是根本走不到这里来。所以导致url没有进行处理,后端没有对应的请求接口。再生产环境中我们要使用nginx进行转发。

下面我们进行正式的Vue项目的部署 :

  2.1 将本地vue项目使用npm run build项目进行构建。

    

2.2将本地的dist文件夹上传到服务器当中 

现在服务器中创建一个文件夹 vue -nginx用于存放关于前端的文件

然后将dist文件拉去到vue-nginx文件夹中。因为我们需要以nginx为基础镜像构建镜像,所以我们还得编写一下nginx的配置文件(default.conf),用在其中编写适合我们项目的转发规则:

default.conf:

我再其中写的转发规则可以按照自己的路径规则进行改写

server {listen       80;server_name  自己服务器的ip; # 修改为docker服务宿主机的ip#这是最后进行匹配的location / {root   /usr/share/nginx/html;index  index.html index.htm;try_files $uri $uri/ /index.html =404;#error_page 405 =200 @405; }
#当url中有/test/的会将这个后面的和proxy_pass的路径进行拼接再进行转发
#如/test/login会变成自己后端ip+端口/login,然后进行转发
location  ^~/test/ {proxy_set_header Host $host; proxy_set_header X-Real-IP $remote_addr;proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;  #ip为后端服务地址proxy_pass 自己后端ip+端口/;
}error_page   500 502 503 504  /50x.html;location = /50x.html {root   html;}
}

编写完nginx配置文件那么我们需要编写镜像配置文件Dockerfile:

FROM nginx
# 设置维护者信息
MAINTAINER wuing
# 删除默认的配置文件
RUN rm /etc/nginx/conf.d/default.conf
# 添加你的配置文件到镜像中
ADD default.conf /etc/nginx/conf.d/
# 将dist文件夹下的内容复制到镜像的/usr/share/nginx/html/目录下
COPY dist/ /usr/share/nginx/html/

这样文件都准备好了,可以开始镜像的创建了。

   2.3开始构建镜像并运行容器

注意前端构建也要再前端目录下进行构建,并需要“ ”,表示根据当前路径下的Dockerfile文件进行镜像的构建。

然后还是创建容器,注意这里的80端口映射映射的是nginx的端口,要和那个配置文件了写的一致

到此为止我也就构建完毕了,让我们来看看效果:

三、效果演示

访问服务器地址+9090端口就可以之间访问前端默认首页了。

 我们试试和后端的交互,可以看出登录成功。

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

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

相关文章

基准电压源的工作原理和作用是什么(高精度电压源)

基准电压源是一种能够提供固定、稳定的直流电压输出的电源设备。它广泛应用于精密仪器、测试设备、通信设备等领域,是实现精确电压测量和校准的重要工具。本文将为您介绍基准电压源的工作原理和作用。 一、基准电压源的工作原理 基准电压源采用了高精度的电路设计和…

Sam Altman回归OpenAI,新董事会成员曝光!

11月22日下午,OpenAI在社交平台宣布,在原则上已达成协议,让 Sam Altman重返 OpenAI担任首席执行官,并重组董事会。稍后会公布更详细的内容。 初始董事会成员包括前Salesforce联合首席执行官Bret Taylor(担任主席&…

鸿蒙开发-ArkTS 语言

鸿蒙开发-ArkTS 语言 1. 初识 ArkTS 语言 ArkTS 是 HarmonyOS 优选主力开发语言。ArkTS 是基于 TS(TypeScript)扩展的一门语言,继承了 TS 的所以特性,是TS的超集。 主要是扩展了以下几个方面: 声明式UI描述和自定义组件: ArkTS允…

labview 安捷伦 34970A 采集温度等

本文详细描述了怎么用安捷伦34970A采集温度,并列出了labview的下载链接,具有一定的参考价值。 1.必要条件: RS-232电缆一根 IO Libraries Suite 软件 BenchLink Data Logger 软件 软件可以在http://www.keysight.com.cn下载 检查RS-232…

SQLite3 数据库学习(五):Qt 数据库高级操作

参考引用 SQLite 权威指南&#xff08;第二版&#xff09;SQLite3 入门 1. Qt 数据库密码加密 MD5 加密在线工具 1.1 加密流程 加密后的密码都是不可逆的 1.2 代码实现 loginsqlite.h #ifndef LOGINSQLITE_H #define LOGINSQLITE_H#include <QWidget> #include <Q…

通过Whisper模型将YouTube播放列表中的视频转换成高质量文字稿的项目

项目简介 一个通过Whisper模型将YouTube播放列表中的视频转换成高质量文字稿的项目。 这个基于 Python 的工具旨在将 YouTube 视频和播放列表转录为文本。它集成了多种技术&#xff0c;例如用于转录的 Fast-Whisper、用于自然语言处理的 SpaCy 以及用于 GPU 加速的 CUDA&…

pytest测试框架介绍(1)

又来每天进步一点点啦~~~ 一、Pytest介绍&#xff1a; pytest 是一个非常成熟的全功能的Python测试框架&#xff1b; pytest 简单、灵活、易上手&#xff1b; 支持参数化 能够支持简单的单元测试和复杂的功能测试&#xff0c;可以做接口自动化测试&#xff08;pytestrequests&…

根据商品链接获取拼多多商品详情数据接口|拼多多商品详情价格数据接口|拼多多API接口

拼多多&#xff0c;作为中国最大的社交电商之一&#xff0c;为卖家提供了丰富的商品详情接口。这些接口可以帮助卖家快速获取商品信息&#xff0c;提高销售效率。本文将详细介绍如何使用拼多多商品详情接口&#xff0c;以及它的优势和注意事项。 一、拼多多商品详情接口概述 …

大宗商品贸易集团数据治理实践,夯实数字基座 | 数字化标杆

某大型央企是首批全国供应链创新与应用示范企业&#xff0c;在“十四五”规划期内以聚焦供应链管理核心主业作为主要战略发展方向。供应链运营管理以大宗商品贸易为主&#xff0c;其交易往往具有交易量巨大、交易环节复杂、风险交易难识别、风险客商难管控等痛点。 随着集团数…

五分钟搭建开源ERP:Odoo,并实现公网远程访问

文章目录 前言1. 下载安装Odoo&#xff1a;2. 实现公网访问Odoo本地系统&#xff1a;3. 固定域名访问Odoo本地系统 前言 Odoo是全球流行的开源企业管理套件&#xff0c;是一个一站式全功能ERP及电商平台。 开源性质&#xff1a;Odoo是一个开源的ERP软件&#xff0c;这意味着企…

小猪优版的前世今生:从籍籍无名到行业瞩目,再到骤变的风暴中心

1. 前世&#xff1a;籍籍无名到行业新星的崛起 小猪优版在初创时期&#xff0c;并不被大众所知。然而&#xff0c;它凭借对短视频行业的深度洞察&#xff0c;以及独特的商业模式&#xff0c;开始在这个领域崭露头角。它提供了一个平台&#xff0c;不仅助力内容创作者更好地展现…

使用whisper实现语音转文本

项目地址&#xff1a;GitHub - openai/whisper: Robust Speech Recognition via Large-Scale Weak Supervision 1、需要py3.8环境 conda activate p38 2、安装 pip install -U openai-whisper 3、下载项目 pip install githttps://github.com/openai/whisper.git 4、安装…

如何避免Steam搬砖项目中账号被盗

购买steam余额有风险吗&#xff1f;及N种被红锁的情况 相信最近很多人都已经听说过steam游戏搬砖这个项目&#xff0c;也叫CSGO游戏搬砖项目&#xff0c;还有人叫它&#xff1a;国外steam游戏汇率差项目&#xff0c;无论怎么称呼&#xff0c;都是同一个项目。 那么什么是stea…

泼天的富贵来啦,快带着你的PMP证书一起迎接

考过PMP认证的威宝们&#xff0c;这波泼天的富贵大家一定要接住呀&#xff01; 很多威宝们在学习PMP之前都在担心&#xff0c;这个证书含金量高吗&#xff1f;转岗跳槽用得上吗&#xff1f;有必要考吗&#xff1f;今天&#xff0c;喜番大声地告诉大家&#xff1a;含金量高&…

Class文件转Java文件

目录 1、下载一个反编译工具2、在文件夹下打开命令窗口3、在此目录下随意建一个文件夹4、在打开的命令窗口输入命令5、返回解压目录下 1、下载一个反编译工具 下载链接&#xff1a;https://varaneckas.com/jad/ 下载的是第一个 下载后放至任意目录下解压即可 2、在文件夹下打…

JetLinks设备接入的认识与理解【woodwhales.cn】

为了更好的阅读体验&#xff0c;建议移步至笔者的博客阅读&#xff1a;JetLinks设备接入的认识与理解 1、认识 JetLinks 1.1、官网文档 官网&#xff1a;https://www.jetlinks.cn/ JetLinks 有两个产品&#xff1a;JetLinks-lot和JetLinks-view 官方文档&#xff1a; JetLi…

没有PDF密码,如何解密?

PDF文件有两种密码&#xff0c;一个打开密码、一个限制编辑密码&#xff0c;因为PDF文件设置了密码&#xff0c;那么打开、编辑PDF文件就会受到限制。忘记了PDF密码该如何解密&#xff1f; PDF和office一样&#xff0c;可以对文件进行加密&#xff0c;但是没有提供恢复密码的功…

mac电脑文件比较工具 UltraCompare 中文for mac

UltraCompare是一款功能强大的文件和文件夹比较工具&#xff0c;用于比较和合并文本、二进制和文件夹。它提供了丰富的功能和直观的界面&#xff0c;使用户能够轻松地比较和同步文件内容&#xff0c;查找差异并进行合并操作。 以下是UltraCompare软件的一些主要特点和功能&…

为什么程序员不直接用线上环境写代码呢?

为什么程序员不直接用线上环境写代码呢&#xff1f; 有的&#xff0c;我就是直接用Linux作为主力电脑使用&#xff0c;大概从201 6年起&#xff0c;我就开始这样干了。无论是编 程、画电路板、画UI、剪视频.... 都在Linux上面完成。 编程工具大部分都有Linux版本&#xff0c;…

【【Linux 常用命令学习 之 一 】】

Linux 常用命令学习 之 一 打开终端之后的 我们会了解 所使用的 字符串含义 其中前面的 zhuxushuai 是 当前的用户名字 接下来的 zhuxushuai-virtual-machine 是 机器名字 最后的符号 $表示 当前是普通用户 输入指令 ls 是打印出当前所在目录中所有文件和文件夹 shell 操…