前端研发需要知道的 Docker（二）

docker在前端上的思考

先前，整理了下自己在 Docker 方面的研究，沉淀了两篇文章，前端研发需要知道的Docker 和利用Docker轻松搭建全栈开发环境总有那么一点意犹未尽的感觉，在第二篇评论里面，我也与对这个方面有研究的小伙伴有个浅显的交流，总之，发现还是有很多小伙伴在朝这个方面走的，因为研发提效永远会是一个不断追求的方向，他是没有止境的。上两篇文章我我均从一个示例出发，讲到了如果在前端项目中引入 Docker，构建镜像，优化镜像大小，以及如何做出一个全栈的开发环境，这篇文章算是一个总结，总结一下 Docker 在前端中，用得比较多的一些点都有哪些。

Docker 究竟可以帮助前端开发做些什么

Docker 在前端开发中可以提供很多便利，当然，我不可能列举出所有的，我只把我工作中之前用的一些记录点整理了出来，以我目前的了解至少可以分为：

可以为我们提供一致的开发环境，不用在每个人的pc 上去配置
对新人友好，一个命令即可启动，只用专注于业务逻辑开发
创建一个全栈项目极其方便，虽然有人说像next.js这种框架也很方便，但是具体使用场景还是要看需求
非常容易复刻一个线上环境，而且不用担心一些配置会漏掉，这样，不用说去线上验证了，规避风险。
构建产物简单，而且可以分阶段做优化，输出一个比较小的最终产物
本地开发热更新支持，这个太重要了，保存就可以看效果。
复刻一个兼容性验证的环境，前端兼容性问题还是比较头疼的

下面，我会基于这些点，来说一说，我在工作中如何利用 Docker 来简化工作流提效的思考。

一致的开发环境，规避“`在我的机器上可以运行`”的尴尬：

使用 Docker 可以确保所有开发人员都在相同的环境中工作，无论你使用的是 Windows、macOS 还是 Linux，当然我们大多数人可能是 Mac，Mac 有版本不一致的问题，这些在使用 Docker 之后，通通都不是问题。这无形的就减少了“在我的机器上可以运行”的问题。

代码语言：javascript复制

FROM node:14
WORKDIR /app
COPY package.json yarn.lock ./
RUN yarn install
COPY . .
CMD ["yarn", "start"]

快速启动项目：

新成员加入团队时，他们可以使用 Docker 快速启动项目，而不需要配置整个开发环境，这是多么优雅的一种方式，你还会碰到，老哥，你的 node 环境是否不是 18的这种问题吗？当然这个需要写一个 docker-compose.yml，参考下面的例子也 ok。

代码语言：javascript复制

docker-compose up

前后端分离开发：

如果前端和后端是分离的，你可以使用 Docker 同时运行前端和后端服务，而不需要在本地安装后端所需的所有依赖。

代码语言：javascript复制

version: '3'
services:
  frontend:
    build: ./frontend # 注意，这种build是指需要构建镜像的，因此，你的前端项目中也需要Dockfile
    ports:
      - "3000:3000"
  backend:
    build: ./backend
    ports:
      - "5000:5000"

模拟复刻生产环境：

说是模拟，其实完全就是几乎一模一样，你如果使用 Docker 的方式开发，Docker 的方式部署，所不同的就是环境变量的不同，连接的后端服务器的 host 不同，其他几乎搜有的都一样，因此，你完全可以在本地开发是采用生产环境的配置文件，ps，配置文件参考用Docker轻松搭建全栈开发环境这篇文章。

代码语言：javascript复制

FROM nginx:alpine
COPY build /usr/share/nginx/html
EXPOSE 80
CMD ["nginx", "-g", "daemon off;"]

使用多阶段构建优化镜像大小：

在 Dockerfile 中使用多阶段构建，可以减小最终镜像的大小，因为你可以在一个阶段安装所有依赖和构建应用，然后在另一个阶段只复制构建产物，alpine 是一个比较小的镜像,如下面的示例，前端 yarn build 之后，随后把产物复制到 nginx html 目录下，这样的方式应该就是极限大小了。

代码语言：javascript复制

# Dockerfile# Build stage
FROM node:14 AS builder
WORKDIR /app
COPY package.json yarn.lock ./
RUN yarn install
COPY . .
RUN yarn build

# Production stage
FROM nginx:alpine
COPY --from=builder /app/build /usr/share/nginx/html #仅保留构建的产物
EXPOSE 80
CMD ["nginx", "-g", "daemon off;"]

参考我们之前的优化，可以逐步看到镜像的大小在变小，从最开始的 1.64G 变为 48M。

热重载：

在开发过程中，你可以将本地开发目录挂载到 Docker 容器中，以便在本地编辑代码时容器内的应用可以实时更新，也就是前端必不可少的热更新了，缺少这个那还有快乐吗？

代码语言：javascript复制

# docker-compose.yml
version: '3'
services:
  frontend:
    build: ./frontend
    volumes:
      - ./frontend:/app  # 这个表示把整个前端项目目录映射到 work dir app 下
    ports:
      - "3000:3000"
    environment:
      - CHOKIDAR_USEPOLLING=true

跨浏览器测试：

使用 Docker，你可以运行不同版本的浏览器和浏览器驱动程序，以进行自动化的跨浏览器测试，当然这个需要更具你的项目的要求来选择一些兼容性的版本来跑测试。

代码语言：javascript复制

# Dockerfile for Selenium Chrome
FROM selenium/standalone-chrome:latest

CI/CD 集成：

Docker 可以与 Jenkins、GitLab CI/CD、GitHub Actions 等集成，自动化构建、测试和部署过程，下面就是一个构建加推送镜像的过程。

代码语言：javascript复制

yaml复制
# .gitlab-ci.yml
image: docker:19.03.12

services:
  - docker:19.03.12-dind

stages:
  - build
  - test
  - deploy

build:
  stage: build
  script:
    - docker build -t my-app:$CI_COMMIT_REF_NAME .
    - docker push my-app:$CI_COMMIT_REF_NAME