由于这几年服务器一直在换，导致每次到了服务器到期的时候就很痛苦，要重新搭建服务器环境部署自己的博客，作为前端er一直没想到docker，知道上次问了大佬才知道docker完全可以做到搭建了一次后，多处部署，这里记录下搭建过程吧。
虽然网上有很多教程，但是自己搭建的时候还是遇到很多坑，还是有必要记录下。

Docker文件目录

安装Docker

网上教程很多的，这里贴下我安装时看的文章
Centos7 安装docker以及docker-compose
centos7安装docker

这里安装docker-compose直接用yum就可以了

    yum -y install docker-compose

安装完后需要更换下国内镜像,我用的是daocloud这里不要用这里的Linux脚本
，它的脚本会多加一个逗号，直接获取到地址，自己去添加就好了

vi  /etc/docker/daemon.json

{
        "registry-mirrors": ["http://f1361db2.m.daocloud.io"]
}

Docker-compose启动文件

docker-compose.yml

version: '2'

services:
  nginx:
    tty: true
    image: nginx:stable-alpine
    restart: always
    volumes:
      - ./${NGINX_DIR}/conf/nginx.conf:/etc/nginx/nginx.conf:ro
      - ./${NGINX_DIR}/conf/conf.d:/etc/nginx/conf.d
      - ./${NGINX_DIR}/www:/usr/share/nginx/html
      - ./${NGINX_DIR}/log:/var/log/nginx
      - ./${NGINX_DIR}/.acme.sh:/etc/nginx/.acme.sh
    ports:
      - "80:80"
      - "443:443"
    depends_on:
      - ghost
    links:
      - ghost
  mysql-db:
    container_name: mysql-docker        # 指定容器的名称
    image: mysql:5.6                   # 指定镜像和版本
    ports:
      - "3306:3306"
    environment:
      MYSQL_ROOT_PASSWORD: ${MYSQL_ROOT_PASSWORD}
      MYSQL_ROOT_HOST: ${MYSQL_ROOT_HOST}
      MYSQL_USER: 'ghost'
      MYSQL_PASS: 'ghost_password'
    volumes:
      - "${MYSQL_DIR}/data:/var/lib/mysql"           # 挂载数据目录
      - "${MYSQL_DIR}/conf:/etc/mysql/conf.d"      # 挂载配置文件目录
  ghost:
    image: ghost
    restart: always
    depends_on:
      - mysql-db
    links:
      - mysql-db
    ports:
      - 2368:2368
    volumes:
      - ./${GHOST_DIR}/content:/var/lib/ghost/content
      - ./${GHOST_DIR}/config.production.json:/var/lib/ghost/config.production.json
    environment:
      - NODE_ENV=production

这里变量通过.env定义的，在docker-compose.yml同级目录下执行

vim .env

MYSQL_ROOT_PASSWORD=root
MYSQL_ROOT_HOST=%
MYSQL_DIR=./mysql
NGINX_DIR=./nginx
GHOST_DIR=./ghost

注意：
这里mysql端口为默认的，如果正式部署的话最好换成别的端口，不要用默认的，且root密码最好不要太简单以及关闭root远程连接权限，我这次还没部署完成，数据库就被黑了，幸好数据都有备份的

Ghost配置

这里将ghost的content和config.production.json使用数据卷的方式，这样后面迁移的时候只要将文件拷贝过去，主题和配置都是在的
配置文件如下：

{
    "url": "http://service_name",
    "server": {
        "port": 2368,
        "host": "0.0.0.0"
    },
    "database": {
        "client": "mysql",
        "connection": {
            "host": "mysql-db",
            "user": "ghost",
            "password": "ghost_password",
            "database": "ghost",
            "port": 3306,
            "charset": "utf8"
        }
    },
    "mail": {
        "transport": "Direct"
    },
    "logging": {
        "transports": [
            "file",
            "stdout"
        ]
    },
    "process": "systemd",
    "paths": {
        "contentPath": "/var/lib/ghost/content"
    }
}

nginx配置

监听80端口，转发到2368端口

location / {
    proxy_pass http://ghost:2368;
}

这里因为nginx是一个容器，代理到ghost容器，这里是ghost，而不是localhost

部署

docker-compose up -d

END

其实自己搭建的过程中遇到了很多问题，但是在记录时已经忘记了，望天~

Webhook 允许我们通过在Github.com订阅事件后构建后或者安装Github应用。当其中之一的事件被触发时，我们可以发送HTTP POST请求到webhook的配置URL。Webhook可以用作升级一个issue追踪，触发CI构建，升级一个后端镜像，或者甚至是部署你的生产服务器。只有想不到，没有做不到。

