Docker + webpack 打包前端項目


構建基礎鏡像:
1、下載一個 Apline Linux 操作系統 作為基礎鏡像,約5MB左右.
docker pull Apline
 
2、進入到 Apline 容器內。
docker run -a stdin -a stdout -i -t  alpine /bin/sh  進入容器內部.
 
3、安裝好NodeJs,webpack ,npm 環境.
apk update
apk add nodejs
npm install webpack -g (這個注意,默認安裝的4.0版本,要根據的項目來安裝webpack版本).

npm install -g cnpm --registry=https://registry.npm.taobao.org

4、測試安裝是否成功.
node -v
npm -v
exit; 退出容器.
 
5、將容器打包成基礎鏡像.
docker commit --author  "shawn"  --message "Node基礎鏡像" 7a012ac764af snode:1.0
 
6、將容器推送至阿里雲鏡像倉庫.(先注冊一個阿里雲賬號)
$ sudo docker login --username=xxx registry.cn-hangzhou.aliyuncs.com
$ sudo docker pull registry.cn-hangzhou.aliyuncs.com/sblockchain/node:[鏡像版本號]
$ sudo docker tag [ImageId] registry.cn-hangzhou.aliyuncs.com/sblockchain/node:[鏡像版本號]
$ sudo docker push registry.cn-hangzhou.aliyuncs.com/sblockchain/node:[鏡像版本號]
做完上面6個步驟,基礎鏡像就已經構造好了。基礎鏡像中安裝什么環境,取決於你項目的需要.
 
以React 項目為例,將React 項目打包成Docker 鏡像.
 
1、編寫dockerfile
FROM registry.cn-hangzhou.aliyuncs.com/sblockchain/node
WORKDIR /package
COPY package.json  /package/
RUN cnpm install
WORKDIR /usr/src/mobile
COPY .   /usr/src/mobile
RUN cp -a  /package/node_modules  /usr/src/mobile
RUN webpack
ENV PORT=3002
CMD ["node","./dev-server.js"]
EXPOSE 3002
 
2、編譯代碼
docker build -t webpack-docker
 
 
3、啟動代碼.
# For development
docker run --name my-webpack-docker -p 80:4000 -e NODE_ENV=dev  webpack-docker
 
# For deployment
docker run --name my-webpack-docker -p 80:4000 webpack-docker
 
 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM