Docker : vue.js部署 、测试镜像编译生成

[TOC]

应用场景
1、使用webpack 打包后,测试html静态界面。
2、实现前后端分离,单独部署,
3、此环境实现打包后的dist内容是否正确。

准备工作

1、docker 安装

。。。略过

2 Dockerfile编写

因为是使用webpack 对前端页面进行的打包操作 ,我们选择一个nodejs相关的镜像进行编译我们自己的docker镜像

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打包后的项目

Docker run 命令

20180427优化Dockerfile

Dockerfile 内容如下

不再使用官方node镜像作为基础镜像,体积太大,600M+,
使用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
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 203,271评论 5 476
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 85,275评论 2 380
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 150,151评论 0 336
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 54,550评论 1 273
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 63,553评论 5 365
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 48,559评论 1 281
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 37,924评论 3 395
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 36,580评论 0 257
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 40,826评论 1 297
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,578评论 2 320
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,661评论 1 329
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 33,363评论 4 318
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 38,940评论 3 307
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,926评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,156评论 1 259
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 42,872评论 2 349
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 42,391评论 2 342

推荐阅读更多精彩内容