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