发表于

release (pm2)

pm2

1
pm2 start [app]

list all

1
pm2 list

[app] details

1
pm2 show [app]

ecosystem.json

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
{
  "apps" : [{
    "name"      : "blog",
    "script"    : "app.js",
    "env": {
      "COMMON_VARIABLE": "true"
    },
    "env_production" : {
      "NODE_ENV": "production"
    }
  }],
  "deploy" : {
    "production" : {
      "user" : "copy",
      "host" : ["192.168.1.98"],
	  "port" : "22",
      "ref"  : "origin/master",
      "repo" : "git@github.com:co-py/blog-api.git",
      "path" : "/var/www/blog/production",
      "ssh_options": "StrictHostKeyChecking=no",
      "pre-deploy-local" : "echo 'This is a local executed command'",
      "post-deploy" : "npm install --registry=https://registry.npm.taobao.org && pm2 startOrRestart ecosystem.json --env production",
      "env"  : {
        "NODE_ENV": "production"
      }
    }
  }
}

deploy

1
2
# pm2 deploy <configuration_file> <environment> setup
pm2 deploy ecosystem.json production setup

发表于

check rules

1
sudo  iptables -L

clean rules

1
2
sudo iptables -F
sudo iptables -X

drop all

1
2
3
4
# 关闭所有的 INPUT FORWARD OUTPUT 只对某些端口开放
iptables -P INPUT DROP
iptables -P FORWARD DROP
iptables -P OUTPUT DROP

example

1
2
3
4
5
6
7
8
iptables -A INPUT -p tcp --dport 22 -j ACCEPT #ssh
iptables -A INPUT -p tcp --dport 80 -j ACCEPT #web
iptables -A INPUT -p tcp --dport 20 -j ACCEPT #FTP
iptables -A INPUT -p tcp --dport 21 -j ACCEPT
iptables -A INPUT -p tcp --dport 25 -j ACCEPT #email
iptables -A INPUT -p tcp --dport 110 -j ACCEPT
iptables -A OUTPUT -p tcp --sport 31337 -j DROP #hack
iptables -A OUTPUT -p tcp --dport 31337 -j DROP

iptables config save

1
2
3
4
5
6
7
8
9
10
11
12
13
su root
# 把设置的规则保存到指定的地方，文件名可以自定义
iptables-save >/etc/iptables.up.rules
# 调用Iptables设置
iptables-restore < /etc/iptables.up.rules
nano /etc/network/interfaces 
# gedit /etc/network/interfaces
在
auto ath0
     iface ath0 inet dhcp
	 后面，加上
pre-up iptables-restore >/etc/iptables.up.rules # 开机时自动调用已经存在的Iptables设置
post-down iptables-save >/etc/iptables.up.rules # 关机时自动保存当前的Iptables设置

reload

1
iptables-restore < /etc/iptables.up.rules

发表于

remove apache

1
2
sudo service apache2 stop
sudo apt-get remove apache2

install nginx

1
2
3
sudo apt-get install nginx
cd /etc/nginx/conf.d
vi api.chaoshuai.com-3000.conf

edit xxx.conf

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
upstream my_server {                                                         
    server 127.0.0.1:3000;
}
server {
    listen       80;                                                         
    server_name  api.chaoshuai.org; 

    location / {
        proxy_pass http://my_server/;
		proxy_redirect off;
        proxy_set_header Host $host:$server_port;
		# 后端的Web服务器可以通过X-Forwarded-For获取用户真实IP
        proxy_set_header  Host  $host;
		proxy_set_header  X-Nginx-Proxy true;
        proxy_set_header  X-Real-IP  $remote_addr;  
        proxy_set_header  X-Forwarded-For  $proxy_add_x_forwarded_for;
        # proxy_next_upstream error timeout invalid_header http_500 http_502 http_503 http_504;
    }

    location ~* ^.+\.(gif|jpg|jpeg|bmp|png|ico|txt|js|css)  
	{    
		root /www/my_server/production/current/public;
	}
}

join *conf

1
2
3
cd /etc/nginx
sudo nano nginx.conf
# include /etc/nginx/conf.d/*.conf;

test nginx flies

1
2
sudo nginx -t
# nginx: configuration file /etc/nginx/nginx.conf test is successful

nginx reload

1
sudo nginx -s reload

发表于

generate key

1
2
3
4
5
6
mkdir .ssh
cd .ssh
ssh-keygen -t rsa -C "my.email@example.com" -b 4096
# iinux
chmod 0700 ~/.ssh
chmod 0600 ~/.ssh/id_rsa*

copy key

1
cat ~/.ssh/id_rsa.pub

Git Bash on Windows / Windows PowerShell

1
cat ~/.ssh/id_rsa.pub | clip

Git test

1
2
ssh -T git@github.com
# Hi co-py You've successfully authenticated, but GitHub does not provide shell access.

clone git res

1
git clone 'git@myproject.git'

check status

1
git status -s

commit

1
2
3
4
5
git init
git add .
git commit -m 'feat # init' 
git remote add origin 'git@myproject.git'
git push origin master

reset

1
git reset -hard 'log.hash'

error

1
2
3
4
5
6
ssh-agent bash
ssh-add id_rsa
# ssh: Could not resolve hostname ssh.github.com: Name or service not known
step1. ping github.com
step2. sudo nano /etc/hosts
	   add 192.30.252.128 github.com

发表于

install openssh-server

1
sudo apt-get install openssh-server

check ssh

1
dpkg -l | grep ssh

check ps and print

1
ps -e | grep ssh #sshd

start service

1
sudo service ssh start

check ip

ifconfig
ifconfig th0 192.168.1.101

发表于

Ubuntu 16.4

init root

1
sudo passwd root

change root

1
su root
1
pwd

change home dir

1
cd ~

add [user] to sudo

1
2
3
gpasswd -a copy sudo
sudo visudo
copy ALL=(ALL:ALL) ALL

install soft

apt-get install

1
2
3
su [username]
cd ~
sudo apt-get update

install node env

1
2
3
4
5
sudo apt-get install curl
sudo curl -o- https://raw.githubusercontent.com/creationix/nvm/v0.33.6/install.sh | bash
nvm -v
nvm install [node version] # v9.2.0
node -v

npm change registry

1
2
3
4
5
6
npm -v
alias cnpm="npm --registry=https://registry.npm.taobao.org \
--cache=$HOME/.npm/.cache/cnpm \
--disturl=https://npm.taobao.org/dist \
--userconfig=$HOME/.cnpmrc"
cnpm -v

install pm2

1
2
cnpm install -g pm2
pm2

发表于

伪元素（css3之前也叫伪类），就是假的元素，不是元素的元素，听起来拗口，其实说，它并不存在于DOM节点中，只是在CSS渲染层加入。在强调语义化的HTML5中，你尽量不要使用它展示一些有实际意义的内容。
那么问题来了（这句好熟悉-。-），它有什么实用场景呢？下面我介绍下我工作中使用到的地方

一、 清除浮动

这大概是伪元素使用最广泛的地方了，创建BFC（块级格式化上下文）来清除浮动

1
2
3
4
5
clearfix::after{
	content: ' ';
	display: table;
	clear: both;
}

OK，完成，但是工作中我们会使用比较复杂一点的写法

1
2
3
4
5
6
7
8
9
clearfix::before, /*加before是为了防止顶部空白的崩溃（两个盒子之间都有margin的值，会发生重叠）*/
clearfix::after{
	content: ' ';
	display: table;
}

clearfix::after{
	clear: both;
}

二、 扩大小按钮的可点击区域，以增强用户体验

有没有这样的场景，UI界面有个小小的东西，可能是按钮，它的样式大小固定，同时也又有相应的事件，而手指的宽度决定了用户不能精确的点击到，就会发生用户多次点击却得不到相应情况。
在不改变样式的情况下，我们利用伪元素before扩大它的可点击区域

1
2
3
4
5
6
7
8
9
10
11
12
button {
	position: relative;
}

button::before{
	content： '';
	position: absolute;
	top: -10px;
	right: -10px;
	bottom: -10px;
	left: -10px;
}

三、 hover或者active的时候做出区别样式

比如导航栏，在hover如果只是改变颜色，会有些单调，现在大部分网页会加些衬线什么的，这样的东西不需要正真的元素，伪元素就粉墨登场了

1
2
3
4
5
6
7
8
nav-item:hover::after,
nav-item.active::after{
    content: " ";
    display: block;
    height: 4px;
    width: 100%;
    background-color: #f2b335;
}

四、 文字前面加图标

这里就不贴代码了，可以去icomoon下载相应的图标直接引用。

发表于

koa作为下一代web应用框架，尤其是使用了ES7的async和await,更是把简洁渗入血脉。今天我们来看看koa的基本用法，开始之前请安装koa2，Koa2须使用 7.6 以上版本的Node

事前准备

1
2
3
4
5
6
7
node -v

v8.6.0

mkdir koa2
cd koa2
npm install koa --save

官网最简实例

1
2
3
4
5
6
7
8
const Koa = require('koa')
const app = new Koa()

app.use(async ctx => {
  ctx.body = 'Hello World'
})

app.listen(3000)

访问 http://127.0.0.1:3000
可以看到 hello world

koa-route

