码云代码地址:
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
来源: https://www.cnblogs.com/binb/p/webpack-docker.html