这里有一个常见的例子：你到github上。有一个用于他们代码POST请求webhook的文本框。你输入一个URL。现在当你上传你的代码到github上时，github将会通过HTTP POST的方法请求你所选择的包含详细信息的URL。没有更简单的方法以便与任意Web服务进行开放式集成。

作为国内的github——gitee.com，当然也是支持webhooks的。 gitee webhooks文档

基础支持

1. 需要一台外网能访问的服务器
2. 需要项目仓库的管理员权限

对于第一点来说，由于我这边是用公司的测试服务器，对外只开放了443端口，只能在443端口配置nginx，转发/webhoos请求到本地webhooks端口。

   location ^~ /webhooks {
        proxy_pass http://localhost:8080;
   }

webhooks配置

按照gitee文档配置好webhooks,服务器上需要起一个Node服务，监听8080端口 这里直接用了gitee码云使用webhook这篇文章里的代码

var http = require('http')  
var createHandler = require('gitee-webhook-handler')  
var handler = createHandler({ path: '/webhooks', secret: '123456' })// post 所需要用到的秘钥

function run_cmd(cmd, args, callback) {  
  var spawn = require('child_process').spawn;
  var child = spawn(cmd, args);
  var resp = "";
  child.stdout.on('data', function(buffer) { resp += buffer.toString(); });
  child.stdout.on('end', function() { callback (resp) });
}
handler.on('error', function (err) {  
  console.error('Error:', err.message)
})
handler.on('Push Hook', function (event) {  // 这个地方就是GitHub 和 Gitee 不一样的地方，需要注意  
        if (event.payload.ref === 'refs/heads/deploy') {
        run_cmd('bash', ['./deploy.sh', 'deploy', event.payload.repository.path], function(text){ console.log(text) });// 需要执行的脚本位置
        }
})

try {  
  http.createServer(function (req, res) {
    handler(req, res, function (err) {
      res.statusCode = 404
      res.end('no such location')
    })
  }).listen(8089) // 服务监听的端口，可以自行修改
}catch(err){
  console.error('Error:', err.message)
}

可以看到，这里我是使用特定分支deploy来作为是否自动构建的判断。

另外使用spawn命令时，args是以数组形式，例如直接执行shell脚本命令是

 ./deploy.sh deploy my-app

使用spwan时要这样

 spwan('bash', ['./deploy.sh', 'deploy', 'my-app'])

由于是多项目配置webhooks，所以这里路径是通过仓库信息里的event.payload.repository.path来区分的

构建脚本

由于是在测试服务器上自动构建，webhooks服务只是监听仓库的变化，构建是要自己编写脚本来进行构建的

deploy.sh

#!/bin/bash

BASE_PATH="/www"

exec 1>$BASE_PATH/webhooks/$2.log 2>&1

cd $BASE_PATH/$2

branch=$(git branch | grep $1)

git pull

if [[ -n "$branch" ]]; then  
        # 切换到构建分支
  git checkout deploy
else  
  git checkout -b deploy origin/deploy
fi

# 拉取最新代码
git pull  
# 构建
npm run build  

判断当前是否在deploy分支上，不在就切换过去

以上，服务器端全部Ok，剩下的就是项目中的配置了

项目发布命令

在项目中新增一个publish.sh

#!/bin/bash

set -e

function build_deploy() {  
    if [[ -n "$(git status --porcelain)" ]]; then
        echo "Working tree *NOT* clean. Please stash/commit your changes before any operations."
        exit 1
    fi

    current_branch="$(git symbolic-ref --short -q HEAD)"

    if [[ -n "$(git rev-parse --verify --quiet deploy)" ]]; then
        git branch -D deploy
    fi

    git checkout -b deploy

    git push -f origin deploy:deploy

    git checkout $current_branch

    git branch -D deploy

}

build_deploy [email protected]

在package.json中的scripts中新增一个命令

    "deploy": "cross-env scripts/bash/publish.sh",

cross-env这个是针对于团队中使用windows开发的

大概思路就是，发布时，会判断当前分支是否有变动，没有的话就从当前分支切一个本地deploy分支，然后强推到远程deploy分支，再切换回去，删除本地deploy分支

然后webhooks会监听到分支的Push,判断分支为deploy,执行deploy.sh

完工。

参考：

1. gitee码云使用webhook
2. Webhooks在API世界中的角色
3. Webhook到底是个啥？

之前在做项目中，有一个需求是要由一个二级table，也就是table中嵌套一个table。虽然table是不能之前嵌套的，但是可以利用td里放一个div来嵌套table。需求是这个嵌套的table是可以点击展开收起，当时是直接利用了CSS3的transition属性来做的这个一个动画。

页面主要代码：

