Docker + webpack 打包前端项目

码云代码地址：

https://gitee.com/caonimashi/docker_deployment_front_end 

 

构建基础镜像:

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