脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网站技巧 → 服务器 → 云和虚拟化 → 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 x509 insecure registry的问题

    解决Docker x509 insecure registry的问题

    这篇文章主要介绍了解决Docker x509 insecure registry的问题，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
    2021-03-03
  • Docker镜像分层的实现示例

    Docker镜像分层的实现示例

    本文主要介绍了Docker镜像分层的实现示例,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2023-08-08
  • Linux环境docker部署Firefox结合内网穿透远程使用浏览器测试的示例详解

    Linux环境docker部署Firefox结合内网穿透远程使用浏览器测试的示例详解

    在Docker中打开Firefox意味着我们将在一个Docker容器中运行Firefox浏览器,这对于一些特殊的测试场景非常有用,例如需要在不同版本的浏览器中进行测试,下面是一个简单的示例,演示如何在Docker中打开Firefox,感兴趣的朋友跟随小编一起看看吧
    2024-08-08
  • 修改Docker默认镜像和容器的存储位置的方法

    修改Docker默认镜像和容器的存储位置的方法

    本篇文章主要介绍了修改Docker默认镜像和容器的存储位置的方法，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
    2018-03-03
  • 2026年Docker常用命令及示例代码大全

    2026年Docker常用命令及示例代码大全

    本文详细介绍了Docker常用命令的使用方法,包括启动、关闭、重启Docker服务,查看Docker状态和版本,运行和管理容器,管理镜像,创建和删除容器,操作,查看和管理网络,及DockerCompose的使用,文中提供了大量示例,方便用户快速了解和掌握Docker的各项功能和命令
    2026-05-05
  • Flask应用封装成Docker服务的完整操作指南

    Flask应用封装成Docker服务的完整操作指南

    本文详细介绍了如何使用Docker将Flask应用容器化,包括实现原理、详细操作步骤、进阶配置、常见问题及解决方案和生产环境注意事项,需要的朋友可以参考下
    2025-04-04
  • 在IntelliJ IDEA中使用Docker的开发指南

    在IntelliJ IDEA中使用Docker的开发指南

    这篇文章主要给大家介绍了在IntelliJ IDEA中使用Docker开发指南,文中通过图文介绍的非常详细,对我们的使用Docker有一定的帮助,需要的朋友可以参考下
    2023-09-09
  • Docker Memcached 容器化部署的实现

    Docker Memcached 容器化部署的实现

    memcached是一套分布式的高速缓存系统，本文主要介绍了Docker Memcached 容器化部署的实现，具有一定的参考价值，感兴趣的可以了解一下
    2024-03-03
  • Docker上实现Redis集群搭建

    Docker上实现Redis集群搭建

    redis集群对于很多人来说非常熟悉，虽然集群搭建的文章在网上很多，但是今天给大家介绍的是在docker上实现Redis集群搭建，感兴趣的可以了解下
    2021-05-05
  • 使用Docker-compose部署mysql的简单步骤

    使用Docker-compose部署mysql的简单步骤

    Docker-compose是Docker官方推出的一个工具，用于定义和运行多个 Docker 容器的应用程序,下面这篇文章主要给大家介绍了关于使用Docker-compose部署mysql的简单步骤,需要的朋友可以参考下
    2023-04-04

最新评论