博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
Docker + webpack 打包前端项目
阅读量:5016 次
发布时间:2019-06-12

本文共 1451 字,大约阅读时间需要 4 分钟。

码云代码地址:
 
 
构建基础镜像:
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
 
 

转载于:https://www.cnblogs.com/binb/p/webpack-docker.html

你可能感兴趣的文章
UWP 在 WebView 中执行 JavaScript 代码(用于模拟用户输入等)
查看>>
FileUpload1.PostedFile.FileName 获取的文件名
查看>>
Mock InjectMocks ( @Mock 和 @InjectMocks )区别
查看>>
如何获取免版权图片资源
查看>>
MySql避免全表扫描【转】
查看>>
Storm学习笔记二
查看>>
windows 中的类似于sudo的命令(在cmd中以另一个用户的身份运行命令)
查看>>
java===单类设计模式之饿汉式与懒汉式
查看>>
BZOJ 1083: [SCOI2005]繁忙的都市
查看>>
Maven 编译
查看>>
《学习之道》第十章学习方法29还记得散步的好处嘛
查看>>
Git常用命令总结
查看>>
iOS获取设备IP地址
查看>>
JavaSE| String常用方法
查看>>
NRF51822配对绑定要点
查看>>
C语言博客作业—数据类型
查看>>
14.精益敏捷项目管理——认识精益笔记
查看>>
从0开始实现STM32L4XX输出50Hz方波
查看>>
caffe mnist LeNet 参数详细介绍
查看>>
CocoaPods建立私有仓库
查看>>