[TOC]
应用场景
1, 使用 webpack 打包后, 测试 html 静态界面.
2, 实现前后端分离, 单独部署,
3, 此环境实现打包后的 dist 内容是否正确.
准备工作
1,docker 安装
... 略过
2 Dockerfile 编写
因为是使用 webpack 对前端页面进行的打包操作 , 我们选择一个 nodejs 相关的镜像进行编译我们自己的 docker 镜像
node 镜像, 官方版本, 地址 https://hub.docker.com/_/node/
Dockerfile 编写
进入到 dist 目录
创建 Dockerfile 文件.
内容如下
- FROM node
- # Copy application dist.
- COPY . /dist/
- # Install http-server 服务
RUN npm install -g http-server
对 Dockerfile 内容说明
1,FROM node: 是表示从官方的 node 镜像作为基础镜像编译
2,Copy . /dist/ : 编译的时候, 复制当前目录所有文件到 镜像中 镜像的 / dist 目录下.
3,
RUN npm install -g http-server
: 安装 http-server , 这是关键. 后面会用到.
编译镜像
打开终端, 进入 dist 目录, 确保 Dockerfile 文件的存在.
image.png
使用 docker 命令 开始编译镜像
docker build -t camchin1/member:beta_v1.1 .
说明
1,-t 编译参数
2,camchin1/member : 编译镜像名称
3,beta_v1.1 : 编译镜像的版本号, 一般称为标记 TAG
4, 最后的一个 . 千万别忘了.
按入 enter 键之后出现如下内容
image.png
表示编译成功.
运行镜像
到此, 我们的 node 镜像就已经编译成功, 接下来就要看看, 是否可以使用.
1, 终端 运行 docker images 显示我们的镜像 .
image.png
2, 接下来运行镜像
docker run -p 8080:8080 -t -d ffab2808481c http-server /dist
说明:
1,-p 8080:8080 : 映射本地端口 8080, 到 docker 端口 8080 .
2,-t : 参见 附录 - docker run OPTIONS 参数表
3,-d : 参见 附录 - docker run OPTIONS 参数表
4, ffab2808481c : 镜像 id, 如图中所示 IMAGE ID , 也可以使用, 镜像名: TAG
即:
docker run -p 8080:8080 -t -d camchin1/member:beta_v1.1 http-server /dist
5,http-server /dist : 启动 http 服务指定目录到 / dist , 就是我们的静态网页的目录了.
http-server 参数说明 : 参见 附录 -
3, 然后打开浏览器输入 :
- http://localhost:8080
- :
就可以看到你的网站了.
All Done!!!
附录
docker run OPTIONS 参数表
OPTIONS 说明:
-a stdin: 指定标准输入输出内容类型, 可选 STDIN/STDOUT/STDERR 三项;
-d: 后台运行容器, 并返回容器 ID;
-i: 以交互模式运行容器, 通常与 -t 同时使用;
-t: 为容器重新分配一个伪输入终端, 通常与 -i 同时使用;
--name="nginx-lb": 为容器指定一个名称;
--dns 8.8.8.8: 指定容器使用的 DNS 服务器, 默认和宿主一致;
--dns-search example.com: 指定容器 DNS 搜索域名, 默认和宿主一致;
-h "mars": 指定容器的 hostname;
-e username="ritchie": 设置环境变量;
--env-file=[]: 从指定文件读入环境变量;
--cpuset="0-2" or --cpuset="0,1,2": 绑定容器到指定 CPU 运行;
-m : 设置容器使用内存最大值;
--net="bridge": 指定容器的网络连接类型, 支持 bridge/host/none/container: 四种类型;
--link=[]: 添加链接到另一个容器;
--expose=[]: 开放一个端口或一组端口;</pre>
http-server 参数说明
可用选项:
p 要使用的端口(默认为 8080 )
a 要使用的地址(默认为 0.0.0.0 )
-d 显示目录列表(默认为 "True"
- i 显示 autolndex (默认为 "True")
-g 或 --gzip 当启用 (默认为 "False") 时, 它将./public/some-file.js.gz 代替./public/some-file.jsgzip 文件版本的存在, 并且请求接受 gzip 编码.
-e 或 --ext 默认文件扩展名(如果没有提供) (默认为'html' )
- S 或 --silent 从输出中抑制日志消息
--cors 通过 Access-Control-Allow-0rigin 标题启用 CORS
- O 启动服务器后打开浏览器窗口
- C 设置缓存控制最大年龄标头的缓存时间(以秒为单位), 例如 - C10 为 10 秒(默认为 "3600"). 要
禁用缓存, 请使用 - C-1.
-U 或 --utc 在日志消息中使用 UTC 时间格式.
- P 或 -- proxy 代理不能在本地解析给定 ur 的所有请求. 例如:-P http://someurl.com
-S 或 --SS1 启用 https.
-C 或 --certssl 证书文件的路径( 默认: cert.pem).
-K 或 -- keyssl 密钥文件的路径( 默认值: key.pem).
-r 或 --robots 提供 / robots.bxt (其内容默认为'User-agent:* \nDisallow: I' )
-h 或 --help 打印此列表并退出.
参考
利用 http-server 测试 vue-cli 打包后的项目 https://segmentfault.com/a/1190000012249873
Docker run 命令 http://www.runoob.com/docker/docker-run-command.html
20180427 优化 Dockerfile
Dockerfile 内容如下
不再使用官方 node 镜像作为基础镜像, 体积太大, 600M+,
使用 https://hub.docker.com/r/tatsushid/tinycore-node/ , 生成镜像 80M+, 体积大大减小, 提高部署效率
- FROM tatsushid/tinycore-node
- # Copy application code.
- COPY . /dist/
- # Install dependencies.
RUN npm install -g http-server
- # 工作目录
- WORKDIR /dist/
- # 工作目录 执行的命令
- CMD ["http-server"]
那么 现在执行启动镜像只需:
docker run -p 8081:8080 -t -d image-id
来源: http://www.jianshu.com/p/09cf1abffbec