脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网站技巧 → 服务器 → 云和虚拟化 → docker → docker容器来构建前端项目

使用docker容器来构建前端项目过程

 更新时间：2026年03月09日 08:51:39   作者：linlongdeng  
文章介绍了如何使用Docker容器来解决前端项目打包问题,包括构建镜像、设置环境变量、加速构建过程以及如何将node_modules直接打包到镜像中,通过这种方式,可以确保每次打包的环境一致,避免因环境差异导致的打包失败

先说一下背景，所以作者所在组织的前端项目使用了自定义的前端组件，放在了cnpm搭建的仓库中，由于人员变动，源代码已经丢失，仓库也被销毁，只留了打包好的库，所以每次打包都非常麻烦，再加上使用了node-sass包，对node版本要求特别高，原来打包在jenkins主机上使用npm命令来打包，非常容易出错。

后面我改用使用docker容器，使构建的环境每次都一样，避免了打包失败的情况。现在说一下步骤。

首先构建一个打包镜像

Dockerfile文件如下：

FROM node:11
WORKDIR /user/app
RUN npm config set registry  https://registry.npmmirror.com
RUN npm config set sass_binary_site=https://registry.npmmirror.com/binary.html?path=node-sass/
RUN npm config set cache '/user/app/node_cache'
COPY entrypoint.sh .
RUN chmod +x entrypoint.sh
ENTRYPOINT ["/user/app/entrypoint.sh"]

这里说明一下，这边使用了基础镜像node:11，版本是根据需要来的，你也可以自己修改，npm config set都是设置node的变量，加速构建过程，RUN npm config set cache是设置了node的缓存位置，构建的时候，把这个缓存位置映射到主机上，加快下次构建。

entrypoint.sh是构建的脚本，以贴出来：

#!/bin/bash
cd 代码位置
npm install
npm run build
echo "完成构建"
sleep 3

构建一下镜像

docker build -t node-build:11 .

然后运行容器

docker run -v  代码位置:/user/app/代码项目 -v /home/deng/web/node:/user/app/node_cache -it --rm node-build:11

如果这样没问题，就可以在看到构建的程序了

正常打包代码就这样结束 ，但是也可以直接把node_modules包直接打到镜像里头去，这样构建的脚本就不要使用npm install。

让打包镜像的dockerfile就可以修改成这样

FROM node:11
WORKDIR /user/app
RUN npm config set registry  https://registry.npmmirror.com
RUN npm config set sass_binary_site=https://registry.npmmirror.com/binary.html?path=node-sass/
RUN npm config set cache '/user/app/node_cache'
ADD node_modules.tar.gz  /user/app
COPY entrypoint.sh .
RUN chmod +x entrypoint.sh
ENTRYPOINT ["/user/app/entrypoint.sh"]

注意ADD node_modules.tar.gz  /user/app，这个命令就是把node_modules压缩包放到容器目录中去，ADD命令会自动解压。

entrypoint.sh改成这样

#!/bin/bash
mv node_modules ./代码位置/node_modules
cd 代码位置
npm run build
echo "完成构建"
sleep 3

总结

以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。

您可能感兴趣的文章:

相关文章

  • docker创建容器的两种实现方式(交互式与守护式)

    docker创建容器的两种实现方式(交互式与守护式)

    这篇文章主要介绍了docker创建容器的两种实现方式(交互式与守护式),具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
    2025-05-05
  • Docker Buildx构建多平台镜像的实现

    Docker Buildx构建多平台镜像的实现

    本文主要介绍了Docker Buildx构建多平台镜像的实现，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
    2022-07-07
  • 如何通过Docker部署Nginx服务

    如何通过Docker部署Nginx服务

    本文阐述的Docker部署Nginx方案,核心在于通过目录挂载实现数据持久化,既保留了容器化部署的轻量特性,又解决了配置与数据的管理难题,本文将详细介绍如何通过Docker部署 Nginx 1.24.0 版本,并实现配置文件、日志和网站内容的持久化管理,感兴趣的朋友一起看看吧
    2025-11-11
  • 如何调整Docker中nginx的日志级别详解

    如何调整Docker中nginx的日志级别详解

    这篇文章主要给大家介绍了关于如何调整Docker中nginx的日志级别的相关资料,文中通过图文介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
    2021-09-09
  • MacBookPro下docker的安装与使用教程

    MacBookPro下docker的安装与使用教程

    Windows与Linux下关于docker的安装使用方法有很多，今天小编这里给大家分享的是MacOS下docker的安装与简单使用案例，非常简单，给有需要的小伙伴参考下
    2017-03-03
  • docker配置普通用户访问的三种方法

    docker配置普通用户访问的三种方法

    本文主要介绍了docker配置普通用户访问的三种方法,让普通用户在Ubuntu系统上无需使用sudo权限即可使用Docker,每种方法都详细说明了具体步骤,并附带了相关命令,感兴趣的可以了解一下
    2024-11-11
  • Docker使用格式化输出与排序的技巧分享

    Docker使用格式化输出与排序的技巧分享

    Docker 作为当今最流行的容器化技术之一,其命令行工具提供了强大的功能来管理容器镜像,本文给大家介绍了Docker使用格式化输出与排序的技巧,需要的朋友可以参考下
    2025-05-05
  • 如何修改docker容器中MySQL的用户密码

    如何修改docker容器中MySQL的用户密码

    本文主要介绍了如何修改docker容器中MySQL的用户密码，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
    2023-04-04
  • Docker可视化工具Portainer的具体使用

    Docker可视化工具Portainer的具体使用

    Portainer是Docker的可视化工具,可提供一个交互界面显示Docker的详细信息供用户操作,本文主要介绍了Docker可视化工具Portainer的具体使用,文中通过示例代码介绍的非常详细,需要的朋友们下面随着小编来一起学习学习吧
    2024-06-06
  • Docker + jenkins项目打包镜像部署详细步骤(亲测有效)

    Docker + jenkins项目打包镜像部署详细步骤(亲测有效)

    这篇文章主要介绍了Docker + jenkins项目打包镜像部署的相关资料,包括Jenkins的安装、项目搭建、Dockerfile的设置以及遇到的一些问题和解决方法,文中通过代码介绍的非常详细,需要的朋友可以参考下
    2025-04-04

最新评论