前端开发者的 Docker 学习记录

人工智能的苟富贵

已于 2024-07-19 18:11:02 修改

阅读量496

点赞数 4

分类专栏：软件工程文章标签： docker 学习容器

于 2024-07-19 17:48:05 首次发布

本文链接：https://blog.csdn.net/qq_40791475/article/details/140554978

版权

软件工程专栏收录该内容

2 篇文章 0 订阅

订阅专栏

前言

作为一名前端开发者，我一直对如何更高效地管理和部署应用程序感兴趣。Docker 是一种流行的容器化技术，可以帮助我们创建轻量级、可移植和自给自足的容器来运行应用程序。本文记录了我从零开始学习 Docker 的过程，希望对其他前端开发者有所帮助。

一、什么是 Docker？

Docker 是一个开源的容器化平台，允许开发者打包应用及其依赖项到一个轻量级、可移植和自给自足的容器中。这些容器可以在任何支持 Docker 的系统上运行，确保在开发、测试和生产环境中的一致性。

二、安装 Docker

在不同操作系统上安装 Docker 的步骤如下：

Windows

1.	下载 Docker Desktop for Windows：https://www.docker.com/products/docker-desktop
2.	运行安装程序并按照提示完成安装。
3.	安装完成后，启动 Docker Desktop 并确保其正常运行。

macOS

1.	下载 Docker Desktop for Mac：https://www.docker.com/products/docker-desktop
2.	运行安装程序并按照提示完成安装。
3.	安装完成后，启动 Docker Desktop 并确保其正常运行。

Linux

在不同的 Linux 发行版上安装 Docker 的方法略有不同。以下是在 Ubuntu 上的安装步骤：

sudo apt-get update
sudo apt-get install \
    ca-certificates \
    curl \
    gnupg \
    lsb-release
sudo mkdir -p /etc/apt/keyrings
curl -fsSL https://download.docker.com/linux/ubuntu/gpg | sudo gpg --dearmor -o /etc/apt/keyrings/docker.gpg
echo \
  "deb [arch=$(dpkg --print-architecture) signed-by=/etc/apt/keyrings/docker.gpg] https://download.docker.com/linux/ubuntu \
  $(lsb_release -cs) stable" | sudo tee /etc/apt/sources.list.d/docker.list > /dev/null
sudo apt-get update
sudo apt-get install docker-ce docker-ce-cli containerd.io docker-compose-plugin

三、Docker 的基本概念

在深入学习 Docker 之前，我们需要了解一些基本概念：

•	镜像（Image）：一个只读的模板，用于创建容器。镜像包含了应用运行所需的所有文件和依赖项。
•	容器（Container）：由镜像创建的可运行实例。容器是独立、可移植的，包含了运行应用所需的所有环境。
•	Dockerfile：一个文本文件，包含了构建镜像的指令。
•	Docker Compose：一个工具，用于定义和运行多容器 Docker 应用。

四、构建一个简单的 Docker 镜像

让我们从构建一个简单的 Docker 镜像开始。假设我们有一个简单的 React 应用。

目录结构

my-react-app/
├── Dockerfile
├── package.json
└── src/
    └── index.js

Dockerfile

# 使用官方的 Node.js 镜像作为基础镜像
FROM node:14-alpine
# 设置工作目录
WORKDIR /app
# 复制 package.json 和 package-lock.json
COPY package*.json ./
# 安装依赖
RUN npm install
# 复制项目文件
COPY . .
# 构建应用
RUN npm run build
# 安装 serve 包用于提供静态文件服务
RUN npm install -g serve
# 运行应用
CMD ["serve", "-s", "build"]

构建镜像

在项目根目录运行以下命令来构建 Docker 镜像：

docker build -t my-react-app .

运行容器

构建完成后，运行以下命令启动容器：

docker run -p 3000:5000 my-react-app

访问 http://localhost:3000 即可看到应用程序。

五、Dockerfile 详解

Dockerfile 是一个包含了一系列指令的文本文件，用于定义如何构建 Docker 镜像。常用指令包括：

•	FROM：指定基础镜像。
•	WORKDIR：设置工作目录。
•	COPY：复制文件或目录。
•	RUN：在镜像内执行命令。
•	CMD：指定容器启动时要运行的命令。

以下是一个更详细的 Dockerfile 示例：

# 使用官方的 Node.js 镜像作为基础镜像
FROM node:14-alpine
# 设置工作目录
WORKDIR /app
# 复制 package.json 和 package-lock.json
COPY package*.json ./
# 安装依赖
RUN npm install
# 复制项目文件
COPY . .
# 构建应用
RUN npm run build
# 安装 serve 包用于提供静态文件服务
RUN npm install -g serve
# 设置环境变量
ENV NODE_ENV production
# 运行应用
CMD ["serve", "-s", "build"]

指令详解

•	FROM：指定基础镜像，通常是一个操作系统镜像或包含我们所需环境的镜像。
•	WORKDIR：设置工作目录，所有后续的 COPY、RUN 指令都将在这个目录下执行。
•	COPY：将文件从主机复制到镜像中。
•	RUN：在镜像内执行命令，例如安装依赖、构建应用等。
•	ENV：设置环境变量。
•	CMD：指定容器启动时要运行的命令。CMD 指令只有一个，通常用于指定容器启动时的默认行为。

六、多阶段构建

多阶段构建允许你在一个 Dockerfile 中使用多个 FROM 语句，从而减少最终镜像的大小。多阶段构建通常用于将构建和运行环境分离。

