docker 基础

所有命令均在 centOS 7 上执行

概念

  • 镜像(Image)
    • 相当于是一个 root 文件系统
    • 提供容器运行时所需的程序、库、资源、配置等文件
    • 还包含了一些为运行时准备的一些配置参数（如匿名卷、环境变量、用户等）
    • 镜像不包含任何动态数据，其内容在构建之后也不会被改变
    • 镜像是分层存储的，由多层文件系统联合组成
    • 镜像构建时，会一层层构建，前一层是后一层的基础。
    • 每一层构建完就不会再发生改变，后一层上的任何改变只发生在自己这一层。
  • 容器(Container)
    • 镜像和容器的关系，就像是面向对象程序设计中的 类 和 实例 一样
    • 容器的实质是进程
    • 容器进程运行于属于自己的独立的命名空间
    • 容器也是使用的是分层存储(容器存储层)
    • 容器消亡时，容器存储层也随之消亡。因此，任何保存于容器存储层的信息都会随容器删除而丢失。
    • 容器不应该向其存储层内写入任何数据，容器存储层要保持无状态化
    • 所有的文件写入操作，都应该使用 数据卷（Volume）、或者绑定宿主目录
    • 数据卷的生存周期独立于容器，容器消亡，数据卷不会消亡
  • 仓库(Registry)
    • registry/repository:tag
    • 默认registry地址 docker hub
    • 默认registry名 library
  • 构建(build)
    • Docker 在运行时分为 Docker 引擎（也就是服务端守护进程）和客户端工具
    • Docker 的引擎提供了一组 REST API，被称为 Docker Remote API
    • 而如 docker 命令这样的客户端工具，则是通过这组 API 与 Docker 引擎交互
    • 虽然表面上我们好像是在本机执行各种 docker 功能，但实际上，一切都是使用的远程调用形式在服务端（Docker 引擎）完成
    • 也因为这种 C/S 设计，让我们操作远程服务器的 Docker 引擎变得轻而易举
    • docker build -t nginx:v3 . 中的这个 .，实际上是在指定上下文的目录
    • docker build 命令会将该目录下的内容打包交给 Docker 引擎以帮助构建镜像
    • 一般来说，应该会将 Dockerfile 置于一个空目录下，或者项目根目录下
    • 如果该目录下没有所需文件，那么应该把所需文件复制一份过来
    • 如果目录下有些东西确实不希望构建时传给 Docker 引擎，那么可以用 .gitignore 一样的语法写一个 .dockerignore，该文件是用于剔除不需要作为上下文传递给 Docker 引擎的。

Commands

Image

1
2
3
4
# pull
docker pull [选项] [Docker Registry 地址[:端口号]/]仓库名[:标签]

docker pull ubuntu:16.04
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
# image

# 列出镜像
docker image ls
# 列出所有镜像(包括中间层镜像)
docker image ls -a
# 列出指定仓库镜像
docker image ls ubuntu

# 虚悬镜像(dangling image)
docker image ls -f dangling=true
# 删除虚悬镜像(dangling image)
docker image prune

# 删除镜像
docker image rm [选项] <镜像1> [<镜像2> ...]
docker image rm [Image ID]
docker image rm centos
1
2
3
# system
# 查看docker所占空间
docker system df
1
docker history imageName:imageTag

commit

1
2
3
4
5
6
# docker commit(慎用)(臃肿) 生成的镜像也被称为黑箱镜像
docker commit \
  --author 'liuxin' \
  --message 'commit msg' \
  containerName \
  imageName:imageTag

exec

1
docker exec -it containerName bash

build

1
2
3
docker build [选项] <上下文路径/URL/->

docker build -t imageName:imageTag .

ALL >>

shell 基础

变量

  • 语法
    • 每句末尾的 ; 是可选的
    • 赋值
      • 赋值语句 = 两边不能有空格
    • 取值
      • '' 内不会取到变量具体内容
      • "" 内的变量会被替换成值
    • 判断
      • 判断语句 [ ] 两边都需要有空格
      • -d 两边都需要空格
      • 多重判断 [[]] 间使用 || 或者 && 连接，|| 和 && 两边空格是可选的
    • 循环 for var in 1 2 3; do done
      • 循环列表中使用空格 区分项
      • do 为开始 done 为结束
      • 使用变量 $var
  • 变量
    • 使用变量时添加 $ 前缀
  • 函数
    • 函数声明内可以引用函数外部变量
    • 函数内部可以使用作用域链上的变量，但取不到未执行的变量
  • 获取用户输入 read
    • -p 允许输入提示
  • 全局变量
    • $0 脚本执行路径
  • 命令
    • dirname $path 获取 $path 上层目录
      • path=/path/to/filename
      • $(dirname $path) # /path/to
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
29
30
31
32
33
34
35
36
37
38
39
40
#!/bin/bash
ROOT=$PWD;
echo '$PWD'; # $PWD
echo "$PWD"; # /path/to


