前端使用docker，travis+dockerhub

演示环境：Windows
项目名称：docker_demo(注意不能有大写字母)

一、安装Docker

下载官网的Docker安装包，然后直接安装

https://www.docker.com/

Docker官网下载地址
安装后直接打开

打开终端命令行，输入docker,会出现以下信息，那么说明安装成功

Docker的两个核心知识点

container(容器)和image(镜像)

Docker的整个生命周期由三部分组成：镜像（image）+容器（container）+仓库（repository）
首先，我们回到终端命令行操作

输入:docker images
如果没有创建过镜像就是空，如下：

1. 先编写一个Node.js服务

server.js

const koa = require('koa');
const app = new koa();

app.use(async ctx => {
    ctx.body = 'hello docker'
})

app.listen(3000, ()=>{
    console.log("server start on port: 3000");
});

2. 配置package.json文件

{
  "name": "docker_demo",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "ISC",
  "dependencies": {
    "koa": "^2.11.0"
  }
}

启动服务: node server.js

访问http://localhost:3000/

接下来就是本地创建docker镜像、容器

1. 根目录下新建dockerfile文件，并写入：

FROM  node 
ADD . /app/
EXPOSE 3000
WORKDIR /app
RUN npm install
CMD ["node","./server.js"]

解释一下，上面这些配置的作用：>
FROM 是设置基础镜像，我们这里需要Node
ADD是将当前文件夹下的哪些文件添加到镜像中 参数是 [src,target]
这里我们使用的 . 意思是所有文件，当然跟git一样，可以配置ignore文件
EXPOSE是向外暴露的端口号
WORKDIR是说工作目录，我们这里将文件添加到的是app目录，所以配置app目录为工作目录，
这样就不用在命令行前面加/app了
RUN是先要执行的脚本命令
CMD是执行的cmd命令

使用命令打包已经好的文件目录：docker image build ./ -t app

此时我们查看Docker镜像，使用命令：docker images

下面我们启动它：docker run -p 8000:3000 app

使用上面命令即可启动我们的镜像，这时我们在命令中输入：curl 127.0.0.1:8000
得到返回内容

Hello docker

浏览器输入: 127.0.0.1:8000 即可访问到页面～

以上说明，我们的第一个Docker镜像已经制作成功

查看Docker容器命令：

docker ps -a 列出所有容器
不加 -a 仅列出正在运行的，像退出了的或者仅仅只是创建了的就不列出来
docker container ls 列出当前运行的容器

输入上面 docker container ls
得到结果

以上是自动生成容器的例子，下面再来个手动启动容器的例子

1. 新建index.html

2. 修改dockerfile

FROM nginx

COPY ./index.html /usr/share/nginx/html/index.html

EXPOSE 80

3. 打包

docker build ./ -t html

查看下镜像：

新的镜像html已经构建成功，但是此时查看容器，是没有正在运行的
输入命令：docker container ls //查看正在运行的所有容器

可以确认的是，我们创建镜像不会自动生成和启动容器

5. 手动生成容器

docker container create -p 8000:80 html

此时命令行返回 一段值

输入

docker container ls

没有显示有任何启动的容器，这时候我们手动启动

输入：docker container start ***(上面那段值)

启动成功，查看页面

二、自动化构建

1. 将项目上传至GitHub
   

2. 登录travis ci同步github项目
   
   这儿只能是共有项目才能被部署

3. 添加环境变量
   
   这儿用户名密码填的dockerHub的用户名密码

4. 在项目根目录配置 .travis.yml 文件
   
   （注意项目名字为Repositories的名字）

language: node_js
node_js:
  - '10'
services:
  - docker

before_install:
  - npm install
  - npm install -g parcel-bundler

script:
  - parcel build ./server.js
  - echo "$DOCKER_PASSWORD" | docker login -u "$DOCKER_USERNAME" --password-stdin
  - docker build -t kylvia/docker_demo:latest .
  - docker push kylvia/docker_demo:latest

5. 提交代码
   提交后，travisci就会自动构建，顺利的话到此处 镜像就生成了，后面继续生成容器。
   如果有报错，可以参考我的出现过的错误
   
   原因： 登录的账户名（jiaoa） 和 kylvia/decker_demo的前缀用户名（kylvia） 不匹配
   解决：还是用docker tag 让用户名改为jiaoa/decker_demo
   
   然后提交，重新构建，成功
   
   然后使用:

docker image pull jiaoa/docker_demo:latest

拉取镜像，这时候需要下载

拉取完成后，使用

docker images

可以看到jiaoa/docker_demo:latest镜像已经存在了

我们使用

docker container create -p 8002:80 jiaoa/docker_demo:latest

创建这个镜像的容器，并且绑定在端口号8002上

最后输入下面的命令，即可启动框架的容器

docker container start ***(上面create的返回值)

浏览器输入 127.0.0.1:8002 发现，访问成功，框架生效