<table>
    <thead></thead>
    <tbody ng-repeat="item in items">
        <tr>
            <td>item.name</td>
        </tr>
        <tr>
            <td>
                <div>
                    <table>
                        <thead></thead>
                        <tbody ng-repeat="color in item.colors">
                            <tr>
                                <td>color</td>
                            </tr>
                    </table>
                </div>  
            </td>
        </tr>
    </tbody>
</table>

将二级table增加一个class为showOrHide,将高度用transition设为平滑过渡的效果：

heigth : 0;
transition:heigth .6s;

默认将其高度设为0，在点击后触发showOrhide函数：

let display = false;
var other = document.querySelectorAll('.showOrHide');
for (var i = 0, len = other.length; i < len; i++) {
    if (other[i] != ele) {
        if (parseInt(other[i].style.height) > 0) {
            display = false;
            slideToggleTrans(display,other[i]);         }
    }
}
if (parseInt(ele.style.height) > 0) {
    display = true;
}
display = !display;
slideToggleTrans(display,ele);

利用display变量来控制二级table的展开还是收起，同时将其他展开的收起。slideToggleTrans(display,ele)函数主要是一个计算二级table的高度:

function slideToggleTrans(display,eleMore) {
 //  display表示默认更多展开元素是显示状态还是隐藏
    eleMore && (eleMore.style.height = display ? (function () {
        var height = 0;
        Array.prototype.slice.call(eleMore.childNodes).forEach(function (child)                     {
                if (child.nodeType === 1) {
                    var oStyle = window.getComputedStyle(child);
                    height += child.clientHeight +  (parseInt(oStyle.borderTopWidth) || 0) + (parseInt(oStyle.borderBottomWidth) || 0);
                }
            });
        return height;
    })() + "px" : "0px");
}

这样一来完全是没有问题，BUT交互是有问题的。

因为这个二级table可不是仅仅展示，还有按钮可以编辑删除的，编辑删除后，需要读取接口获取新的数据吧，问题就是这里。因为重新获取这个items，获取完后页面是会重新渲染的，这就导致我修改完后，页面回到了初始状态，也就是我好辛苦在多条记录中找到的那一条记录下的二级table中多条记录中的某条数据，修改完后我需要再看一下的话，就只能花个几分钟再重新找一次了。（我是有多闲啊！）。

所以这就是需要解决的问题。

下面就是花式钻牛角尖

首先，我不想放弃这个我好不容易写出来的工具类，所以我开始还是将目光锁定了这个工具类上。

既然用transition来控制高度的，所以我还是利用这个属性来控制二级table修改完变化的高度。这样删除某条记录，我将其从item.colors中splice(index,1)，这样ng-repeat会重新渲染一遍，但是其他没有改变的不会去渲染了。OK，删除解决了，那编辑和添加同样这样解决。为此，还找后端添加color接口给我返回这个新增的id了。这样一来，问题完美解决了。真是prefect！

重新发布后不到一个小时，问题又出现了！

• 后端：前端你这个展开样式有问题
  
• 我：我这边没问题啊（怎么可能，老纸测的好好的，你一测就有问题，坑啊）
  
• 后端：你看这截图
  
• 我：。。。噢 我改一下（妈蛋，什么鬼数据啊）
  

问题出在数据上，有一些数据内容比较大，这样就吧td的高度撑起来了，比其他的高很多，这样如果将一个高度为32px的修改后高度为58px,这样内容超出我袁先生设置的高度，部分内容不可见了。

一看是这个问题，so easy嘛，啪啪啪代码改好了，在修改数据后，我再调一次slideToggleTrans(display,ele)来计算高度不就OK了。修改后本地开始测，但是为毛我修改后计算的高度跟实际的不一样啊喂。折腾好久发现了问题，但是没法改啊，原因是Angular的页面渲染机制（别问我渲染机制是什么，这只是我大概猜测）。

于是我讲目光再次锁定到数据记录上了。你不是自己边高度嘛，我就把你数据锁死，内容过多不给你撑起高度，看你还给我变高度(傲娇脸)

max-width: 100px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;

问题解决，快表扬我

重新打包发布，继续学习，毕竟还是一个菜鸟啊

一天后，后端找我，坑比又来了！！！

这次，是一级table编辑提交后，二级table收起了

我就想问，你一级table编辑跟二级table有毛裤关系啊，但是被后端说服了，也确实是不友好，所以又是一顿折磨，就这个问题已经持续一周了啊！！！

我实在不知道怎么解决了，于是动歪点子了。在高度展开后，将高度设为auto,这样我就不去造假数据了。但是问题还是没有解决，于是想着利用setTimeout来在获取数据后将高度展开。但是为什么非要等js执行完后再去渲染页面啊妈蛋！！

