Docker：轻量级容器化技术的实战指南

3367 字

17 分钟

Docker：轻量级容器化技术的实战指南

2025-11-19

分享记录

Docker

/

容器

前言#

最近这段平常的学习空闲时间，闲来无事，回顾我这些年的开发历程，从最初的手动部署环境，到使用虚拟机，再到现在的容器化技术，真是感慨万千。记得刚开始工作的时候，每次为新项目配置开发环境都是一场噩梦——不同项目需要不同版本的依赖，经常出现”在我机器上能跑”的经典问题。

后来接触了虚拟机，虽然解决了环境隔离的问题，但虚拟机太重了，启动慢，占用资源多，迁移也不方便。直到我发现了Docker这个神器，才真正体会到什么是”一次构建，到处运行”的便利。

作为一个Coder，怎么能不掌握Docker呢？这相当于是你在云时代的生存技能，是团队协作的基石，更是现代应用部署的标准配置。

所以在其我的开发流程中，Docker已经成为了不可或缺的一部分。它不仅让我摆脱了环境配置的困扰，还让我的应用部署变得异常简单和可靠。

让我们开始吧#

首先我们需要用到下列东西#

能够独立思考的大脑 x 1：用于理解Docker的核心概念和解决可能遇到的问题
Docker Desktop x 1：Windows/Mac用户可以直接下载这个集成环境，Linux用户需要单独安装Docker引擎
Docker Hub账号 x 1：用于拉取和推送镜像，类似于GitHub之于代码
**Git版本控制工具(链接1)** x 1：用于管理你的Dockerfile和docker-compose.yml文件
一个好奇的心 x 1：Docker的世界很有趣，值得你深入探索

Docker是什么？为什么需要它？#

Docker是一个开源的容器化平台，它让你能够将应用及其所有依赖打包到一个轻量级、可移植的容器中。与传统的虚拟机不同，Docker容器共享主机操作系统内核，因此更加轻量级和高效。

Docker的核心优势：

轻量级：容器启动秒级完成，资源占用少
可移植性：一次构建，到处运行
隔离性：每个容器都是独立的运行环境
效率：比虚拟机更高效，性能损失小

快速上手Docker#

1. 安装Docker#

Mac/Windows用户：

直接下载Docker Desktop并安装，按照向导完成设置即可。

Linux用户(Ubuntu为例)：

1
# 卸载旧版本
2
sudo apt-get remove docker docker-engine docker.io containerd runc
3

4
# 安装必要依赖
5
sudo apt-get update
6
sudo apt-get install \
7
    ca-certificates \
8
    curl \
9
    gnupg \
10
    lsb-release
11

12
# 添加Docker官方GPG密钥
13
sudo mkdir -p /etc/apt/keyrings
14
curl -fsSL https://download.docker.com/linux/ubuntu/gpg | sudo gpg --dearmor -o /etc/apt/keyrings/docker.gpg
15

16
# 设置仓库
17
echo \
18
  "deb [arch=$(dpkg --print-architecture) signed-by=/etc/apt/keyrings/docker.gpg] https://download.docker.com/linux/ubuntu \
19
  $(lsb_release -cs) stable" | sudo tee /etc/apt/sources.list.d/docker.list > /dev/null
20

21
# 安装Docker引擎
22
sudo apt-get update
23
sudo apt-get install docker-ce docker-ce-cli containerd.io docker-buildx-plugin docker-compose-plugin
24

25
# 验证安装
26
sudo docker run hello-world

2. Docker核心概念#

镜像(Image)：只读的模板，包含运行应用所需的代码、运行时、库和环境变量
容器(Container)：镜像的可运行实例
Dockerfile：定义如何构建镜像的文本文件
Docker Hub：官方的镜像仓库，类似于GitHub之于代码

3. 第一个Docker实践：运行一个Nginx web服务器#

1
# 拉取官方Nginx镜像
2
docker pull nginx
3

4
# 运行Nginx容器
5
docker run -d -p 8080:80 --name my-nginx nginx
6

7
# 访问 http://localhost:8080 查看运行结果

就这么简单！你已经成功运行了一个Web服务器。

4. 创建自己的Docker镜像#

让我们创建一个简单的Node.js应用的Docker镜像：

1. 项目结构：

1
my-node-app/
2
├── app.js
3
├── package.json
4
└── Dockerfile

2. Dockerfile示例：

1
# 使用官方Node.js镜像作为基础镜像
2
FROM node:18-alpine
3

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

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

10
# 安装依赖
11
RUN npm install
12

13
# 复制应用源代码
14
COPY . .
15

16
# 暴露端口
17
EXPOSE 3000
18

19
# 定义容器启动时执行的命令
20
CMD ["node", "app.js"]

3. 构建和运行：

1
# 在项目目录下构建镜像
2
docker build -t my-node-app .
3

4
# 运行容器
5
docker run -d -p 3000:3000 --name my-running-app my-node-app
6

7
# 访问 http://localhost:3000

Docker Compose：多容器应用管理#

对于复杂的应用，通常需要多个服务协同工作（如Web应用+数据库）。这时候就需要Docker Compose了。

