1. 前言

曾几何时想到部署那不是运维的工作吗？

但最近在尝试部署自己的应用，docker 这一环终究是逃不过。这个技术对于前端来说，还是稍微有一点陌生。但如果你曾经也和我一样把台式电脑当作自己的游戏机，用光盘安装过单机游戏，然后打开游戏玩到“昏天黑地”，那么看完这一篇文章，你一定会使用 docker。

2. 什么是 docker？

在说 docker 之前，我们需要了解虚拟机。虚拟机说得通俗一点，就是依托本地物理机的环境构建出的另一台电脑：

虚拟机

docker

与虚拟机相比，docker 无需虚拟硬件环境然后再跑一个操作系统，它是一种轻量级的虚拟化，这种虚拟化技术称为容器化。

docker 利用操作系统的核心功能，如 Linux 的命名空间、控制组（cgroups）等特性，来创建独立的、隔离的运行环境，这个环境称为容器。

每个容器都可以运行一个或多个应用程序，并提供了与物理计算机相似的隔离性和资源管理能力，可以在不同的计算机或操作系统上运行应用程序，不必担心环境差异或依赖项冲突。

总结一下就是：docker 启动的容器共用宿主机的内核，不同容器之间是完全独立的。这样一来就可以保证需要部署的应用始终处于统一的环境配置下，方便持续集成和持续交付。另外，还可以利用这个特性创建统一的开发环境。

3. Docker 的组成

3.1 docker 的感性理解

docker 作为一个工具，它的三件套是：

Dockerfile
image（镜像）
container（容器）

所谓 Dockerfile 就是某个环境的设计稿或蓝图，image 是依照 Dockerfile 刻录下来的镜像，用 image 就可以启动一个或多个独立环境，也就是 container（容器）。

如果非要类比成现实生活中的 🌰，大概是这样：

男生都有热爱游戏的人生阶段。那时候家里换了新电脑，别提多兴奋，我立马找到小伙伴东拼西凑出了一包游戏光碟，什么 CS1.5，CS1.6，魔兽争霸、星际争霸，仙剑奇侠传三、仙剑客栈、三国志11、侠盗飞车……应有尽有。之后，小伙伴们高高兴兴地团坐在一起，我按下主机上的 open 键打开了光驱，拿着 CS 1.5 的游戏光碟扣了进去。

close-我的电脑-F盘-双击-选择安装目录-安装，光碟在光驱中疯狂转动了一阵，一气呵成，双击运行 CS 1.5，是兄弟就在沙漠地图等着我。

当然，在家里联网以后，我就从游侠网上直接下载游戏安装包了，主打一个快乐。

在这段童年趣事中，那一张一张的游戏光碟就是不同的 image，双击运行（run）起来的 CS1.5 就是一个 container。而不同游戏厂商开发出来的游戏设计就是 Dockerfile，根据这份 Dockerfile 将文件刻录进光碟就是 image 的构建（build）。至于 CS1.5 和 1.6 或仙剑奇侠传一和三，这种游戏版本的区别，可以理解为不同版本（tag）的 image。从游侠网直接下载安装包就是拉取 image（pull），而游侠网作为一个游戏平台就是 docker hub —— docker 官方的镜像中心。

3.2 docker 使用流程

如果将上述流程整理出来，大概是这样的：

准备环境：首先，需要在计算机上安装 docker。这类似于当初安装游戏的过程。

docker —version
docker info

下载/构建镜像：类似于从游侠网下载游戏安装包，docker 使用镜像来构建容器。镜像是一个预先配置好的文件，其中包含了一个完整的应用程序及其依赖项。可以从 Docker Hub 等镜像仓库中搜索并下载适合需求的镜像。或者自己准备一个刻录机，自己刻录游戏，那这就是构建镜像。

docker pull
docker build -t

创建容器：一旦下载了所需的镜像，就可以使用 docker 命令创建容器。容器是基于镜像创建的运行实例，类似于当初安装的游戏。我们可以指定容器的各种参数，例如端口映射、文件挂载等。

bash

复制代码

docker run -d --name  -p 8080:80 -v $(pwd):/app

运行应用程序：一旦容器创建完成，就可以使用 docker 命令来启动容器并运行应用程序。就像您当初双击运行游戏一样，docker 会启动容器并运行您所需的应用程序。

docker exec -it

3.3 docker 常用指令

容器管理

docker run ：运行一个新的容器
docker start ：启动一个已停止的容器
docker stop ：停止一个正在运行的容器
docker restart ：重启一个容器
docker rm ：删除一个容器
docker ps：列出当前正在运行的容器
docker ps -a：列出所有容器，包括停止的容器

