springboot+vue3前后端项目-部署Docker详解

一、后端yml环境配置

mysql和redis的连接之前是localhost。现在我们需要修改成容器之间的调用,如何知道mysql和redis的连接地址呢?docker compose就帮我们解决了这个问题,我们可以使用镜像容器的服务名称来表示链接。比如docker-compose.yml中mysql的服务名称就叫mysql、redis就叫redis。

二、maven打成可执行jar包

使用Spring Boot Maven插件(适用于Spring Boot项目)

对于Spring Boot项目,最简单直接的方法是使用spring-boot-maven-plugin

pom.xml配置

<build><plugins><plugin><groupId>org.springframework.boot</groupId><artifactId>spring-boot-maven-plugin</artifactId></plugin></plugins>
</build>

运行jar包

三、nginx 打包部署vue

1、下载nginx

2、前端项目配置好生产环境打包

npm run build

打包成dist目录

3、将dist里面的资源拷贝到nginx服务器html文件夹下面

4、启动服务器

浏览器访问 127.0.0.1:80

注意:此时会出现跨域问题

5、配置nginx的反向代理

前端如果要访问接口

第一种方式:直接访问后端服务器地址,后端要配置跨域.

@Configuration
public class CorsConfig implements WebMvcConfigurer {@Overridepublic void addCorsMappings(CorsRegistry registry) {registry.addMapping("/admin/**") // 配置允许跨源访问的 URL pattern.allowedOrigins("http://127.0.0.1") // 允许的源.allowedMethods("GET", "POST", "PUT", "DELETE") // 允许的 HTTP 方法.allowedHeaders("*") // 允许的请求头.allowCredentials(true); // 允许携带认证信息(例如 cookies)registry.addMapping("/teacher/**").allowedOrigins("http://127.0.0.1") // 允许的源.allowedMethods("GET", "POST", "PUT", "DELETE") // 允许的 HTTP 方法.allowedHeaders("*") // 允许的请求头.allowCredentials(true);registry.addMapping("/student/**").allowedOrigins("http://127.0.0.1") // 允许的源.allowedMethods("GET", "POST", "PUT", "DELETE") // 允许的 HTTP 方法.allowedHeaders("*") // 允许的请求头.allowCredentials(true); // 允许携带认证信息(例如 cookies)}}

若部署在虚拟机 docker中则需要,修改访问地址。

第二种方式:前端先访问nginx,检测路径有指定符号,通过nginx代理,转发给后端服务器

前端同时也要修改为虚拟机的IP地址.

四、拉取镜像

拉取镜像java:21(jdk21)

docker pull openjdk:21

拉取镜像mysql:8.0.32

docker pull mysql:8.0.32

拉取镜像redis

docker pull redis

拉取镜像nginx:1.24.0

docker pull nginx:1.24.0

五、编写Dockerfile文件

因为我们的项目需要成为docker的镜像,所以我们必须先编写Dockerfile文件构建我们的项目镜像然后进行编排,Dockerfile文件可以帮我们进行构建。

# 使用 Java 21 镜像作为基础镜像
FROM openjdk:21# 将容器的 8080 端口暴露出来,以便外部可以访问应用程序
EXPOSE 8080# 将本地的 student-0.0.1-SNAPSHOT.jar 文件复制到容器内的 app.jar 文件中
ADD student-0.0.1-SNAPSHOT.jar app.jar# 在容器内执行命令,创建一个 /app.jar 文件以确保其存在
RUN bash -c 'touch /app.jar'# 定义容器启动时执行的默认命令,即运行 Java 应用程序,并设置 spring.profiles.active 环境变量为 pro
ENTRYPOINT ["java", "-jar", "/app.jar", "--spring.profiles.active=pro"]

上面几行命令其实很简单,首先依赖jdk21环境,对外暴露8080,然后就是复制student-0.0.1-SNAPSHOT.jar到docker容器中并命名为app.jar,最后是执行命令java -jar /app.jar --spring.profiles.active=pro,使用的是我们另外编写的一个线上环境配置。

六、docker compose进行编排