docker-compose.yml示例：

1
version: '3.8'
2

3
services:
4
  web:
5
    build: .
6
    ports:
7
      - "3000:3000"
8
    depends_on:
9
      - redis
10
    environment:
11
      - NODE_ENV=production
12

13
  redis:
14
    image: redis:alpine
15
    ports:
16
      - "6379:6379"

使用方法：

1
# 启动所有服务
2
docker-compose up -d
3

4
# 查看运行中的服务
5
docker-compose ps
6

7
# 停止并删除服务
8
docker-compose down

实战技巧和最佳实践#

1. Dockerfile优化技巧#

使用官方镜像：尽量使用官方维护的镜像
选择合适的基础镜像：如使用alpine版本减小镜像大小
多阶段构建：减小最终镜像大小
合理使用缓存：正确排序Dockerfile指令以利用构建缓存

多阶段构建示例：

1
# 构建阶段
2
FROM node:18 AS builder
3
WORKDIR /app
4
COPY . .
5
RUN npm install && npm run build
6

7
# 生产阶段
8
FROM node:18-alpine
9
WORKDIR /app
10
COPY --from=builder /app/package*.json ./
11
COPY --from=builder /app/dist ./dist
12
RUN npm install --production
13
EXPOSE 3000
14
CMD ["node", "dist/app.js"]

2. 常用命令速查#

1
# 镜像相关
2
docker images                  # 列出所有镜像
3
docker pull <image>            # 拉取镜像
4
docker rmi <image>             # 删除镜像
5

6
# 容器相关
7
docker ps                      # 列出运行中的容器
8
docker ps -a                   # 列出所有容器
9
docker run [options] <image>   # 运行容器
10
docker start/stop/restart <container>  # 控制容器
11
docker exec -it <container> /bin/bash  # 进入容器
12
docker logs <container>        # 查看容器日志
13
docker rm <container>          # 删除容器
14

15
# 镜像构建
16
docker build -t <tag> .        # 构建镜像
17

18
# 清理
19
docker system prune            # 清理无用资源

3. 数据持久化#

容器是临时的，要持久化数据需要使用卷(volumes)或绑定挂载(bind mounts)：

1
# 创建卷
2
docker volume create my-volume
3

4
# 运行容器并挂载卷
5
docker run -d -v my-volume:/app/data my-image
6

7
# 或者使用绑定挂载(宿主机目录映射到容器)
8
docker run -d -v /host/path:/container/path my-image

结语#

Docker真的改变了我的开发方式。它不仅解决了环境一致性的问题，还让部署变得如此简单。还记得我第一次在生产环境使用Docker部署应用时，那种”无论在哪里都能完美运行”的安心感，是传统部署方式无法给予的。

作为一个Coder，掌握Docker不仅仅是为了部署应用，更是为了理解现代软件架构和DevOps实践的基础。它让我们能够更专注于业务逻辑的开发，而不是环境配置的琐事。

现在，每当我开始一个新项目，第一件事就是写Dockerfile和docker-compose.yml。这已经成为了我的标准工作流程，也是我推荐给所有开发者的最佳实践。

Docker的魅力在于：一次构建，到处运行；简单配置，复杂管理；小而强大，轻而可靠。

开始使用Docker吧，你会发现它将成为你开发工具箱中不可或缺的利器！根据我的写作风格和这样的格式写一篇关于前端为什么要尽量所以svg图标而不是。png,jpg等的博文豆包：#

title: 前端开发：为什么要优先选择SVG图标而非PNG/JPG published: 2025-12-14 description: ‘SVG图标凭什么成为前端首选？看完这篇，你会彻底抛弃那些笨重的位图图标！’ image: ‘/images/svg-logo-guide.svg’ tags: [前端开发, SVG, 图标设计] category: ‘技术分享’ draft: false lang: ‘zh_CN’#

前言#

作为一名深耕前端的开发者，我曾在图标选型上踩过不少坑。还记得刚入行时，项目里塞满了PNG格式的图标，每次适配不同分辨率的设备，都要准备 @1x、@2x、@3x 多套资源，不仅文件夹臃肿不堪，还经常出现图标模糊、拉伸变形的问题。

后来接触到SVG图标，才发现这才是前端图标的“最优解”。它不仅完美解决了位图的适配痛点，还能大幅优化项目性能、提升开发效率。如今在我的前端项目里，SVG图标已经成为标配，那些PNG、JPG格式的图标，早已被我扔进了“淘汰清单”。

如果你还在为图标适配、体积优化头疼，那这篇文章一定会给你带来新的启发。

让我们开始吧#

首先我们需要用到下列东西#

能够独立思考的大脑 x 1：用于理解SVG的矢量特性和前端应用场景
代码编辑器 x 1：推荐VS Code，搭配SVG相关插件可提升开发效率
矢量绘图工具 x 1：如Figma、Inkscape，用于设计或编辑SVG图标
前端项目环境 x 1：用于实战SVG图标的引入与使用
一颗追求极致性能的心 x 1：毕竟优秀的前端开发者，都对性能有执念

SVG是什么？为什么前端要优先用它做图标？#

