个人技术总结——使用Docker部署Vue 3与Spring Boot项目

222100421林宜斌 2024-06-06 19:57:41
这个作业属于哪个课程2302软件工程社区
这个作业要求在哪里软件工程实践总结&个人技术博客
这个作业的目标个人技术总结
其他参考文献《构建之法》

目录

  • 1. 技术概述
  • 1.1 何时使用Docker进行部署
  • 1.2 学习原因
  • 1.3 技术难点
  • 2. 技术详述
  • 2.1 Docker基础
  • 2.2 Vue 3项目特点
  • 2.3 Spring Boot项目特点
  • 2.4 实现步骤
  • 1. 安装Docker
  • 2. 编写Dockerfile
  • 3. 编写docker-compose.yml
  • 4. 构建镜像
  • 5. 运行服务
  • 附加配置(nginx中的配置文件)
  • 3、部署流程
  • 3.1 Vue 3项目部署
  • 3.2 Spring Boot项目部署
  • 3.3 Docker Compose整合部署
  • 1. 定义服务
  • 2. 配置网络
  • 3. 管理数据卷
  • 4. 启动服务
  • 5. 扩展服务
  • 6. 注意事项
  • 4、问题与解决
  • 4.1 容器间通信问题
  • 4.2 Docker镜像构建缓慢
  • 4.3 数据持久化问题
  • 4.4 环境变量和配置管理
  • 5、总结
  • 6、参考文献

1. 技术概述

1.1 何时使用Docker进行部署

在开发复杂的应用程序时，环境一致性是一个常见问题。Docker通过容器化技术解决了这一问题，允许开发者将应用及其依赖打包在容器中，确保在不同环境之间无缝迁移。此外，Docker还简化了微服务架构的部署，使得每个服务可以独立运行和扩展。

1.2 学习原因

Docker已成为云计算和容器化技术的行业标准。学习Docker不仅有助于提升个人技术能力，也是响应当前软件开发行业对高效部署流程的需求。掌握Docker的使用，可以为开发者在微服务、持续集成/持续部署（CI/CD）等领域打下坚实基础。

1.3 技术难点

  • 容器化理解：理解容器化的概念以及它与虚拟机的区别。
  • Dockerfile编写：编写有效的Dockerfile来定制化镜像构建过程。
  • 服务编排：使用Docker Compose进行多容器服务的编排和管理。
  • 网络配置：设置容器间的网络通信，确保服务可以互相访问。
  • 数据持久化：处理容器中数据的持久化问题，确保数据不会因容器重启而丢失。

2. 技术详述

2.1 Docker基础

Docker使用Linux内核技术，如cgroups和namespaces，来隔离容器。它允许用户在容器内运行应用及其所有依赖，而不需要依赖特定的基础设施。

2.2 Vue 3项目特点

Vue 3引入了Composition API，提供了更灵活的方式来组织组件逻辑。此外，Vue 3还提供了更好的性能和更小的体积，以及对TypeScript的原生支持。

2.3 Spring Boot项目特点

Spring Boot简化了Spring应用的配置和部署。它通过自动配置和无需XML配置，使得Spring应用的初始搭建变得非常简单快捷。

2.4 实现步骤

1. 安装Docker

确保系统上安装了Docker Engine和Docker Compose。可以通过以下命令来安装Docker：

# 对于Ubuntu系统
sudo apt-get update
sudo apt-get install docker.io docker-compose

2. 编写Dockerfile

对于Vue 3前端项目的Dockerfile (vue-app/Dockerfile):

# 使用官方Node.js作为基础镜像
FROM node:16

# 设置工作目录
WORKDIR /usr/src/app

# 复制package.json和package-lock.json
COPY package*.json ./

# 安装项目依赖
RUN npm install

# 复制项目文件到工作目录
COPY . .

# 构建前端应用
RUN npm run build

