使用docker容器來構(gòu)建前端項目過程
先說一下背景，所以作者所在組織的前端項目使用了自定義的前端組件，放在了cnpm搭建的倉庫中，由于人員變動，源代碼已經(jīng)丟失，倉庫也被銷毀，只留了打包好的庫，所以每次打包都非常麻煩，再加上使用了node-sass包，對node版本要求特別高，原來打包在jenkins主機上使用npm命令來打包，非常容易出錯。
后面我改用使用docker容器，使構(gòu)建的環(huán)境每次都一樣，避免了打包失敗的情況。現(xiàn)在說一下步驟。
首先構(gòu)建一個打包鏡像
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"]
這里說明一下，這邊使用了基礎(chǔ)鏡像node:11，版本是根據(jù)需要來的，你也可以自己修改，npm config set都是設置node的變量，加速構(gòu)建過程，RUN npm config set cache是設置了node的緩存位置，構(gòu)建的時候，把這個緩存位置映射到主機上，加快下次構(gòu)建。
entrypoint.sh是構(gòu)建的腳本，以貼出來：
#!/bin/bash cd 代碼位置 npm install npm run build echo "完成構(gòu)建" sleep 3
構(gòu)建一下鏡像
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
如果這樣沒問題，就可以在看到構(gòu)建的程序了
正常打包代碼就這樣結(jié)束 ，但是也可以直接把node_modules包直接打到鏡像里頭去，這樣構(gòu)建的腳本就不要使用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 "完成構(gòu)建" sleep 3
總結(jié)
以上為個人經(jīng)驗，希望能給大家一個參考，也希望大家多多支持腳本之家。
相關(guān)文章
解決Docker x509 insecure registry的問題
這篇文章主要介紹了解決Docker x509 insecure registry的問題，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2021-03-03
本文主要介紹了Docker鏡像分層的實現(xiàn)示例,文中通過示例代碼介紹的非常詳細,對大家的學習或者工作具有一定的參考學習價值,需要的朋友們下面隨著小編來一起學習學習吧2023-08-08
Linux環(huán)境docker部署Firefox結(jié)合內(nèi)網(wǎng)穿透遠程使用瀏覽器測試的示例詳解
在Docker中打開Firefox意味著我們將在一個Docker容器中運行Firefox瀏覽器,這對于一些特殊的測試場景非常有用,例如需要在不同版本的瀏覽器中進行測試,下面是一個簡單的示例,演示如何在Docker中打開Firefox,感興趣的朋友跟隨小編一起看看吧2024-08-08
本篇文章主要介紹了修改Docker默認鏡像和容器的存儲位置的方法，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-03-03
本文詳細介紹了Docker常用命令的使用方法,包括啟動、關(guān)閉、重啟Docker服務,查看Docker狀態(tài)和版本,運行和管理容器,管理鏡像,創(chuàng)建和刪除容器,操作,查看和管理網(wǎng)絡,及DockerCompose的使用,文中提供了大量示例,方便用戶快速了解和掌握Docker的各項功能和命令2026-05-05
本文詳細介紹了如何使用Docker將Flask應用容器化,包括實現(xiàn)原理、詳細操作步驟、進階配置、常見問題及解決方案和生產(chǎn)環(huán)境注意事項,需要的朋友可以參考下2025-04-04
在IntelliJ IDEA中使用Docker的開發(fā)指南
這篇文章主要給大家介紹了在IntelliJ IDEA中使用Docker開發(fā)指南,文中通過圖文介紹的非常詳細,對我們的使用Docker有一定的幫助,需要的朋友可以參考下2023-09-09
Docker?Memcached?容器化部署的實現(xiàn)
memcached是一套分布式的高速緩存系統(tǒng)，本文主要介紹了Docker?Memcached?容器化部署的實現(xiàn)，具有一定的參考價值，感興趣的可以了解一下2024-03-03
redis集群對于很多人來說非常熟悉，雖然集群搭建的文章在網(wǎng)上很多，但是今天給大家介紹的是在docker上實現(xiàn)Redis集群搭建，感興趣的可以了解下2021-05-05
Docker-compose是Docker官方推出的一個工具，用于定義和運行多個 Docker 容器的應用程序,下面這篇文章主要給大家介紹了關(guān)于使用Docker-compose部署mysql的簡單步驟,需要的朋友可以參考下2023-04-04