什么年代了，别跟我说你还不会用docker镜像去做前端项目发布？

为了WLB努力2024-03-26 16:27

Docker 已经成为现代软件开发与部署的标准之一。然而，要真正理解 Docker 的工作原理，首先需要深入研究其底层技术。本文将深度解析 Docker 的原理 ，包括容器与镜像的概念、Docker 架构、命名空间与控制组、镜像分层、容器生命周期管理等，并结合前端项目的实战代码展示其应用，让你学以致用。

1.1 Docker 工作原理

，Docker 是一种容器化平台，能够将应用程序和其依赖打包到一个可移植的容器中，从而实现快速部署和可移植性。Docker 的工作原理可以概括为以下几个关键步骤：

  1. 镜像构建与存储：Docker 使用镜像作为容器的基础。镜像包含了运行容器所需的文件系统、库和运行时配置。镜像是通过 Dockerfile 来定义的，其中包含了构建镜像所需的指令。Docker 根据 Dockerfile 中的指令来构建镜像，每个指令都会生成一个新的镜像层。这些镜像层会被存储在本地的镜像仓库中。

  2. 容器创建与运行：当用户通过 Docker 命令启动容器时，Docker 实际上会在宿主机上创建一个进程，并为该进程分配相应的命名空间（Namespace）。命名空间包括 PID、NET、IPC、Mount、User 等，用于隔离容器与宿主机以及其他容器之间的资源。同时，Docker 会为容器分配一个独立的文件系统，这个文件系统是基于镜像层构建的，同时包含一个可写层，用于保存容器运行时产生的数据和状态。

  3. 容器交互与网络：Docker 可以为容器分配独立的网络命名空间，从而实现容器之间的网络隔离。每个容器都有自己的 IP 地址和网络栈，可以通过网络与其他容器或外部网络进行通信。Docker 还支持端口映射，将容器内部的端口映射到宿主机上的某个端口，从而实现容器服务的对外访问。

  4. 资源限制与管理：Docker 利用 Linux 内核的控制组（cgroup）功能来限制容器的资源使用，如 CPU、内存、磁盘等。用户可以通过 Docker 命令或 Docker Compose 文件来指定容器的资源限制和配置。这样可以有效地管理和控制容器的资源消耗，防止容器之间的资源竞争。

1.2 Docker的优点

Docker 技术相对于传统的软件部署和运维方式有诸多优势，主要包括以下几点：

  1. 快速部署与启动：

    • 传统方式：传统部署通常需要手动配置环境、安装依赖，并可能遇到各种环境不一致或依赖冲突的问题。
    • Docker 方式：Docker 镜像可以在任何支持 Docker 的环境中快速部署和启动，无需手动配置环境，只需运行相应的镜像即可，大大提高了部署效率。

  2. 环境一致性：

    • 传统方式：由于开发、测试和生产环境之间的差异，经常会出现环境不一致导致的问题，例如"在我这儿是好的"。
    • Docker 方式：Docker 镜像封装了应用及其依赖，保证了在不同环境中的一致性，避免了环境配置带来的问题，提高了开发、测试和生产环境之间的一致性。

  3. 资源利用率高：

    • 传统方式：传统部署通常会为每个应用分配一台物理机或虚拟机，资源利用率较低。
    • Docker 方式：Docker 容器共享宿主机的内核，容器之间资源隔离，可以更高效地利用硬件资源，降低资源成本。

  4. 弹性伸缩：

    • 传统方式：传统部署需要手动配置和管理服务器，不便于应对流量的突然增加或减少。
    • Docker 方式：Docker 容器可以根据需求快速启动或停止，可以通过容器编排工具（如 Kubernetes）实现自动水平扩展和收缩，实现弹性伸缩，更好地适应不同的业务负载。

  5. 持续集成与持续部署：

    • 传统方式：传统部署方式通常需要手动执行部署操作，不利于持续集成和持续部署。
    • Docker 方式：Docker 容器可以与持续集成/持续部署（CI/CD）工具集成，实现自动化构建、测试和部署，加速软件交付流程，提高交付质量。

  6. 技术栈无关：

    • 传统方式：传统部署通常依赖特定的操作系统和技术栈，不易于跨平台运行。
    • Docker 方式：Docker 容器可以在任何支持 Docker 的平台上运行，无需关心底层操作系统和技术栈的差异，提高了应用的可移植性和跨平台运行能力。

  7. 容器编排与管理：Docker 提供了多种容器编排和管理工具，如 Kubernetes、Docker Swarm 等，可以帮助用户实现容器的编排、调度、伸缩、治理和监控等功能。这些工具使得用户能够更好地管理大规模容器集群，应对复杂的云原生应用场景。

Docker 技术相比传统的软件部署和运维方式具有明显的优势，能够提高部署效率、提高资源利用率、增强弹性伸缩性、实现持续集成和持续部署，并提高了应用的可移植性和跨平台运行能力，Docker 提供了与云原生理念高度契合的特性和工具，使得它成为云原生架构的重要组成部分，因此受到了云原生社区的应用和推崇。