  1. 简化应用程序部署:Docker Compose 允许你使用一个简单的 YAML 文件来定义整个应用程序的组件、服务和它们之间的关系。这样一来,部署整个应用程序就变得非常简单,只需运行一条命令即可启动所有服务。

  2. 一致的开发环境:使用 Docker Compose 可以确保开发、测试和生产环境的一致性。开发人员可以在本地使用相同的配置和环境变量来运行应用程序,而不会受到运行环境的影响。

  3. 便于扩展和管理:通过 Docker Compose,你可以轻松地添加、删除或修改应用程序中的服务,而无需手动管理每个容器。这使得应用程序的扩展和维护变得更加简单和高效。

  4. 服务间通信:Docker Compose 可以轻松配置服务之间的通信和依赖关系。你可以定义网络以确保容器可以相互通信,还可以通过链接服务来建立服务之间的依赖关系。

  5. 快速启动和停止:使用 Docker Compose 可以轻松地启动、停止和重启整个应用程序,而不必手动管理每个容器。这使得开发人员可以更快地进行迭代开发和测试。

步骤

  1. 编写 Docker Compose 文件:创建一个名为 docker-compose.yml 的 YAML 文件,定义你的应用程序的服务、容器映像、端口映射、数据卷挂载以及其他配置。在文件中描述你想要运行的容器以及它们之间的关系。

  2. 定义服务:在 Docker Compose 文件中,使用 services 关键字定义你的应用程序中的各个服务。每个服务都应该有一个名称、一个容器映像、需要的端口映射、挂载的数据卷等。

  3. 构建镜像(可选):如果你的服务需要构建自定义的容器映像,你可以在 Docker Compose 文件中使用 build 指令来指定 Dockerfile 的路径,以及构建上下文。

  4. 启动容器:使用 docker-compose up 命令启动你的应用程序。Docker Compose 将读取 docker-compose.yml 文件,并根据文件中的配置启动每个服务对应的容器。

  5. 管理容器:一旦容器启动,你可以使用 docker-compose ps 命令查看所有正在运行的容器,使用 docker-compose logs 命令查看容器日志,使用 docker-compose stop 命令停止所有服务,使用 docker-compose restart 命令重启所有服务等。