SVG的全称是可缩放矢量图形，它是一种基于XML的矢量图像格式。与PNG、JPG这类基于像素的位图不同，SVG通过数学公式描述图形的路径、形状和颜色，这就决定了它天生适合作为前端图标使用。

SVG图标对比位图图标的核心优势：

无限缩放不失真：无论放大多少倍，边缘始终清晰锐利，完美适配从手机到4K大屏的所有设备
体积更小更轻量：结构简单的SVG图标体积远小于同等视觉效果的PNG，尤其在高分辨率场景下优势明显
灵活可控可定制：可直接通过CSS修改颜色、大小、透明度，甚至实现动画效果，无需更换图片资源
支持语义化与无障碍：作为XML文档，SVG可添加title、desc标签，提升页面的无障碍访问性

快速上手SVG图标#

1. 获取SVG图标#

获取SVG图标的方式有很多，推荐几种常用途径：

开源图标库：如Iconfont、Font Awesome、Material Icons，可直接下载SVG格式图标
矢量工具绘制：用Figma、Sketch等工具设计图标，导出为SVG文件
在线转换：将现有位图通过在线工具转换为SVG（注意转换后的文件可能需要手动优化）

2. 前端引入SVG图标的三种方式#

方式一：直接内联到HTML中 这是最灵活的方式，可直接通过CSS控制样式：

1
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
2
  <path d="M12 2C6.48 2 2 6.48 2 12C2 17.52 6.48 22 12 22C17.52 22 22 17.52 22 12C22 6.48 17.52 2 12 2ZM12 20C7.59 20 4 16.41 4 12C4 7.59 7.59 4 12 4C16.41 4 20 7.59 20 12C20 16.41 16.41 20 12 20ZM16.59 7.58L10 14.17L7.41 11.59L6 13L10 17L18 9L16.59 7.58Z" fill="#333333"/>
3
</svg>

方式二：作为图片资源引入 与引入PNG的方式类似，简单快捷但样式可控性较弱：

1
<img src="./icons/arrow-right.svg" alt="箭头向右" class="icon">

方式三：使用SVG Sprite雪碧图 适合项目中有大量图标的场景，可减少HTTP请求：

1
<!-- 定义Sprite -->
2
<svg xmlns="http://www.w3.org/2000/svg" style="display: none;">
3
  <symbol id="icon-user" viewBox="0 0 24 24">
4
    <path d="M12 12C14.21 12 16 10.21 16 8C16 5.79 14.21 4 12 4C9.79 4 8 5.79 8 8C8 10.21 9.79 12 12 12ZM12 14C9.33 14 4 15.34 4 18V20H20V18C20 15.34 14.67 14 12 14Z"/>
5
  </symbol>
6
  <symbol id="icon-settings" viewBox="0 0 24 24">
7
    <path d="M19.14,12.94c0.04-0.3,0.06-0.61,0.06-0.94c0-0.32-0.02-0.64-0.07-0.94l2.03-1.58c0.18-0.14,0.23-0.41,0.12-0.61 l-1.92-3.32c-0.12-0.22-0.37-0.29-0.59-0.22l-2.39,0.96c-0.5-0.38-1.03-0.7-1.62-0.94L14.4,2.81c-0.04-0.24-0.24-0.41-0.48-0.41 h-3.84c-0.24,0-0.43,0.17-0.47,0.41L9.25,5.35C8.66,5.59,8.12,5.92,7.63,6.29L5.24,5.33c-0.22-0.08-0.47,0-0.59,0.22L2.74,8.87 C2.62,9.08,2.66,9.34,2.86,9.48l2.03,1.58C4.84,11.36,4.8,11.69,4.8,12s0.02,0.64,0.07,0.94l-2.03,1.58 c-0.18,0.14-0.23,0.41-0.12,0.61l1.92,3.32c0.12,0.22,0.37,0.29,0.59,0.22l2.39-0.96c0.5,0.38,1.03,0.7,1.62,0.94l0.36,2.54 c0.05,0.24,0.24,0.41,0.48,0.41h3.84c0.24,0,0.44-0.17,0.47-0.41l0.36-2.54c0.59-0.24,1.13-0.56,1.62-0.94l2.39,0.96 c0.22,0.08,0.47,0,0.59-0.22l1.92-3.32c0.12-0.22,0.07-0.47-0.12-0.61L19.14,12.94z M12,15.6c-1.98,0-3.6-1.62-3.6-3.6 s1.62-3.6,3.6-3.6s3.6,1.62,3.6,3.6S13.98,15.6,12,15.6z"/>
8
  </symbol>
9
</svg>
10

11
<!-- 使用图标 -->
12
<svg class="icon" width="24" height="24">
13
  <use xlink:href="#icon-user"></use>
14
</svg>

3. 给SVG图标添加动画效果#

SVG的强大之处在于支持丰富的动画，比如给图标加个旋转效果：

1
.icon-rotate {
2
  animation: rotate 2s linear infinite;
3
}
4

5
@keyframes rotate {
6
  from { transform: rotate(0deg); }
7
  to { transform: rotate(360deg); }
8
}