2. 容器与镜像

2.1 容器

容器是一个独立运行的应用实例，它包含了应用程序和其依赖，但与宿主机隔离开来，因此能够在不同环境中保持一致的运行。

2.2 镜像

镜像是容器的基础，它是一个只读的模板，包含了运行容器所需的文件系统、库和运行时配置。

3. Docker 架构

Docker 架构包括 Docker 客户端、Docker 服务器和 Docker Daemon。其中：

  • Docker 客户端通过 Docker API 与 Docker 服务器通信。
  • Docker 服务器负责管理镜像、容器、网络和存储等资源。
  • Docker Daemon 运行在宿主机上，负责创建和运行容器。

4. 命名空间与控制组

Docker 利用 Linux 内核的命名空间和控制组技术实现容器的隔离。常用的命名空间包括：

  • PID 命名空间：隔离进程 ID。
  • NET 命名空间：隔离网络。
  • IPC 命名空间：隔离进程间通信。
  • Mount 命名空间：隔离文件系统挂载点。
  • User 命名空间：隔离用户和用户组。

控制组（cgroup）用于限制容器的资源使用，如 CPU、内存、网络带宽等。

5. 镜像分层

Docker 镜像采用分层存储的方式，每一层都是只读的。当容器启动时，Docker 会在这些只读层之上创建一个可写层，用于保存容器的运行时状态和数据。

6. 容器生命周期管理

容器的生命周期包括创建、启动、暂停、恢复和销毁等阶段。Docker 提供了一系列命令来管理容器的生命周期，如 docker create、docker start、docker stop 等。

7. Docker 常用实例代码

7.1 创建并运行一个容器

bash 复制代码 
docker run -d --name mycontainer nginx:latest

7.2 查看容器日志

bash 复制代码 
docker logs mycontainer

7.3 进入容器内部

bash 复制代码 
docker exec -it mycontainer /bin/bash

7.4 构建镜像

Dockerfile：

Dockerfile 复制代码 
FROM ubuntu:latest
RUN apt-get update && apt-get install -y nginx
CMD ["nginx", "-g", "daemon off;"]

构建镜像：

bash 复制代码 
docker build -t mynginx .

8. 前端项目docker实战

我们都知道，前端项目的版本迭代是非常频繁的，尤其大型的前端项目，要经历build编译，打包，线上发布，这一套流程下来，要浪费很多时间，现在我们用docker去镜像打包前端项目，并把镜像推到私有仓库，我们只需要tag好打包的镜像版本，发布时，修改一下镜像版本，那么我们的线上环境就可以丝滑切换版本了，发布时就不必担心因为一些着急忙慌的手误，省下一些不必要的麻烦了，用户体验杠杠的，老板都说几点几分发，咱就几点几分发布，秒回boss。

首先，我们要在前端项目的根目录下，创建一个Dockerfile文件，Dockerfile 中需要指定基础镜像、拷贝项目文件、安装依赖、运行构建脚本等。

8.1 开发环境的前端静态项目实例

如果这个前端项目只是一个静态页面，先简单写一个实例如下：

javascript 复制代码 
# 使用 Node.js 官方提供的镜像作为基础镜像，最好这里的node版本环境要和你项目的node版本保持一致
FROM node:14

# 设置工作目录
WORKDIR /app

# 拷贝 package.json 和 package-lock.json 到工作目录
COPY package*.json ./

# 安装项目依赖
RUN npm install

# 拷贝项目文件到工作目录
COPY . .

# 构建生产环境版本
RUN npm run build

# 设置容器启动命令
CMD ["npm", "start"]

构建 Docker 镜像 ：在项目根目录下执行 docker build 命令来构建 Docker 镜像。例如：

bash 复制代码 
docker build -t my-react-app .

运行 Docker 容器 ：使用 docker run 命令来运行 Docker 容器，并将端口映射到宿主机上。例如：

bash 复制代码 
docker run -d -p 8080:3000 my-react-app

8.2 生产环境的前端动态页面实例

如果是生产环境中，复杂的动态页面，还需要配置 Nginx 等反向代理服务器来提供文件服务，并将其与后端 API 进行集成。下面是一个简单的示例来说明如何在 Docker 中配置 Nginx 来提供前端静态文件服务并与后端 API 集成。这样可以实现更好的性能、安全性和灵活性。

下面是一个简单的示例来说明如何在 Docker 中配置 Nginx 来提供前端静态文件服务并与后端 API 集成。

假设有一个前端 React 项目和一个后端 Node.js API 项目，它们分别运行在不同的 Docker 容器中，并通过 Nginx 进行集成。

首先，需要准备一个 Nginx 的配置文件，示例如下：

nginx 复制代码 
# nginx.conf

