nodejs测试静态html5设置

docker 打包镜像

应用场景

1、使用webpack 打包后,测试html静态界面。

2、实现前后端分离,单独部署,

3、此环境实现打包后的dist内容是否正确。

准备工作

1、docker 安装

。。。略过

2 Dockerfile编写

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

node镜像,官方版本,地址

Dockerfile 编写

  • 进入到dist目录
  • 创建Dockerfile文件。
  • 内容如下
1
2
3
4
5
6
7
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-20180426112736971

  • 使用docker命令 开始编译镜像
1
docker build -t camchin1/member:beta_v1.1 .

说明

1、-t 编译参数

2、camchin1/member : 编译镜像名称

3、beta_v1.1 : 编译镜像的版本号,一般称为标记TAG

4、 最后的一个 . 千万别忘了。

  • 按入enter键之后出现如下内容

    image-20180426113144629

表示编译成功。

运行镜像

到此,我们的node镜像就已经编译成功,接下来就要看看, 是否可以使用。

1、终端 运行 docker images 显示我们的镜像 。

刚刚我们生成的标记就是beta_v1.1

2、接下来运行镜像

1
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

即:

1
2
>   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参数表

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
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=[]: 开放一个端口或一组端口;

http-server 参数说明

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
可用选项:
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+,体积大大减小,提高部署效率

1
2
3
4
5
6
7
8
9
FROM tatsushid/tinycore-node
# Copy application code.
COPY . /dist/
# Install dependencies.
RUN npm install -g http-server
# 工作目录
WORKDIR /dist/
# 工作目录 执行的命令
CMD ["http-server"]

那么 现在执行启动镜像只需:

1
docker run -p 8081:8080 -t -d  image-id