  6. 关闭容器:当你不再需要运行应用程序时,可以使用 docker-compose down 命令停止并移除所有容器。这会停止所有服务并删除相关的容器、网络和卷。

nginx的挂载目录

宿主机的挂载目录:/usr/share/nginx/html

挂载配置:/home/cyh/student/nginx/html

在目录下新建nginx目录,并进入nginx目录下新建html目录和一个nginx.conf配置文件。

然后对nginx.conf进行编写,具体配置如下

#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  localhost;location / {root   /usr/share/nginx/html;try_files $uri $uri/ /index.html last; # 别忘了这个哈   历史模式 解决刷新没有界面index  index.html index.htm;}error_page   500 502 503 504  /50x.html;location = /50x.html {root   html;}}
}

七、上传前端

前端打包之后先修改前端调用后端的接口

然后npm run build打包得到dist文件夹,并把dist压缩成dist.zip上传到linux之后解压到nginx/html目录下。

八、数据库导入

创建一下数据库并导入sql文件

navicat 输入虚拟机IP地址 连接

创建school 数据库 并导入sql 文件

九、部署后端

本地打包jar,上传到虚拟机,同时docker-compose.yml、Dockerfile也上传到同一目录下

十、运行

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

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

相关文章

龙芯+RT-Thread+LVGL实战笔记(36)——密码锁完善

【写在前面】不知不觉中,又临近学期末了。这个学期,因为一些特殊原因,一直没怎么更新本教程,而且不得已上调了本教程的价格,在此笔者深表歉意。另一方面,自己带的学生发挥不佳,很遗憾未能闯进国赛,为此笔者也郁闷了相当长一段时间。事已至此,也只能慢慢释然,来年再战…

每日一练:攻防世界:Misc文件类型

给了一个txt文本文件&#xff0c;因为题目是文件类型&#xff0c;我先开始一直在想关于文件头的知识。 这串数据看着像十六进制数据&#xff0c;我就直接把他转ASCII了 反转一下就是base64&#xff0c;因为base64没有_&#xff0c;所以去掉46ESAB_&#xff0c;base64解码Hex试…

汇聚荣科技有限公司在拼多多评价上好不好?

汇聚荣科技有限公司在拼多多平台的评价如何&#xff0c;这是很多消费者在选择购买该公司产品时会关心的问题。通过深入分析&#xff0c;我们可以从多个维度来探讨这一问题。 一、产品质量 对于任何公司而言&#xff0c;产品的质量是其生存和发展的根本。根据用户反馈和相关评价…

联邦学习权重聚合,联邦学习权重更新

目录 联邦学习权重聚合 model.state_dict() 保存模型参数 加载模型参数 注意事项 联邦学习权重更新 联邦学习权重聚合 model.state_dict() 在PyTorch框架中,model.state_dict() 是一个非常重要的方法,它用于获取模型的参数(即权重和偏置)作为一个有序字典(Order…

基础-01-计算机网络概论

一. 计算机网络的发展与分类 1.计算机网络的形成与发展 计算机网络&#xff1a;计算机技术与通信技术的结合 ICTITCT 2.计算机网络标准阶段 3.计算机网络分类1:通信子网和资源子网 通信子网:通信节点(集线器、交换机、路由器等)和通信链路(电话线、同轴电缆、无线电线路、卫…

VMware安装Debian,Debian分区,虚拟机使用NAT模式联网,Linux设置静态IP

官网 https://www.debian.org/download stable是稳定版 win下amd64就行&#xff0c;macOs装arm架构的 安装Debian虚拟机 教程里没有的只管往下点就完了 哪个都行 选镜像 选安装位置 别超过宿主机内核就行 看你需求 NAT模式 虚拟 看你需求 其他的也检查一下 图形安装 选中文 继…

swift5 在当前控制器先dismiss后pop

如下图需要在present当前控制器时用全局变量firmwareUpgradePresentingVC先引用上一个控制器&#xff08;下面的代码亲测有效&#xff09; func dismissAndPop() {self.dismiss(animated: false) {firmwareUpgradePresentingVC.navigationController!.popViewController(animat…

书生·浦语大模型实战营第二期作业一

书生葡语大模型实战营介绍&#xff0c;第二期课程内容&#xff1a; 通用大模型成为人工智能发展趋势&#xff1a; 书生浦语大模型开源历程&#xff1a; 书生浦语大模型体系&#xff1a; 书生葡语大模型2.0提供不同尺寸和类型的模型&#xff0c;支持多语言和多模态任务&#xff…

【LeetCode滑动窗口算法】长度最小的子数组 难度:中等

我们先看一下题目描述&#xff1a; 解法一&#xff1a;暴力枚举 时间复杂度&#xff1a;o(n^3) class Solution { public:int minSubArrayLen(int target, vector<int>& nums){int i 0, j 0;vector<int> v;for (;i < nums.size();i){int sum nums[i];fo…

人工智能革命:2024年指数报告揭示AI行业十大趋势

随着科技的飞速发展&#xff0c;人工智能&#xff08;AI&#xff09;正逐渐渗透到我们生活的方方面面。斯坦福大学李飞飞教授领导的斯坦福以人为本人工智能研究所&#xff08;HAI&#xff09;发布的《2024年人工智能指数报告》为我们揭示了AI行业的最新趋势和未来的发展方向。以…

【外汇天眼】交易智慧:遵循趋势,稳中求胜

在交易中&#xff0c;新手往往因对未来走势的不确定性感到恐惧&#xff0c;从而不断要求对市场进行全面分析。这种需求反映了他们在投机心理幼稚期缺乏安全感的表现。有些勤奋的交易者甚至在做单前、持仓时和寻找出局理由时都在不断分析行情。然而&#xff0c;这种过度分析真的…

搜维尔科技:Movella旗下的Xsens在人形机器人开发中得到广泛应用

人形机器人的发展正在全球范围内受到广泛关注。作为机器人领域的重要分支&#xff0c;人形机器人因其具备高度仿真的外观和动作&#xff0c;以及更贴近人类的行为模式&#xff0c;有望逐渐成为人们日常生活和工业生产中的得力助手。在中国&#xff0c;这一领域的发展尤为引人注…

C++ 30 之 new 和 delete 关键字

#include <iostream> #include <string.h> using namespace std;class Students08{ public:Students08(){cout << "students08的默认构造函数"<< endl;}Students08(int a){cout << "students08的有参构造函数"<< endl…

Mac vscode could not import github.com/gin-gonic/gin

问题背景&#xff1a; 第一次导入一个go的项目就报红 问题分析&#xff1a; 其实就是之前没有下载和导入gin这个web框架包 gin是一个golang的微框架&#xff0c;封装比较优雅&#xff0c;API友好&#xff0c;源码注释比较明确。 问题解决&#xff1a; 依次输入以下命令。通…

nest : 无法加载文件 C:\Users\admin\AppData\Roaming\npm\nest.ps1,因为在此系统上禁止运行脚本。

完整报错&#xff1a; nest : 无法加载文件 C:\Users\admin\AppData\Roaming\npm\nest.ps1&#xff0c;因为在此系统上禁止运行脚本。有关详细信息&#xff0c;请参阅 https:/go.microsoft.com/fwlink/?LinkI D135170 中的 about_Execution_Policies。 问题原因&#xff1a; …

多校园跑腿小程序源码系统 帮取+代拿+外卖配送 功能超多 带完整的安装代码包+搭建部署教程

系统概述 多校园跑腿小程序源码系统 是一款基于微信小程序平台开发的全功能校园服务应用。该系统采用先进的前后端分离架构&#xff0c;结合云服务技术&#xff0c;确保了系统的高可用性、可扩展性和安全性。系统设计之初就充分考虑到了多校园环境的特殊性&#xff0c;支持多校…

分享一份 .NET Core 简单的自带日志系统配置,平时做一些测试或个人代码研究,用它就可以了

前言 实际上&#xff0c;.NET Core 内部也内置了一套日志系统&#xff0c;它是一个轻量级的日志框架&#xff0c;用于记录应用程序的日志信息。 它提供了 ILogger 接口和 ILoggerProvider 接口&#xff0c;以及一组内置的日志提供程序&#xff08;如 Console、Debug、EventSo…

QtScrcpy最出色的C++开源手机投屏控制软件

QtScrcpy是一款开源的跨平台屏幕录制和投屏工具 基本概述&#xff1a; 它基于Android的ADB&#xff08;Android Debug Bridge&#xff09;和Electron框架&#xff0c;为用户提供了简洁且功能强大的用户界面。 支持平台&#xff1a; QtScrcpy支持Windows、macOS和Linux三大…

Spring Boot + Mybatis Plus实现登录注册

Spring Boot 实现登录注册 1. 注册 业务逻辑 客户端输入注册时需要的用户参数&#xff0c;比如&#xff1a;账户名、密码、确认密码、其他服务端接收到客户端的请求参数进行校验&#xff0c;然后判断是否有误&#xff0c;有误的地方就将错误信息抛出将密码进行加密之后存储到…

uni-ui:基于uni-app的全端兼容高性能UI框架

一、引言 在移动应用开发领域&#xff0c;跨平台框架因其能够降低开发成本、提高开发效率而备受开发者青睐。其中&#xff0c;uni-app作为一个使用Vue.js开发所有前端应用的框架&#xff0c;不仅支持编译到iOS、Android、H5、以及各种小程序等多个平台&#xff0c;还因其丰富的…