# 设置Nginx作为静态资源服务器
RUN apt-get update && apt-get install -y nginx \
    && rm -rf /etc/nginx/sites-enabled/*

# 配置Nginx
COPY nginx.conf /etc/nginx/conf.d/default.conf

# 暴露80端口
EXPOSE 80

# 启动Nginx服务
CMD ["nginx", "-g", "daemon off;"]

对于Spring Boot后端项目的Dockerfile (spring-boot-app/Dockerfile):

# 使用官方OpenJDK作为基础镜像
FROM openjdk:8-jre-slim

# 设置工作目录
WORKDIR /app

# 复制Jar包到工作目录
COPY target/*.jar ./spring-boot-app.jar

# 暴露8080端口
EXPOSE 8080

# 启动Spring Boot应用
CMD ["java", "-jar", "spring-boot-app.jar"]

3. 编写docker-compose.yml

version: '3.8'
services:
  vue-app:
    build: ./vue-app
    ports:
      - "80:80"

  spring-boot-app:
    build: ./spring-boot-app
    ports:
      - "8080:8080"
    depends_on:
      - vue-app
    environment:
      - SPRING_PROFILES_ACTIVE=docker

4. 构建镜像

在项目根目录下运行以下命令构建前端和后端的Docker镜像：

docker-compose build

5. 运行服务

使用以下命令启动整个应用堆栈：

docker-compose up

这将启动Vue 3前端应用和Spring Boot后端应用，前端应用可通过浏览器访问，后端应用将监听8080端口。

附加配置(nginx中的配置文件)

nginx.conf (vue-app/nginx.conf):

# http server
    server {
        listen       80;
        server_name  123.207.40.200;

        location / {
            root   /usr/share/nginx/html/dist;
            index  index.html index.htm;

            # 解决vue3使用 history 路由模式刷新404
            try_files $uri $uri/ /index.html;
        }

        # location /bili {  # /bili/test/api     /test/api
        #     proxy_pass http://bili:9898/; # 加/代表会丢弃/bili
        #     proxy_pass bili;              # 加/代表会丢弃/bili
        # }

#         rewrite ^(.*)$  https://$host$1 permanent;

        error_page   500 502 503 504  /50x.html;
        location = /50x.html {
            root   html;
        }
    }

这个配置文件将静态文件服务和API请求代理到Spring Boot应用。

3、部署流程

3.1 Vue 3项目部署

  1. 创建Dockerfile：在Vue 3项目根目录下创建Dockerfile，配置Node.js环境，安装依赖，并构建前端资源。
  2. 配置Nginx：使用Nginx作为反向代理服务器，配置静态资源的托管和后端API的代理。
  3. 构建镜像：执行docker build命令，根据Dockerfile构建Vue 3项目的Docker镜像。
  4. 运行容器：运行Docker容器，将前端资源映射到Web服务器，并暴露80或443端口。

3.2 Spring Boot项目部署

  1. 创建Dockerfile：在Spring Boot项目根目录下创建Dockerfile，配置Java环境，添加Jar包，并设置运行命令。
  2. 配置数据库：根据需要配置数据库服务，并在docker-compose.yml中定义环境变量和连接字符串。
  3. 构建镜像：执行docker build命令，根据Dockerfile构建Spring Boot项目的Docker镜像。
  4. 运行容器：运行Docker容器，配置端口映射，确保应用服务可访问。

3.3 Docker Compose整合部署

1. 定义服务

创建docker-compose.yml文件，在项目根目录下定义Vue 3前端服务和Spring Boot后端服务，模板如下：
前端项目这里叫vue-app ，后端项目叫spring-boot-app。

version: '3.8'
services:
  vue-app:
    build: ./vue-app
    ports:
      - "80:80"
    depends_on:
      - spring-boot-app

  spring-boot-app:
    build: ./spring-boot-app
    ports:
      - "8080:8080"
    environment:
      - SPRING_DATASOURCE_URL=jdbc:mysql://db:3306/mydb
      - SPRING_DATASOURCE_USERNAME=user
      - SPRING_DATASOURCE_PASSWORD=password
    depends_on:
      - db

  # 使用MySQL数据库 也可以是其他的数据库 换掉镜像即可
  db: 
    image: mysql:5.7
    volumes:
      - db-data:/var/lib/mysql
    environment:
      - MYSQL_ROOT_PASSWORD=rootpassword
      - MYSQL_DATABASE=mydb
      - MYSQL_USER=user
      - MYSQL_PASSWORD=password

  # 如果需要Redis服务
  redis:
    image: redis:alpine
    volumes:
      - redis-data:/data
      
volumes:
  db-data:
  redis-data:

2. 配置网络

Docker Compose会自动创建一个默认网络，所有在docker-compose.yml中定义的服务都会连接到这个网络，从而实现服务间的通信。

3. 管理数据卷

在docker-compose.yml中，我们为数据库服务db定义了db-data数据卷，用于持久化MySQL的数据。如果需要，也可以为Redis服务定义redis-data数据卷。

4. 启动服务

在项目根目录下运行以下命令启动服务：

docker-compose up -d

-d标志表示在后台运行服务。

5. 扩展服务

如果需要扩展服务，比如添加Redis缓存服务，可以通过修改docker-compose.yml文件来实现。更新后，重新启动服务：

docker-compose up -d

这将根据新的配置重新启动所有服务，包括新添加的Redis服务。

6. 注意事项

  • 确保./vue-app和./spring-boot-app目录中包含相应的Dockerfile。
  • 根据实际的数据库配置和需求调整SPRING_DATASOURCE_URL、MYSQL_ROOT_PASSWORD等环境变量。
  • 根据项目的需要调整数据卷的配置，以满足数据持久化的需求。

4、问题与解决

4.1 容器间通信问题

问题描述：在开发过程中，Vue 3前端应用需要与Spring Boot后端应用进行通信。最初，我发现前端请求后端API时出现了连接错误。

解决过程：

  1. 检查网络配置：我首先检查了docker-compose.yml文件，确认所有服务是否都在同一个默认网络下，并且容器名称正确无误。
  2. 日志排查：通过查看容器的日志，我发现后端服务没有正确接收到前端的请求。
  3. 端口映射：确认docker-compose.yml中的端口映射设置无误，前端容器能够访问到后端服务的端口。
  4. 服务依赖：在docker-compose.yml中使用depends_on选项确保后端服务先于前端服务启动。

结果：经过上述步骤的调整，容器间的通信问题得到解决，前端能够成功调用后端API。

4.2 Docker镜像构建缓慢

问题描述：在构建Docker镜像时，我发现构建过程非常缓慢，尤其是在初次构建时。

解决过程：

  1. 优化Dockerfile：我回顾并优化了Dockerfile中的指令，合理安排指令顺序，减少不必要的缓存失效。
  2. 减少层数：合并多个RUN指令到一个层中，减少镜像层数。
  3. 利用缓存：将不常变动的指令放在前面，以充分利用Docker的缓存机制。

结果：优化后的Dockerfile显著提高了镜像构建的速度。

4.3 数据持久化问题

问题描述：在容器重启后，我发现数据库中的数据丢失了。

解决过程：

  1. 数据卷配置：我检查了docker-compose.yml文件，确保为数据库服务配置了数据卷。
  2. 持久化路径：确认数据卷挂载的路径与容器内的数据存储路径一致。
  3. 卷的生命周期：理解Docker数据卷的生命周期独立于容器，确保数据卷在容器重启后依然存在。

结果：通过正确配置数据卷，数据库数据持久化问题得到解决。

4.4 环境变量和配置管理

问题描述：在部署过程中，我需要在多个地方管理环境变量和配置，这增加了管理的复杂性和出错的可能性。

解决过程：

  1. 使用.env文件：我创建了一个.env文件来统一管理环境变量，并通过docker-compose.yml文件引用这些变量。
  2. 配置分离：将配置与代码分离，确保不同环境下可以使用不同的配置而不需修改代码。
  3. 动态配置：实现了一个配置中心服务，动态地为各个服务提供配置信息。

结果：通过集中管理环境变量和配置，简化了部署流程，降低了出错率。

5、总结

在这次软件工程实践课程中，我获得了宝贵的经验，特别是在Docker和Docker Compose的学习和应用上。以下是我的主要收获和体会：

  • 技术学习与应用： 通过本学期的实践，我对Docker容器化技术有了更深入的了解。从安装配置Docker环境，到使用Dockerfile构建镜像，再到利用Docker Compose管理多容器应用，我逐步掌握了容器化技术在软件开发中的应用流程。

  • 技术难点克服： 在学习过程中，我遇到了容器网络配置、数据卷持久化以及容器间服务通信等问题。通过查阅文档、不断尝试和与同学的交流，我成功地解决了这些问题。这些挑战不仅增强了我的技术实力，也锻炼了我的问题解决和自主学习能力。

  • 实践中的收获： 在实际项目部署中，我深刻体会到了容器化技术在提高开发效率、确保环境一致性以及简化部署流程方面的重要性。通过使用Docker和Docker Compose，我不仅在技术层面有所提升，更在项目管理、团队协作和系统部署等方面获得了宝贵的经验。

通过本次实践，我对软件开发的全流程有了更加全面的认识，同时也对容器化技术在未来软件开发中的应用前景充满了期待。我相信，这些知识和技能将在我的未来职业道路上发挥重要作用。

6、参考文献

  1. Docker官方文档：https://docs.docker.com/
  2. Vue 3官方文档：https://v3.vuejs.org/
  3. Spring Boot官方文档：https://spring.io/projects/spring-boot
  4. Docker Compose官方文档：https://docs.docker.com/compose/
...全文
131 回复 打赏 收藏 转发到动态 举报
写回复
用AI写文章
回复
切换为时间正序
请发表友善的回复…
发表回复
五一假期实战：打造你的程序员效率工具箱导航
本文为程序员提供了一个五一假期实战项目指南：从零开始打造个人专属的效率工具箱导航站。文章详细阐述了从需求分析、技术选型（如Spring Boot、Vue 3）到前后端开发、部署上线的完整流程，旨在帮助开发者整合常用工具与资源，构建一个能显著提升工作效率的个性化网址工具导航。
Docker部署Spring Boot + Vue项目
Docker部署Spring Boot + Vue项目。
使用 Docker 部署 Spring Boot + Vue 项目
本项目是一个前后端分离的应用，前端使用 Vue.js 框架开发，后端使用 Spring Boot 框架开发。项目的主要功能是提供一个用户管理系统，包括用户注册、登录、用户信息管理等功能。通过使用 Docker 和 Docker Compose，我们可以轻松地部署一个 Spring Boot + Vue 的项目。这种方式可以让我们的项目更加易于部署和管理，同时也可以提高项目的可移植性和可靠性。在实际应用中，我们可以根据项目的具体需求进行调整和优化，以满足不同的部署场景。
产业园区运营负责人如何利用区域产业知识图谱提升招商精准度？.docx
科易网基于40亿+科创知识图谱数据库，深度探索AI技术在技术转移、成果转化、技术经纪、知识产权、产业创新、科技招商等垂直领域的多样化应用场景，研究科技创新领域的AI+数智化解决方案，推动科技创新与产业创新智能化发展。
编程题答案-全国计算机等级考试二级教程-Python语言程序设计(2018年版)
下载代码方式：https://pan.quark.cn/s/a4b39357ea24 全国计算机等级考试二级教程《Python语言程序设计》（2018年版）被视为针对Python入门者和备考人员的核心学习材料。该资料汇总了教材内的所有编程练习答案，这些答案在Python 3.5.3环境中经过实际执行测试，从而保障了代码的准确性和应用价值。备考人员借助这些答案，能够评估自身的学习进度，并深入理解和熟练掌握Python编程的基础原理与方法。 1. Python基础理论：Python作为一门高级编程语言，因其简明扼要的语法结构和卓越的功能表现而备受推崇。基础内容涵盖了变量、数据种类（例如整型、浮点型、字符串、布尔型、列表、元组、字典、集合）、逻辑控制（比如条件判断if-else，循环控制for、while）、函数的声明及使用、模块的引入等。 2. Python高级应用：Python的进阶内容涉及异常管理（try-except-finally结构），类与实例（面向对象编程的基础，包含类的构造、对象的生成、属性与方法的运用、继承机制、多态表现），装饰器（用于调整函数或类的功能特性），上下文管理器（借助with语句实现资源管理）等。 3. 数据文件处理：Python配备了全面的文件操作功能，涉及文件的开启、数据读写、关闭操作，以及多种操作模式（例如r模式用于读取，w模式用于写入，a模式用于追加内容等）。此外，还包括文本文件与二进制文件的转换处理，以及文件的位置调整、复制和删除等操作。 4. 标准库的运用：Python的标准库资源极为丰富，比如os模块提供操作系统接口，sys模块用于获取系统参数，random模块可用于生成随机数值，datetime模块负责处...
2302软件工程

122

社区成员

758

社区内容

发帖
与我相关
我的任务
社区描述
FZU-SE
软件工程 高校
社区管理员
  • LinQF39
  • 助教-吴可仪
  • 一杯时间
加入社区
  • 近7日
  • 近30日
  • 至今

加载中

查看更多榜单
社区公告
暂无公告

试试用AI创作助手写篇文章吧

+ 用AI写文章