所以，决定换一个方式来实现这个工具类。找了半天，发现jquery有一个slideToggle方法，啊啊啊，我为什么不早点发现这个。这样的话，直接在样式里增加一个showOrHide{{$index}}样式，这样可以找到确定的div了。这样的话，在二级table里修改删除都不用担心高度问题了，因为这个方法是利用的display属性，heigth默认为auto。但是一级table编辑后二级table收起的问题还是没有解决啊，思索了一天多还是没找到解决方案。昨天一大神路过，于是我把他打劫了。大神听了问题，说了一句话，你可以在这个对象里加一个属性displayOpen，为true的话，页面渲染时将其display属性设为block，可以利用ng-if或ng-show。

果然大神就是大神，几分钟解决了困扰我许久的问题。

于是，我走上了正道。

按大神的方式去实现了，但是为毛点击后不出现了啊，二级table你死哪儿去了。噢，原来我用了ng-show，但是这个不是控制样式的啊，于是我想着应该有ng-style的指令的，先改成这个，再去查了一下，啊哈果然有我真是天才啊。The ngStyle directive allows you to set CSS style on an HTML element conditionally.

END

之前在学习jQuery时，想做一个轮播图的demo，于是在网上了找了相关的视频教程。然后根据教程不断的改变ul元素的左外边距自己做了一个demo，但是在演示的时候，最后一张到第一张图片切换到时候没有动画效果。之后尝试在最后多添加一个第一张图片，然后在展示这张图片时，默默的把其换成了真正的第一张图片，这样在切换的时候看不到痕迹。但是这样在第一张点击向前时，会出现两张一样的第一张图片。那么如何实现无缝滚动呢？

一、原理 实现原理是通过div的overflow:hide属性来显示单个图片，再不断的改变ul元素的左外边距动画显示每个图片，最关键的是这里，在将ul的第一个元素左移后，将其添加到ul的尾部然后删除，这样，当前显示的图片一直是第一张图片。

二、动手看看 html代码：

<div id="container">  
    <div id="content">
        <ul class="photo">
            <li class="Li"><img src="images/1.jpg"></li>
            <li class="Li"><img src="images/2.jpg"></li>
            <li class="Li"><img src="images/3.jpg"></li>
            <li class="Li"><img src="images/4.jpg"></li>
            <li class="Li"><img src="images/5.jpg"></li>
            <li class="Li"><img src="images/6.jpg"></li>
        </ul>
    </div>
    <div id="nav">
        <a href="#" class="next"></a>
        <a href="#" class="prev"></a>
    </div>
</div>  

接下来是CSS部分，利用ul外层的div的overflow属性来显示单个图片

#content {
    overflow: hidden;
    width: 400px;
    height: 300px;
    margin: 0 auto;
    border: 3px solid black;
}

还需要将ul里的图片弄成一行，这个直接利用浮动设置

.photo li {
    float: left;
}

这样基本的布局已经完成了，下面要实现的就是jQuery的部分了，将ul的左外边距依次减小图片的宽度400px。但是这样的话，当移动到最后一张图片的时候，再点击下一页，就要把ul的左外边距重新设置成0px,这样就完成了图片的轮播。

但是这样其实有一个BUG，你从最后一张图片跳到第一张图片其实是没有动画效果的，看起来很不舒服，那怎么弄，才能解决这个小BUG呢。

其实jQuery有两个方法，prepend() 和append()。前者是在一个元素中的头部插入一个元素，后者是在尾部，这样每次在将ul的第一个元素左移400px后，将其添加到ul的尾部然后删除利用remove()方法，也就是说这第一个元素现在成了最后一个元素。这中间需要用一个变量保存这个元素，可以利用clone()方法。

代码如下

$(document).ready(function(){
        $("#nav .next").click(function(){
            movenext();
        });
        function movenext(){
        $(".photo li:first-child").animate({marginLeft:"-400px"},1000,function(){
                    var temp=$(this).clone();
                        $(this).remove();
                        temp.css({marginLeft:"0"});
                    $(".photo").append(temp);
                });
        }
    });

这样，向后轮播实现。向前是一样的

$(document).ready(function(){
            $("#nav .prev").click(function(){
                moveprev();
            });
            function moveprev(){
                    var temp=$(".photo li:last-child").clone();
                    $(".photo li:last-child").remove();
                    temp.css({marginLeft:"-400px"});
                    $(".photo").prepend(temp);
                    $(".photo li:first-child").animate({marginLeft:"0"},1000);
            }
        });

这里需要注意的一点，向前是需要先将尾部的元素添加到头部，再执行图片的切换，和向后的顺序是相反的。

在线轮播图展示：简单的轮播图