createDir() {
  echo $before; # before ...
  echo $after;  # empty line

  for arg in "$@"
  do
    DIR=$ROOT/$arg

    if [ -d $DIR ]; then
      echo "$DIR is already a directory";
    else
      read -p "create $DIR ? (Y/n)" isYes;

      if [[ "$isYes" = "Y" ]] || [[ ! $isYes ]]; then
        mkdir $DIR;
      else
        echo "cancel create $DIR";
      fi
    fi
  done
}

before="before...";

createDir test

after="after...";

for var in "a a" b c; do
  echo $var; # a a, b, c
done

echo $0; # 执行路径
echo $(dirname $0); # 获取上层目录

Refs

ALL >>

XLSX 导出excel文件 (TS)

Step 1. 安装依赖 xlsx

1
yarn add xlsx

Step 2. Import

1
import * as XLSX from 'xlsx';

Step 3. Usage

xlsx支持多种格式导出，具体可以参考官方文档github

demo

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
29
30
31
32
33
34
35
36
37
38
class Export {
  private _wb: XLSX.WorkBook = XLSX.utils.book_new();

  appendSheet(aoaData, {
    sheetName = 'sheet',
  } = {}) {
    // 与左上角和右下角确认一个矩形相似
    const merge = {
      // start
      s: {
        // row
        r: 0,
        // column
        c: 0
      },
      // end
      e: {
        r: 0,
        c: 1,
      }
    };
    // 与以下写法结果相同
    // const merge = XLSX.utils.decode_range("A1:A2");

    const ws: XLSX.WorkSheet = XLSX.utils.aoa_to_sheet(aoaData);

    if (!ws['!merges']) {
       ws['!merges'] = [];
    }
    ws['!merges'].push(merge);

    XLSX.utils.book_append_sheet(this._wb, ws, sheetName);
  }

  exportExcelFile(filename = 'export.xlsx') {
    XLSX.writeFile(this._wb, filename);
  }
}
1
2
3
4
5
let exports = new Export();

exports.appendSheet([['a', 'b'], ['c'], ['d', 'e', 'f']]);

exports.exportExcelFile();

output

Refs

js-xlsx
merge cells from Array of Arrays

ALL >>

Angular Library 分离实践

原理就是利用绝对路径加载Library项目，其本身是可以抽离出去单独作为一个项目维护的。

在angular 6发布之前一直实用的ng-packagr手动构建angular library。

angular 6发布后可以通过ng g library xxx 自动生成lib项目，但是目前还不够完善，不支持实时编译，还有待完善。

本文主要是优化library项目在开发阶段和project项目之间的调试问题。

目录结构

1
2
3
4
5
6
7
8
9
root
  |-projects
    |-material
    |-common
    |-flux
  |-src
    |-tsconfig.app.json
    |-tsconfig.spec.json
  tsconfig.json

去除 tsconfig.app.json 和 tsconfig.spec.json 中的 baseUrl

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
29
30
// before
{
  "extends": "../tsconfig.json",
  "compilerOptions": {
    "baseUrl": "./",
    "outDir": "../out-tsc/app",
    "module": "es2015",
    "types": []
  },
  "exclude": [
    "test.ts",
    "**/*.spec.ts",
    "../node_modules/@petkit/**/*"
  ]
}

// now
{
  "extends": "../tsconfig.json",
  "compilerOptions": {
    "outDir": "../out-tsc/app",
    "module": "es2015",
    "types": []
  },
  "exclude": [
    "test.ts",
    "**/*.spec.ts",
    "../node_modules/@petkit/**/*"
  ]
}

在 tsconfig.json 中添加 baseUrl, 配置 paths

1
2
3
4
5
6
7
8
9
10
{
  "compilerOptions": {
    "baseUrl": "./",
    "paths": {
      "@libs/*": [
        "projects/*"
      ]
    }
  }
}

** 注意 **

  1. library项目中需要在根路径加上index.ts，以便与实际生产环境下的引用方式保持一致
1
2
// index.ts
export * from './public_api';

ALL >>

git flow

Generate the Commit Message

Install commitizen

1
2
3
4
5
# install
yarn global add commitizen

# exec in project root
commitizen init cz-conventional-changelog --save --save-exact

Validate the Commit Message

Install husky to help us use git and npm hooks

husky hooks

1
yarn add husky --dev

Install commitlint

commitlint

Installation

1
2
3
4
5
# For Windows:
yarn add --dev @commitlint/config-conventional @commitlint/cli

# Configure commitlint to use angular config
echo "module.exports = {extends: ['@commitlint/config-conventional']}" > commitlint.config.js