示例：

# 构建阶段
FROM node:14-alpine as build-stage
WORKDIR /app
COPY package*.json ./
RUN npm install
COPY . .
RUN npm run build


# 生产阶段
FROM nginx:alpine
COPY --from=build-stage /app/build /usr/share/nginx/html

七、Docker Compose 简介

Docker Compose 是一个用于定义和运行多容器 Docker 应用的工具。你可以使用 docker-compose.yml 文件来配置应用的服务。

示例 docker-compose.yml 文件

version: '3'
services:
  web:
    image: my-react-app
    ports:
      - "3000:5000"
  api:
    image: my-api
    ports:
      - "4000:4000"

运行以下命令启动所有服务：

docker-compose up

八、使用 Docker 部署前端应用

假设我们要使用 Docker 部署一个 React 应用。我们可以使用 Nginx 作为静态文件服务器。

示例 Dockerfile

# 构建阶段
FROM node:14-alpine as build-stage
WORKDIR /app
COPY package*.json ./
RUN npm install
COPY . .
RUN npm run build

# 生产阶段
FROM nginx:alpine
COPY --from=build-stage /app/build /usr/share/nginx/html
EXPOSE 80
CMD ["nginx", "-g", "daemon off;"]

构建和运行

构建镜像：

docker build -t my-react-app .

运行容器：

docker run -p 80:80 my-react-app

访问 http://localhost 即可看到应用程序。

九、环境变量的使用

在实际的应用中，我们经常需要使用环境变量来配置应用。例如，API 的根 URL、数据库连接字符串等。

在 Docker 中，可以通过 ENV 指令设置环境变量，也可以在运行容器时通过 -e 选项传递环境变量。

示例 Dockerfile

# 构建阶段
FROM node:14-alpine as build-stage
WORKDIR /app
COPY package*.json ./
RUN npm install
COPY . .
RUN npm run build

# 生产阶段
FROM nginx:alpine
COPY --from=build-stage /app/build /usr/share/nginx/html
EXPOSE 80

# 设置环境变量
ENV API_URL=https://api.example.com

# 替换环境变量并启动 Nginx
CMD ["sh", "-c", "envsubst < /etc/nginx/conf.d/default.conf.template > /etc/nginx/conf.d/default.conf && nginx -g 'daemon off;'"]

在这个示例中，我们使用 envsubst 工具将环境变量替换到 Nginx 配置模板中，然后启动 Nginx。envsubst 是一个 GNU 工具，可以将环境变量的值替换到文件中。

示例 Nginx 配置模板 default.conf.template

server {
  listen 80;
  location / {
    root /usr/share/nginx/html;
    try_files $uri $uri/ /index.html;
  }
  location /api/ {
    proxy_pass ${API_URL};
  }
}

在这个配置模板中，${API_URL} 将在运行时被环境变量 API_URL 的值替换。

十、常见问题和解决方案

1.构建镜像时出错

•	问题：在构建镜像时遇到错误，例如找不到文件或依赖包。
•	解决方案：确保 Dockerfile 语法正确，并且所有需要的文件都在正确的位置。检查 COPY 指令的源路径和目标路径是否正确。

2.容器无法启动

•	问题：容器启动后立即退出。
•	解决方案：检查 CMD 指令和暴露的端口，确保它们与应用程序的配置一致。可以通过 docker logs <container_id> 查看容器的日志，找出具体的错误信息。

2.环境变量未正确替换

•	问题：环境变量未在容器中正确替换。
•	解决方案：确保在 Dockerfile 中正确设置了环境变量，并在需要时使用 envsubst 或其他替换工具将环境变量的值替换到文件中。

总结

通过这次学习，我详细了解了 Docker 的基础知识，掌握了如何使用 Docker 构建和部署前端应用。Docker 提供了一种高效、可移植的方式来管理应用环境，使开发、测试和生产环境保持一致。以下是学习 Docker 的几个关键点：

•	镜像和容器：理解镜像和容器的概念，学习如何构建和运行容器。
•	Dockerfile：掌握 Dockerfile 的基本语法和常用指令，通过编写 Dockerfile 来自动化构建过程。
•	多阶段构建：学习如何使用多阶段构建来优化镜像大小和构建效率。
•	Docker Compose：了解如何使用 Docker Compose 来管理多容器应用，通过 docker-compose.yml 文件来定义和运行服务。
•	环境变量：学习如何在 Docker 中使用环境变量来配置应用，并在运行时进行替换。

通过不断的实践和探索，我相信 Docker 将成为我日常开发中的一个重要工具，帮助我更加高效地管理和部署应用程序。希望这篇学习记录对其他前端开发者有所帮助，能够为他们学习 Docker 提供一些参考和启示。

参考资料

Docker 官方文档
 DockerHub
Node.js 官方文档
 Nginx 官方文档

如果有任何问题或者需要进一步的帮助，欢迎随时提问。

人工智能的苟富贵

关注

4
点赞
踩
8

收藏

觉得还不错? 一键收藏
0
评论
前端开发者的 Docker 学习记录

记录了前端开发者学习 Docker 的全过程，涵盖了 Docker 的基本概念、安装方法和实际应用。通过详细示例，讲解了如何编写 Dockerfile、构建和运行容器、使用多阶段构建优化镜像大小，以及通过 Docker Compose 管理多容器应用。文章还展示了如何使用 Docker 和 Nginx 部署前端应用，并提供了使用环境变量的方法
复制链接

扫一扫