镜像管理

docker images：列出本地的镜像
docker pull ：下载一个镜像
docker push ：将一个镜像推送到远程仓库
docker build -t ：根据 Dockerfile 构建一个镜像
docker rmi ：删除一个本地的镜像

日志和输出

docker logs ：查看容器的日志
docker exec -it ：在正在运行的容器中执行命令
docker cp : ：将容器中的文件复制到本地

网络和端口

docker network ls：列出 Docker 网络
docker network create ：创建一个新的 Docker 网络
docker network connect ：将容器连接到指定的网络
docker port ：显示容器的端口映射

数据管理

docker volume ls：列出 Docker 卷
docker volume create ：创建一个新的 Docker 卷
docker volume inspect ：查看卷的详细信息
docker volume rm ：删除一个 Docker 卷

其他常用指令：

docker info：显示系统信息
docker logs ：获取容器的 log 信息
docker inspect ：显示一个容器的具体配置信息

4. 部署前端项目

现在，让我们小试牛刀。

安装 docker 去 docker 官网安装，设置国内镜像源加速直接搜索教程，这两步我就略过了。

举个 🌰，如果我想要把前端项目部署到本地，我该怎么做？

4.1 准备前端项目源码

用 vite 火速创建一个 react + ts 项目：

npm create vite@latest my-react-app-docker-1 --template react-ts

创建完成后，打包项目代码：npm run build ，得到 dist 打包文件。

4.2 添加 nginx.conf

部署需要用到 nginx 服务器，这是一个高性能的开源Web服务器和反向代理服务器，它在处理高并发、负载均衡等方面表现卓越。下面是 nginx.conf 文件，属于 nginx 的主要配置文件，启动 nginx 服务后，将会根据这个文件来确定如何处理传入的请求和响应：

# 全局配置
user nginx;
worker_processes auto;
error_log /var/log/nginx/error.log warn;
pid /var/run/nginx.pid;
# 事件模块配置
events {
  use epoll; # 多路复用
  worker_connections 1024;
}
# HTTP模块配置
http {
  # MIME类型配置
  include /etc/nginx/mime.types;
  default_type application/octet-stream;
  # 日志格式配置
  log_format main '$remote_addr - $remote_user [$time_local] "$request" '
                  '$status $body_bytes_sent "$http_referer" '
                  '"$http_user_agent" "$http_x_forwarded_for"';
  # 访问日志配置
  access_log /var/log/nginx/access.log main;
  # Gzip压缩配置
  gzip on;
  gzip_comp_level 6;
  gzip_types text/plain text/css application/json application/javascript text/xml application/xml application/xml+rss text/javascript;
  # 服务器配置
  server {
      listen 80;
      server_name localhost;
      # 根目录配置
      root /usr/share/nginx/html;
      index index.html;
      # 其他路由配置
      location / {
          try_files $uri $uri/ /index.html;
      }
      # 静态文件缓存配置
      location ~* \.(jpg|jpeg|png|gif|ico|css|js)$ {
          expires 1d;
      }
  }
}

4.3 添加 Dockfile

在项目根目录下新建文件 Dockerfile，内容如下：

docker

复制代码

FROM nginx:stable-alpine3.17
COPY dist /usr/share/nginx/html
COPY nginx.conf /etc/nginx/nginx.conf

FROM nginx:stable-alpine3.17：这个指令指定了基础镜像，使用了名为 nginx:stable-alpine3.17 的基础镜像（优先从本地获取，如果本地没有，就从 docker hub 上拉取）。这个基础镜像是一个带有 nginx 的 Alpine Linux 镜像（Alpine 版本的镜像更加轻量），版本为 3.17。
COPY dist /usr/share/nginx/html：这个指令将当前目录下的 dist 目录中的内容复制到docker 镜像中的 /usr/share/nginx/html 目录下（这是 nginx 的默认的 html 目录）。
COPY nginx.conf /etc/nginx/nginx.conf：这个指令将当前目录下的 nginx.conf 文件复制到 docker 镜像中的 /etc/nginx/nginx.conf 文件中。这个文件是 nginx 的配置文件，通过复制到镜像中，可以在运行容器时使用自定义的 nginx 配置。

nginx:stable-alpine3.17 就是基础镜像，其他常用的基础镜像还有 ubuntu、node、nginx、postgres 等等，这些镜像是推荐提前就拉取到本地的，以后当本地构建镜像时，一旦用到就会用本地的，无需重新拉取远程的镜像。

现在拉取 nginx:stable-alpine3.17：

docker pull nginx:stable-alpine3.17