Configuration

1
2
3
4
5
{
  "scripts": {
    "commitmsg": "commitlint -e $GIT_PARAMS"
  }
}

Generate ChangeLog

Install conventional-changelog-cli

1
yarn add --dev conventional-changelog-cli

Configuration

1
2
3
4
5
{
  "scripts": {
    "version": "conventional-changelog -p angular -i CHANGELOG.md -s -r 0 && git add CHANGELOG.md"
  }
}

Branch Management

该分支模型值得借鉴的地方包括

  • 规范的分支命名
  • 将分支和代码运行环境关联起来

分支和代码运行环境的关系是这样的，

  • master => 生产环境
  • release/，hotfix/ => 预上线环境
  • feature/*，develop => 开发环境

git flow Installation

Mac

1
brew install git-flow

Linux

1
2
3
curl -OL https://raw.github.com/nvie/gitflow/develop/contrib/gitflow-installer.sh
chmod +x gitflow-installer.sh
sudo ./gitflow-installer.sh

Refs

ALL >>

angular v5升级至v6

安装v8版node lts

1
2
# now is 8.11.2
sudo n lts

升级 @angular/cli

1
2
3
npm uninstall -g @angular/cli
npm cache verify
npm i -g @angular/cli@6.0.0

修改所有angular依赖至v6

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
{
  "devDependencies": {
    "@angular-devkit/build-angular": "~0.6.0",
    "@angular/animations": "^6.0.0",
    "@angular/cdk": "^6.0.0",
    "@angular/cli": "^6.0.0",
    "@angular/common": "^6.0.0",
    "@angular/compiler": "^6.0.0",
    "@angular/compiler-cli": "^6.0.0",
    "@angular/core": "^6.0.0",
    "@angular/forms": "^6.0.0",
    "@angular/http": "^6.0.0",
    "@angular/material": "^6.0.0",
    "@angular/platform-browser": "^6.0.0",
    "@angular/platform-browser-dynamic": "^6.0.0",
    "@angular/router": "^6.0.0",
    "rxjs": "^6.0.0",
    "rxjs-compat": "^6.0.0",
    "tsickle": "0.27.5",
    "tslib": "1.9.0",
    "typescript": "2.7.2",
    "zone.js": "~0.8.26"
  }
}

重装 node_modules

1
2
rm -rf node_modules
yarn install

删除.angular-cli.json，添加.angular.json

1
ng update @angular/cli --migrate-only --from=1.7.4

Finished

大功告成

新特性

  1. angular

break change

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
// before
source
 .map(x => x + x)
 .mergeMap(n => of(n + 1, n + 2)
   .filter(x => x % 1 == 0)
   .scan((acc, x) => acc + x, 0)
 )
 .catch(err => of('error found'))
 .subscribe(printResult);

// now
source.pipe(
 map(x => x + x),
 mergeMap(n => of(n + 1, n + 2).pipe(
   filter(x => x % 1 == 0),
   scan((acc, x) => acc + x, 0),
 )),
 catchError(err => of('error found')),
).subscribe(printResult);
  • 操作符导入路径
1
2
3
4
5
import { Observable, Subject, asapScheduler, pipe, of, from, interval, merge, fromEvent } from 'rxjs';
import { map, filter, scan } from 'rxjs/operators';
import { webSocket } from 'rxjs/webSocket';
import { ajax } from 'rxjs/ajax';
import { TestScheduler } from 'rxjs/testing';
  • 部分操作符重命名
1
2
3
4
do -> tap
catch -> catchError
switch -> switchAll
finally -> finalize
  • 部分操作符在v7版将废弃
1
2
3
4
5
6
7
8
9
10
11
mergeMap()
mergeMapTo()
concatMap()
concatMapTo()
switchMap
switchMapTo()
exhaustMap()
forkJoin()
zip()
combineLatest()
fromEvent()

ALL >>

github pages tips

自定义域名

  • settings -> github pages
    github pages

  • 设置一条CNAME的域名解析记录值为 xxx.github.io
    dns

  • 在项目根路径中添加文件 CNAME, 添加一行记录，不然每次git提交都会重置GitHub pages域名配置

1
blog.soraliu.devlovesora.pro

ALL >>

tag:

    缺失模块。
    1、请确保node版本大于6.2
    2、在博客根目录（注意不是yilia根目录）执行以下命令：
    npm i hexo-generator-json-content --save

    3、在根目录_config.yml里添加配置： 

      jsonContent:
    meta: false
    pages: false
    posts:
      title: true
      date: true
      path: true
      text: false
      raw: false
      content: false
      slug: false
      updated: false
      comments: false
      link: false
      permalink: false
      excerpt: false
      categories: false
      tags: true

嗯？ 嗯～