koa 可以靠ctx.request.url原生实现路由，如果依靠去手动处理路由，将会变得异常繁琐，我们不需要重复造轮子，github上有好多高质量插件，路由我们使用koa-router

1
2
3
4
5
6
7
8
9
const route = require('koa-route')

app.use(route.get('/', (ctx, next) =＞｛
	ctx.response.body = 'Hello World'
｝)

app.use(route.get('/ａ', (ctx, next) =＞｛
	ctx.response.body = 'Hello ａ'
｝)

静态资源

一个http请求访问web服务静态资源，如果还是用路由去处理，将会产生很多路由，可是，我们会发现访问静态资源套路都一样，得知资源名称，拿到资源。所以我们使用koa-static来处理静态资源。

1
2
3
const path = require('path')
const static = require('koa-static')
app.use(static(path.join(__dirname)))

中间件

koa的重要概念就是中间件，它是一个个函数，用来处在 HTTP Request 和 HTTP Response，app.use()用来加载它，每个中间件默认接受两个参数，第一个参数是 Context 对象，第二个参数是next函数。只要调用next函数，就可以把执行权转交给下一个中间件。

1
2
3
4
app.use((ctx, next) => {
  console.log(`${ctx.request.url}`)
  next()
})

中间件栈

关于中间件栈，阮一峰老师的教程非常经典，看下面

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
const one = (ctx, next) => {
  console.log('>> one')
  next()
  console.log('<< one')
}

const two = (ctx, next) => {
  console.log('>> two')
  next()
  console.log('<< two')
}

const three = (ctx, next) => {
  console.log('>> three')
  next()
  console.log('<< three')
}

app.use(one)
app.use(two)
app.use(three)

// >> one
// >> two
// >> three
// << three
// << two
// << one

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
const one = (ctx, next) => {
  console.log('>> one')
  next()
  console.log('<< one')
}

const two = (ctx, next) => {
  console.log('>> two')
  // next()
  console.log('<< two')
}

const three = (ctx, next) => {
  console.log('>> three')
  next()
  console.log('<< three')
}

app.use(one)
app.use(two)
app.use(three)

// >> one
// >> two
// << two
// << one

结论： 如果中间件内部没有调用next函数，那么执行权就不会传递下去

异步中间件

异步处理，是web开发中最重要的，同时koa2中的asnyc和await的用法，让异步处理和同步处理一样简单。

1
2
3
4
5
6
7
8
9
const fs = require('fs')
const Koa = require('koa')
const app = new Koa()

app.use( async (ctx, next) => {
  ctx.response.body = await fs.readFile()
})

app.listen(3000)

发表于

koa作为下一代web应用框架，尤其是使用了ES7的async和await,更是把简洁渗入血脉。在开始说koa之前，我们先讲讲koa的好搭档MongoDB。

mongoBD服务配置(window)

在MongoDB安装目录下bin同级下，新建目录

1
2
3
4
mkdir data
mkdir log
cd log
touch mongo.log

添加环境变量

此电脑 => 属性 => 高级系统设置 => 环境变量 => path

1
C:\Program Files\MongoDB\Server\3.4\bin

注册为服务，开机自动启动

以管理员权限启动CMD

1
mongod --dbpath "C:\Program Files\MongoDB\Server\3.4\data" --logpath "C:\Program Files\MongoDB\Server\3.4\log\mongo.log" --logappend --install --serviceName "MongoDB"

搜索MongoDB服务，设置启动

测试

1
mongo

注销服务

1
mongod.exe --remove --serviceName "MongoDB"

基础命令

查看所有库

1
2
3
4
show dbs

admin  0.000GB
local  0.000GB

使用库（没有则新建库）

1
2
3
use app

switched to db app

创建一条数据并查找出来

1
2
3
4
5
6
7
8
db.user.save({name: "chaoshuai"})

WriteResult({ "nInserted" : 1 })


db.user.find()

{ "_id" : ObjectId("59d87fc36f962cd49948149c"), "name" : "chaoshuai" }

更新一条数据（没有$set:{},会覆盖所有属性）

1
db.user.update({"_id" : ObjectId("59d87fc36f962cd49948149c"},{$set:{"name": "xiaoshuai"}})

删除记录(条件为空不会执行)

1
db.user.remove({name: 'xiaoshuai'})

删除表

1
db.mytable.drop();

创建用户

1
db.createUser({user: 'copy',pwd: '123', roles:[{role:'dbOwner',db:'myblog'}]})

mongoose 建模和操作数据库

连接数据库

1
2
const db = 'mongodb://localhost/app'
mongoose.connect(db, {useMongoClient:true})

定义Schema(不具备操作数据库的能力)

1
2
3
4
5
const mongoose = require('mongoose')
const UserSchema = new mongoose.Schema({
	name: String,
	age: Number
})

Schema Types内置类型如下：

　　String

　　Number

　　Boolean | Bool

　　Array

　　Buffer

　　Date

　　ObjectId | Oid

　　Mixed

由Schema生成Model(可以对数据库的操作)

1
const userModel = mongoose.model('User',UserSchema)

生成新用户并保存

1
2
3
4
5
6
7
8
9
10
11
12
13
14
const mongoose = require('mongoose')
const User = mongoose.model('User')
const user = new User({
	name: 'chaoshuai',
	age: 20
})

try{
	user.save()
} catch (e) {
	console.log('保存信息出错')
	return
}
console.log('保存成功')

发表于

百度 ‘CSS3实现图片闪光划过效果’,比较好的Blog是也讲清楚了实现原理，但都是通过添加一个标签来实现渐变，让他划过图片。
我觉得，使用css的伪类::before，实现更好。
不用添加无意义标签，代码更简洁。

先上代码 Copy到html文件看看效果

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>CSS3闪光特效</title>
    </head>
    <style>
     .project-item{
        width: 262px;
        height: 190px;
        overflow: hidden;
        margin: 0 auto;
        box-sizing: border-box;
        border-radius: 5px;
        position: relative;
        background-color: #70c3ff;
    }
     .project-item::before{
        content: '';
        position: absolute;
        top: 0;
        left: -262px;
        width: 100%;
        height: 100%;
        background-image: -moz-linear-gradient(0deg,rgba(255,255,255,0),rgba(255,255,255,0.5),rgba(255,255,255,0));
        background-image: -webkit-linear-gradient(0deg,rgba(255,255,255,0),rgba(255,255,255,0.5),rgba(255,255,255,0));
        transform: skewx(-25deg);
        -o-transform: skewx(-25deg);
        -moz-transform: skewx(-25deg);
        -webkit-transform: skewx(-25deg);
    }
     .project-item:hover::before{
        left: 262px;
        -moz-transition:0.3s ease;
        -o-transition:0.3s ease;
        -webkit-transition:0.3s ease;
        transition:0.3s ease;
    }
    </style>
    <body>
        <div class="project-item">
        </div>
    </body>
</html>

下面说下实现原理

给要应用闪光效果的东西，div img布拉布拉 添加样式

重要的两个如下

overflow: hidden;
position: relative;

overflow： 让闪光层只在这个元素有效，不要污染到其他元素
relative： 让闪光层相对他的定位

设置闪光层

content: '';
position: absolute;
top: 0;
left: -262px;
width: 100%;
height: 100%;

left : 闪光层的位移，负的宽度
absolute： 闪光层大小和父元素一样，绝对定位

设置hover效果

    .project-item:hover::before{
    // 效果
}

上面的意思是，.project-item类的元素添hover时候，它的before伪类要行进的效果

so easy哈，这效果还不错，当然一般加上漂浮的效果更好，看看加上漂浮效果

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>CSS3闪光特效</title>
    </head>
    <style>
     .project-item{
        width: 262px;
        height: 190px;
        overflow: hidden;
        margin: 0 auto;
        box-sizing: border-box;
        border-radius: 5px;
        position: relative;
        background-color: #70c3ff;
    }
     .project-item::before{
        content: '';
        position: absolute;
        top: 0;
        left: -262px;
        width: 100%;
        height: 100%;
        background-image: -moz-linear-gradient(0deg,rgba(255,255,255,0),rgba(255,255,255,0.5),rgba(255,255,255,0));
        background-image: -webkit-linear-gradient(0deg,rgba(255,255,255,0),rgba(255,255,255,0.5),rgba(255,255,255,0));
        transform: skewx(-25deg);
        -o-transform: skewx(-25deg);
        -moz-transform: skewx(-25deg);
        -webkit-transform: skewx(-25deg);
    }
     .project-item:hover::before{
        left: 262px;
        -moz-transition:0.3s ease;
        -o-transition:0.3s ease;
        -webkit-transition:0.3s ease;
        transition:0.3s ease;
    }
    .cs-item:hover {
    transform: translateY(-6px);
    -webkit-transform: translateY(-6px);
    -moz-transform: translateY(-6px);
    box-shadow: 0 26px 40px -24px rgba(0, 36, 100, .5);
    -webkit-box-shadow: 0 26px 40px -24px rgba(0, 36, 100, .5);
    -moz-box-shadow: 0 26px 40px -24px rgba(0, 36, 100, .5);
    -moz-transition:0.5s ease;
    -o-transition:0.5s ease;
    -webkit-transition:0.5s ease;
    transition:0.5s ease;
    }
    </style>
    <body>
        <div class="project-item cs-item">
        </div>
    </body>
</html>