# 定义 HTTP 服务器
server {
    # 监听 80 端口
    listen 80;

    # 定义前端静态文件服务的位置
    location / {
        # 指定前端静态文件的目录
        root /usr/share/nginx/html;
        index index.html index.htm;
        try_files $uri $uri/ /index.html;
    }

    # 定义后端 API 的代理转发
    location /api {
        # 指定后端 API 服务的地址
        proxy_pass http://backend-api:3000;
        proxy_set_header Host $host;
        proxy_set_header X-Real-IP $remote_addr;
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
        proxy_set_header X-Forwarded-Proto $scheme;
    }
}

在上面的配置中：

  • location / 指定了前端静态文件的服务位置，并且使用 try_files 指令来配置路由重定向，以确保前端单页应用在刷新时能够正确地定位到对应的页面。
  • location /api 定义了后端 API 的代理转发，将所有以 /api 开头的请求转发到后端 API 服务的地址。

然后，需要编写一个 Dockerfile 来构建包含 Nginx 配置文件的 Nginx 镜像，并将前端静态文件拷贝到相应的目录中。

Dockerfile 复制代码 
# Dockerfile

# 使用 Nginx 官方提供的基础镜像
FROM nginx:latest

# 拷贝自定义的 Nginx 配置文件到容器中
COPY nginx.conf /etc/nginx/nginx.conf

# 拷贝前端静态文件到 Nginx 默认的静态文件目录
COPY build /usr/share/nginx/html

# 暴露 Nginx 默认的 HTTP 端口
EXPOSE 80

最后，通过 Dockerfile 构建镜像，并运行容器。

bash 复制代码 
# 构建 Nginx 镜像
docker build -t my-nginx .

# 运行 Nginx 容器，并将其连接到后端 API 容器
docker run -d -p 8080:80 --name nginx-container --link backend-api:backend-api my-nginx

这样，Nginx 将会提供静态文件服务，并将后端 API 的请求代理转发到对应的后端 API 容器中。

8.3 打tag版本

如果想要docker打tag ，比如v1.0.1版本，在 Docker 中，使用 docker tag 命令可以为本地镜像打标签。该命令的基本语法如下：

css 复制代码 
docker tag SOURCE_IMAGE[:TAG] TARGET_IMAGE[:TAG]

其中：

  • SOURCE_IMAGE 是要标记的本地镜像的名称或 ID。
  • TARGET_IMAGE 是要创建的新标签的名称。
  • [:TAG] 是可选的标签名称，如果不指定，默认使用 latest 标签。

下面是一个具体的示例，假设有一个名为 my-image 的本地镜像，现在要为其打一个名为 v1.0.1 的标签：

bash 复制代码 
docker tag my-image my-repo/my-image:v1.0.1

这条命令将 my-image 标记为 my-repo/my-image:v1.0。如果要将标签推送到 Docker Hub 或者其他镜像仓库，需要使用 docker push 命令。例如：

bash 复制代码 
docker push my-repo/my-image:v1.0

最后也是全文最重要的，你的鼓励是我持之以恒码字的动力，欢迎关注搜藏交流，感谢，共同进步！

相关推荐
sg_knight7 分钟前
VSCode如何修改默认扩展路径和用户文件夹目录到D盘
前端·ide·vscode·编辑器·web
一个处女座的程序猿O(∩_∩)O16 分钟前
完成第一个 Vue3.2 项目后，这是我的技术总结
前端·vue.js
mubeibeinv17 分钟前
项目搭建+图片(添加+图片)
java·服务器·前端
dessler22 分钟前
Docker-如何启动docker
运维·docker·云原生·容器·eureka
zhy2956322 分钟前
【DOCKER】基于DOCKER的服务之DUFS
运维·docker·容器·dufs
逆旅行天涯23 分钟前
【Threejs】从零开始（六）--GUI调试开发3D效果
前端·javascript·3d
m0_748255261 小时前
easyExcel导出大数据量EXCEL文件，前端实现进度条或者遮罩层
前端·excel
web147862107231 小时前
C# .Net Web 路由相关配置
前端·c#·.net
m0_748247801 小时前
Flutter Intl包使用指南：实现国际化和本地化
前端·javascript·flutter
飞的肖1 小时前
前端使用 Element Plus架构vue3.0实现图片拖拉拽，后等比压缩，上传到Spring Boot后端
前端·spring boot·架构
热门推荐
01〔AI 绘画〕Stable Diffusion 之 解决绘制多人或面部很小的人物时面部崩坏问题 篇02ARM学习（31）编译器对overlay方式的支持03玄机平台应急响应—webshell查杀04解决java读取EXCEL数据变成科学计数法的问题05校验 GPT-4 真实性的三个经典问题：快速区分 GPT-3.5 与 GPT-4，并提供免费测试网站06Docker 夺命连环 15 问07DisplayPort AltMode On Type-c协议_Ver2.0(学习笔记)08基于大语言模型（LLM）的合成数据生成、策展和评估的综述09(欧拉)openEuler系统添加网卡文件配置流程、(欧拉)openEuler系统手动配置ipv6地址流程、(欧拉)openEuler系统网络管理说明106个主流的工业3D管道设计软件