4.4 构建镜像

现在准备工作就绪了，让我们开始构建镜像：

docker build -t vite-web:v1 .

-t 指定 image 的名字（vite-web），后面可以用冒号指定标签（v1），默认是 latest
. 表示 Dokcerfile 文件所在路径，docker 会在这个目录下找到 Dockfile，然后以此来构建镜像（这里表示当前路径）

-t 指定 image 的名字（vite-web），后面可以用冒号指定标签（v1），默认是 latest
. 表示 Dokcerfile 文件所在路径，docker 会在这个目录下找到 Dockfile，然后以此来构建镜像（这里表示当前路径）

4.5 启动容器

镜像完毕后，使用这个镜像来启动容器：

docker run -d --name my-web-1 -p 8080:80 vite-web:v1

-d 参数表示以后台模式运行容器，即容器将在后台运行而不阻塞终端。
--name my-web-1 参数指定容器的名称为 "my-web-1"，这个名称可以用来唯一标识容器。
-p 8081:80 参数将容器的 80 端口映射到主机的 8081 端口，这样可以通过主机的 8081 端口访问容器中的应用程序。（类似的 -v 参数也是左边是主机、右边是容器环境）
vite-web:v1 是要运行的容器镜像的名称和标签。

执行命令，看一下正在运行的容器列表：

docker ps

通过 curl 指令来查看网页连接情况：

curl http://localhost:8080 -v

再打开网页看看：

有的时候，想要查看容器的日志，比如看看为什么没有运行起来、为什么报错了、谁来访问过了等等。用这个指令：

docker logs my-web-1 # 用容器名称
docker logs 00e39d9365df # 或用容器id

到此，前端本地部署成功！

4.6 自动化部署流程

在上面的整个流程中，不管是镜像构建还是容器运行，都是手动去敲命令的，然而，重复的工作都可以被优化。现在使用 sh 脚本来自动化执行整个部署流程。

sh 脚本文件一般放在 bin 目录下，在 bin 目录下新建文件 setup_for_host.sh 文件：

# 构建镜像
image_name=vite-web # 表示镜像名称
version=$(date +'%Y%m%d-%H%M%S') # 表示镜像版本（用时间表示）
contianer_name=my-web # 运行的容器名称
host_port=8080 # 本机端口
container_port=80 # 运行的容器端口
echo 'docker build...' # 构建镜像
docker build -t $image_name:$version .
echo 'docker rm...' # 清理同名容器
# 如果已经有同名的容器，删除掉
if [ "$(docker ps -aq -f name=$contianer_name)" ]; then
  echo 'docker rm ...'
  docker rm -f $contianer_name
fi
echo 'docker run...' # 启动容器
docker run -d --name $contianer_name -p $host_port:$container_port $image_name:$version
echo 'Done!'

写好后，把之前运行的 my-web-1 容器删除，因为占用了本机的 8080 端口，和脚本里的 host_port 会冲突：

docker rm my-web-1

删除后，在根目录下执行脚本：

chmod +x bin/setup_host.sh # 添加可执行权限
bin/setup_host.sh

自动化部署脚本成功了！！！

4.7 小结

用一幅图来总结这一部分内容：

镜像启动出一个容器环境，把容器环境中的 nginx 服务器需要的两个文件从宿主机上拷贝过来，然后把 80 端口映射到宿主机的 80 端口，在宿主机上即可访问网页。

什么？！前端工程师还不会 Docker？1

1. 前言

2. 什么是 docker？

3. Docker 的组成

3.1 docker 的感性理解

3.2 docker 使用流程

3.3 docker 常用指令

4. 部署前端项目

4.1 准备前端项目源码

4.2 添加 nginx.conf

4.3 添加 Dockfile

4.4 构建镜像

4.5 启动容器

4.6 自动化部署流程

4.7 小结

热门文章

最新文章

相关课程

相关电子书

相关实验场景

推荐镜像

热门

活动广场

任务中心

开发者评测

高校计划

乘风者计划

训练营

阿里云MVP

话题

直播

下载

镜像站

技术资料

插件

什么？！前端工程师还不会 Docker？1

1. 前言

2. 什么是 docker？

3. Docker 的组成

3.1 docker 的感性理解

3.2 docker 使用流程

3.3 docker 常用指令

4. 部署前端项目

4.1 准备前端项目源码

4.2 添加 nginx.conf

4.3 添加 Dockfile

4.4 构建镜像

4.5 启动容器

4.6 自动化部署流程

4.7 小结

热门文章

最新文章

相关课程

相关电子书

相关实验场景

推荐镜像