前端工程之Docker

Strawberry_rabbit
263 阅读6分钟

什么是镜像

在Docker容器技术中，镜像是一个轻量级、可执行的独立软件包，包含了运行应用程序所需的所有内容：代码、运行时环境、系统工具、系统库和设置。镜像就像是容器的"模板"或"快照"，它是静态的，而容器则是镜像运行时的实例。 在前端项目的上下文中，镜像还可以指包管理器的镜像源，如npm、pnpm的镜像源，用于加速依赖包的下载。

镜像有什么作用

Docker镜像的作用

  1. 环境一致性：确保开发、测试和生产环境完全一致，避免"在我机器上可以运行"的问题
  2. 隔离性：每个容器都是独立的，不会相互干扰
  3. 快速部署：镜像可以快速启动为容器，实现应用的快速部署和扩展
  4. 版本控制：镜像支持版本管理，可以方便地回滚到之前的版本
  5. 轻量级：利用容器技术的分层文件系统，镜像可以共享公共层，节省存储空间

包管理器镜像源的作用

  1. 加速下载：国内镜像源（如淘宝NPM镜像）可以显著提升依赖包的下载速度
  2. 稳定性：避免因网络问题导致的依赖下载失败
  3. 节省带宽：减少国际网络流量，降低网络成本

为什么前端工程里要配置镜像

在前端工程中配置镜像主要基于以下原因：

  1. 国内网络环境限制：直接连接国外的npm官方源在国内可能速度较慢，甚至连接不稳定
  2. 依赖安装效率：前端项目通常有大量依赖（从项目目录中的node_modules可以看出），配置国内镜像源可以大幅提升安装速度
  3. CI/CD流水线优化：在持续集成/持续部署流程中，快速的依赖安装可以缩短构建时间，提高开发效率
  4. 稳定性保障：镜像源通常有更好的容错机制和缓存策略，保障依赖下载的稳定性
  5. Docker容器构建优化：在Dockerfile中配置包管理器镜像源，可以加速容器镜像的构建过程

示例：.Dockerfile文件中，通过RUN npm config set registry https://registry.npmmirror.com -g配置了淘宝NPM镜像源，这是一种常见的前端工程优化实践。

.npmrc文件

.npmrc是npm包管理器的配置文件，主要用于控制npm的行为。 主要作用是：

  1. 配置npm包的下载源（这里设置为淘宝源）
  2. 为特定组织作用域(@x-humanoid-cloud)指定专用的内网源
  3. 配置访问内网源的认证信息
  4. 这个文件主要影响本地开发环境中的npm/pnpm命令行为

Dockerfile文件：

在前端工程中，Dockerfile 是一个文本文件，用于定义如何构建前端应用的 Docker 镜像。它的核心作用是将前端项目（包括代码、依赖、配置等）打包成一个标准化、可移植的容器镜像，从而实现应用的一致部署和运行。 .Dockerfile是Docker的构建文件，用于定义如何创建Docker镜像。 主要作用：

  1. 指定基础Docker镜像
  2. 设置环境变量
  3. 配置工作目录
  4. 在Docker镜像内部设置npm源（同样是淘宝源）
  5. 安装必要的工具（如pnpm）
  6. 配置容器运行时的用户
  7. 定义容器启动时执行的命令
  • 使用公司内部仓库的Node.js 22版本Alpine镜像，Alpine是一个轻量级Linux发行版，能显著减小镜像体积。
  • 设置容器的时区为亚洲/上海
  • 指定工作目录为/app
  • 设置构建环境变量为stage（预发布环境）
  • 定义用户变量为gitlab-runner
  • 包管理器配置：将npm的包源配置为淘宝NPM镜像，加速国内下载；全局安装pnpm作为包管理器。
  • 容器启动命令：指定容器启动时执行/app/pnpm.sh脚本，通常该脚本用于启动应用程序。

.Dockerfile与.npmrc主要区别

  1. 作用域不同：.npmrc影响本地开发环境中的npm行为，而Dockerfile中设置的npm源仅在构建Docker镜像和容器运行时生效
  2. 功能范围不同：Dockerfile的功能更广泛，不仅包含包管理器配置，还包括整个容器环境的定义
  3. 应用场景不同：.npmrc用于开发阶段，Dockerfile用于部署和容器化阶段

多Dockerfile文件的工程配置

  • Docker允许在一个项目中使用多个Dockerfile文件

  • 通常通过不同的文件名来区分，如Dockerfile、Dockerfile.dev、Dockerfile.prod等

  • 这些文件不会自动冲突，因为Docker默认只使用名为"Dockerfile"的文件

  • 在构建镜像时，需要明确指定使用哪个Dockerfile文件

  • 多Dockerfile文件不会冲突。在Docker构建过程中，默认情况下Docker只会使用名称为Dockerfile的文件。其他命名的Dockerfile文件（如.Dockerfile、Dockerfile.dev、Dockerfile.prod等）需要通过显式指定才能被使用。

  • 多Dockerfile文件不会自动全部执行，需要单独构建每个镜像。具体来说：

    1. 默认行为：如果不指定特定的Dockerfile文件，docker build命令会默认使用当前目录下名为Dockerfile的文件

    2. 指定特定Dockerfile：可以通过-f参数指定要使用的Dockerfile文件，例如：

    bash
docker build -f .Dockerfile -t my-node-app .
docker build -f Dockerfile -t my-nginx-app .
    1. CI/CD配置：在自动化流程中（如项目中的.gitlab-ci.yml），会根据不同的构建阶段和目标指定使用哪个Dockerfile

多Dockerfile文件的常见用途

  1. 构建不同环境的镜像：开发环境、测试环境、生产环境的配置可能不同
  2. 分离构建和运行阶段：实现多阶段构建，减小最终镜像体积
  3. 支持不同部署方式：例如同时支持容器化部署和Serverless部署
  4. 针对不同组件构建镜像：前端应用、后端服务、数据库等可能需要不同的Dockerfile配置

Nginx server 主要作用

这个Nginx server块的主要功能是配置一个适合单页应用(SPA)部署的Web服务器，它具有以下特点：

  1. 在9090端口监听HTTP请求
  2. 从/var/www目录提供静态文件服务
  3. 通过try_files指令实现了SPA应用的路由重写，解决了刷新页面404的问题
  4. 允许跨域请求，支持前后端分离架构
  5. 保护服务器上的敏感配置文件

这种配置特别适合部署使用Vue、React、Angular等框架开发的现代前端应用，确保它们能够在Nginx服务器上正确运行，同时提供良好的用户体验和安全性。

前端如何部署

前端工作中走CICD流程发布流程时，需要增加 .Dockerfile 、Dockerfile 、.gitlab-ci.yml、 nginx.conf、 pnpm.sh 这五个文件。（详解待补充...敬请期待）

avatar
文章
阅读
粉丝