编辑修改文件/www/server/panel/vhost/nginx/0.default.conf将默认的配置：

1
2
3
4
5
6
7

server
{
    listen 80;
    server_name _;
    index index.html;
    root /www/server/nginx/html;
}

修改为：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

server
{
    listen 80;
    listen 443 ssl http2;
    server_name _;
    index index.html;
    root /www/server/nginx/html;

    # DEFAULT SSL CONFIG
    ssl_certificate    /www/server/panel/vhost/cert/0.default/fullchain.pem;
    ssl_certificate_key    /www/server/panel/vhost/cert/0.default/privkey.pem;
    ssl_protocols TLSv1.2 TLSv1.3;
    ssl_ciphers EECDH+CHACHA20:EECDH+CHACHA20-draft:EECDH+AES128:RSA+AES128:EECDH+AES256:RSA+AES256:EECDH+3DES:RSA+3DES:!MD5;
    ssl_prefer_server_ciphers off;
    ssl_session_cache shared:SSL:10m;
    ssl_session_timeout 10m;
    add_header Strict-Transport-Security "max-age=31536000";

    # 关键设置：直接关闭连接
    return 444;
}

return 444; 是 Nginx 独有的指令，它会直接断开连接，不返回任何内容，非常适合用于拦截恶意请求 。添加了这一行后，当用户访问你的站点时，Nginx 会直接返回一个空响应，并断开连接。这样，用户将无法访问你的站点，除非被允许访问的 IP 地址。

为方便用户输入，类型的字符集我们定义为：
1：单播地址
2：组播地址
3：广播地址

可以输入多个类型，以英文逗号分隔，如：1,2,3

首先定义处理字符串类型匹配的函数：

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

/**
 * @brief 判断目标数字是否在字符串中
 *
 * @param target
 * @param data
 * @return true
 * @return false
 */
bool pp_in_string(int target, char *data) {
  bool found = false;
  if (data == NULL) goto end;

  char str[128];
  // 避免字符串拷贝溢出
  strncpy(str, data, sizeof(data) - 1);
  str[sizeof(str) - 1] = '\0';

  char *token = strtok(str, ",");
  while (token != NULL) {
    if (atoi(token) == target) {
      found = true;
      break;
    }
    token = strtok(NULL, ",");
  }

end:
  return found;
}

定义地址类型判断方法：

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

/**
 * @brief 检查地址是否在指定范围,判断是否为单播、组播、广播地址
 *
 * @param family
 * @param ip ipv4 或 ipv6 地址，分别以“struct in_addr”、"struct in6_addr"的形式传入，统一类型为__u32
 * @param range_type
 * @return true
 * @return false
 */
bool address_check_range_type(int family, unsigned int *ip, char *range_type) {
  if (range_type[0] == '\0') {
    return true;
  }

  // 默认为单播1单播，2组播，3广播
  int result = 1;

  if (family == AF_INET) {
    if (ntohl(ip[0]) == 0xFFFFFFFF) {
      result = 3;
    } else if ((ntohl(ip[0]) & 0xF0000000) == ((uint32_t)(0xE0 << 24))) {
      result = 2;
    }
  } else if (family == AF_INET6) {
    // ipv6的格式是分8段，首段是16位，共128位的值，组播需要判断其前8位需要全是1
    // unsigned int是32位的，不能直接使用ip[0]==oxFF去判断，需要转换后去判断
    struct in6_addr  *addr_v6 = (struct in6_addr *)ip;
    if (addr_v6->s6_addr[0] == 0xFF) {
      result = 2;
      // ipv6的广播使用组播实现
      if (pp_in_string(3, range_type)) {
        result = 3;
      }
    }
  }

  return pp_in_string(result, range_type);
}

上面的在 ipv6 格式下比较，需要转换一下再去判断。

ipv6 的地址结构体为：

1
2
3
4
5
6
7

struct in6_addr {
    union {
        uint8_t   s6_addr[16];   // 128-bit address
        uint16_t  s6_addr16[8];  // access with uint16_t
        uint32_t  s6_addr32[4];  // access with uint32_t
    } __u6_addr;
}

所以我们需要使用 in6_addr 结构体中的 s6_addr 去判断，正好是 128 位的 ipv6 地址表示值，而且分了 16 个数组，所以每组即 8 位，正使满足我们比较前 8 位需要全是 1 的条件。而如果我们使用的 s6_addr32，那么每组是 32 位，共 4 组，不能满足判断前 8 位的条件。

ipv6 的地址数据格式为：AA22:BB11:1122:CDED:1234:AA99:7654:7410

下面我将介绍如何做一个 npm 包，以及 npm 包发布。

首先是一个项目的目录结构，可以看出和我们平时开发 vue 项目很像，只是多了一个packages目录，用来存放我们的主要项目文件。

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

www
├─lib                  模块集编译目录
├─node_modules         扩展包文件目录
├─packages             工具包目录
├─public               入口文件目录
│  ├─favicon.ico       站点图标
│  └─index.html        入口文件
├─src                  页面主目录
│  ├─router            路由文件夹
│  ├─views             页面文件夹
│  ├─app.vue           主页入口
│  └─main.js           主核心文件
├─test                 自动化测试用例目录
│  ├─unit              单元测试用例目录
│  └─...               更多
├─.eslintignore        代码格式检测忽略配置文件
├─.eslintrc.js         代码格式检测配置文件
├─.gitignore           git忽略配置文件
├─.npmignore           npm忽略配置文件
├─.prettierrc.js       IDE格式化代码配置文件
├─babel.config.js      JS编译器babel配置文件
├─jsconfig.json        JavaScript 语言服务配置选项文件
├─package.json         项目包的所有相关信息文件
├─pnpm-lock.yaml       pnpm包锁文件
├─README.md            README 文件
└─vue.config.js        项目配置文件

在这个项目中，我们需要将我们对外提供的内容都放到 packages 中，其中 /packages/index.js 中统一引入后对外暴露。

1
2
3
4
5

// /packages/index.js

import api from "./utils/api";
import axios from "./axios/index";
export default { api: api, axios: axios };

其中 /src/ 目录下，也可以引入自已 packages 中的库，进行本地页面上测试，或在 /test/ 目录中编用库的单元测试用例进行验证。

我们需要重点关注以下几个文件的内容：

1、.npmrc

这个文件里定义了 npm 的注册地址，默认是 https://registry.npmjs.org/。

如果要发布到 npm 的私有仓库，需要修改为私有仓库的注册地址。

1

registry=https://registry.npmjs.org/

2、package.json

这个文件里定义了包的一些信息，比如版本号，描述，作者，许可证等，其中脚本 lib 就是将 packages/index.js 进行编译后，输出到 lib 目录下，供其他项目引用的处理命令。

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
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88

{
    "name": "@webape/api",
    "version": "0.0.1",
    "description": "api请求库",
    "private": false,
    "keywords": ["api"],
    "author": {
        "name": "webape",
        "email": "webape@qq.com"
    },
    "license": "ISC",
    "publishConfig": {
        "@webape:registry": "http://npm.webape"
    },
    "main": "lib/ng.umd.js",
    "scripts": {
        "serve": "vue-cli-service serve",
        "build": "vue-cli-service build",
        "test:unit": "vue-cli-service test:unit",
        "lib": "vue-cli-service build --target lib --name ng --dest lib packages/index.js",
        "lint": "vue-cli-service lint src packages"
    },
    "dependencies": {
        "axios": "^1.4.0",
        "core-js": "^3.32.0",
        "crypto-js": "^4.1.1",
        "element-ui": "^2.15.13",
        "qs": "^6.11.2",
        "vue": "^2.7.14",
        "vue-router": "^3.6.5",
        "vuex": "^3.6.2"
    },
    "devDependencies": {
        "@babel/core": "^7.22.10",
        "@babel/eslint-parser": "^7.22.10",
        "@babel/plugin-proposal-nullish-coalescing-operator": "^7.18.6",
        "@vue/cli-plugin-babel": "~5.0.8",
        "@vue/cli-plugin-eslint": "~5.0.8",
        "@vue/cli-plugin-router": "~5.0.8",
        "@vue/cli-plugin-unit-jest": "~5.0.8",
        "@vue/cli-plugin-vuex": "~5.0.8",
        "@vue/cli-service": "~5.0.8",
        "@vue/eslint-config-prettier": "^6.0.0",
        "@vue/test-utils": "^1.3.6",
        "@vue/vue2-jest": "^27.0.0",
        "babel-jest": "^27.5.1",
        "babel-polyfill": "^6.26.0",
        "eslint": "^7.32.0",
        "eslint-config-prettier": "^8.10.0",
        "eslint-plugin-prettier": "^3.1.0",
        "eslint-plugin-vue": "^8.7.1",
        "jest": "^27.5.1",
        "jest-serializer-vue": "2.0.2",
        "less": "^4.2.0",
        "less-loader": "^8.1.1",
        "msw": "^1.2.5",
        "prettier": "^2.8.8",
        "vue-template-compiler": "^2.7.14"
    },
    "eslintConfig": {
        "root": true,
        "env": {
            "node": true
        },
        "extends": ["plugin:vue/essential", "eslint:recommended", "@vue/prettier"],
        "parserOptions": {
            "parser": "@babel/eslint-parser"
        },
        "rules": {},
        "overrides": [
            {
                "files": ["**/__tests__/*.{j,t}s?(x)", "**/tests/unit/**/*.spec.{j,t}s?(x)"],
                "env": {
                    "jest": true
                }
            }
        ]
    },
    "browserslist": ["> 1%", "last 2 versions", "not dead"],
    "jest": {
        "preset": "@vue/cli-plugin-unit-jest",
        "moduleNameMapper": {
            "^@tests/(.*)$": "<rootDir>/tests/$1",
            "^@packages/(.*)$": "<rootDir>/packages/$1"
        },
        "transformIgnorePatterns": ["/node_modules[/\\\\]/"]
    }
}

3、.npmignore

这个文件里定义了 npm 推送包时需要忽略的文件列表，默认是忽略 node_modules 目录下的文件，这里可以忽略其他不需要发布的文件。

一般情况下，我们只需要推送 package.json 文件和 lib 文件夹即可，所以可以添加如下内容：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

dist
node_modules
packages
pnpm-store
public
src
tests
.env.*
.eslintignore
.eslintrc.js
.gitignore
.npmignore.js
.npmrc.js
.prettierrc.js
babel.config.js
devCookie.txt
jsconfig.json
pnpm-lock.yaml
vue.config.js

4、vue.config.js

这个文件里定义了 vue-cli 的配置，这里可以定义一些打包时的配置，比如打包时的路径，打包时的环境变量等。

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
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61

const { defineConfig } = require("@vue/cli-service");

const path = require("path");
const fs = require("fs");

function resolve(dir) {
    return path.join(__dirname, dir);
}

const Timestamp = new Date().getTime();

module.exports = defineConfig({
    publicPath: process.env.NODE_ENV === "production" ? "/page/embed/" : "./",
    productionSourceMap: process.env.NODE_ENV !== "production",
    outputDir: "dist",
    assetsDir: "static",
    lintOnSave: true,
    devServer: {
        host: "0.0.0.0",
        port: 8080,
        compress: false,
        proxy: {
            "/api": {
                target: "https://webapet.net/api/",
                changeOrigin: true,
                pathRewrite: {
                    "^/api": "",
                },
                secure: false,
            },
        },
    },
    chainWebpack: (config) => {
        config.resolve.alias.set("@", resolve("src"));
        config.resolve.alias.set("@packages", resolve("packages"));

        // 删除预加载和预获取
        config.plugins.delete("preload");
        config.plugins.delete("prefetch");
    },

    configureWebpack: {
        performance: {
            hints: "warning",
            maxEntrypointSize: 50000000,
            maxAssetSize: 30000000,
            assetFilter: function (assetFilename) {
                return assetFilename.endsWith(".js");
            },
        },
    },
    // 以避免构建后的代码中出现未转译的第三方依赖
    transpileDependencies: [/node_modules[/\\\\]/],

    css: {
        extract: {
            filename: `./static/css/[name].${process.env.VUE_APP_VERSION}.${Timestamp}.css`,
            chunkFilename: `./static/css/[name].${process.env.VUE_APP_VERSION}.${Timestamp}.css`,
        },
    },
});

这里有项目代码根目录的部分文件示例源文件

至于想自已搭建私有 npm 仓库，可以查看npm 私服搭建

构建

1

npm run lib

推送

1

npm publish

一些 npm 常用操作命令：

1
2
3
4
5
6
7
8
9
10
11
12

# 强制删除指定版本的库
npm unpublish @webape/demo@0.0.1 --force
# 强制删除库
npm unpublish @webape/demo --force
# 废弃指定版本的库
npm deprecate @webape/demo@0.0.1 '不在更新了'
# 注册用户
npm adduser --registry http://npm.webape
# 登录用户
npm login --registry http://npm.webape
# 设置新密码
npm profile set password

为了 api 库能够在多个模块中使用，便于统一修改，我们可以封装一下 axios 的请求。

在适配某些其他项目时，其他项目也有可能发送 XHR 请求，但我们又无法管控和修改其他项目的代码，所以我们要获取当前是否有 XHR 请求，如果有，则需要排队等待上一个请求响应结束后才会去发送下一个请求。

这里我们需要一个 XHR 检测工具：

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
41
42

// axios/xhr-detect.js
// 避免重复处理
if (!window.XMLHttpRequest.__isPatched) {
    const OriginalXHR = window.XMLHttpRequest;

    if (!Object.prototype.hasOwnProperty.call(window, "WA_activeXHRCount")) {
        window.WA_activeXHRCount = 0;
    }

    // 重写XMLHttpRequest构造函数
    window.XMLHttpRequest = function () {
        const xhr = new OriginalXHR();

        // 保存原生send方法
        const originalSend = xhr.send.bind(xhr);

        // 重写send方法以计数
        xhr.send = function (...args) {
            window.WA_activeXHRCount++;
            originalSend(...args);
        };

        // 请求结束时减少计数器
        const decrement = () => {
            window.WA_activeXHRCount--;
        };

        // 监听所有结束事件
        xhr.addEventListener("load", decrement);
        xhr.addEventListener("error", decrement);
        xhr.addEventListener("abort", decrement);
        xhr.addEventListener("timeout", decrement);

        return xhr;
    };

    // 标记已修补，避免重复
    window.XMLHttpRequest.__isPatched = true;
}

// 提供检查方法
window.getActiveXHRCount = () => window.WA_activeXHRCount;

接下来我们要封装 axios 请求，达到所有使用该库发送请求的 api 请求都变成同步请求的目的。

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
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100

// axios/index.js
import axios from "axios";
import api from "../utils/api";
import "./xhr-detect";

// 是否是{}样的对象
const isObject = (obj) => {
    return obj !== null && typeof obj === "object" && !Array.isArray(obj);
};

// 检测函数是否在api对外暴露的方法集合中
const isFunIn = (fun) => {
    const name = fun.name;
    return Object.keys(api).indexOf(name) > -1;
};

let defaultConfig = {
    baseURL: "/" + process.env.VUE_APP_API_PRE,
    timeout: 1000 * 15,
    // 跨域请求时携带cookie凭证
    withCredentials: true,
    headers: {
        "Content-Type": "application/x-www-form-urlencoded",
        "X-Requested-With": "XMLHttpRequest",
    },
};
const service = axios.create();

// 定义公共变量
if (!Object.prototype.hasOwnProperty.call(window, "WA_requestQueue")) {
    window.WA_requestQueue = [];
}
if (!Object.prototype.hasOwnProperty.call(window, "WA_requestQueue")) {
    window.WA_isRequesting = false;
}

// 队列处理
const processQueue = () => {
    // 在当前有axios在请求中时、请求队列没有数据了，都暂不处理
    if (window.WA_isRequesting || window.WA_requestQueue.length === 0) {
        return;
    }

    // 如果平台有未完成的xhr请求时，延迟处理
    if (window.getActiveXHRCount() > 0) {
        setTimeout(() => {
            processQueue();
        });
        return;
    }

    window.WA_isRequesting = true;
    const { config, fun, resolve, reject } = window.WA_requestQueue.shift();

    let options;
    if (isObject(config) && fun === null) {
        // 传递的纯axios的配置对象
        options = { ...config };
    } else if (Array.isArray(config) && typeof fun === "function" && isFunIn(fun)) {
        // 传递的api处理函数，在队列中实时计算数据
        options = fun(...config);
    } else {
        console.error("request参数错误,请检查api配置");
        return;
    }

    options = Object.assign(defaultConfig, options);

    service(options)
        .then((response) => {
            resolve(response);
        })
        .catch((error) => {
            reject(error);
        })
        .finally(() => {
            window.WA_isRequesting = false;
            processQueue();
        });
};

/**
 * 请求处理方法
 * @param {*} config 可以是axios的对象配置，也可以是api对外暴露的函数参数值数组按顺序传递
 * @param {*} fun api对象暴露的函数
 * @returns
 */
const request = (config = {}, fun = null) => {
    return new Promise((resolve, reject) => {
        window.WA_requestQueue.push({ config, fun, resolve, reject });
        processQueue();
    });
};

// 设置默认的请求配置
const setDefaultOption = (option) => {
    defaultConfig = Object.assign(defaultConfig, option);
};

export default { request: request, service: service, setDefaultOption: setDefaultOption };

我们需要将该模块库中的所有的处理方法及 axios 库一起对外暴露

1
2
3
4

import api from "./utils/api";
import axios from "./axios/index";

export default { api: api, axios: axios };

将上面的库构建后，可以在具体的应用项目中进行使用。

这样我们就实现了将 axios 的所有请求变为同步请求，而且不影响 axios 的请求与响应的拦截器的定义，在定义 api 中可以像下面这样使用。

首先，在我们的项目中需要定义一个统一的 api 处理器

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
41
42
43
44
45
46
47
48
49
50
51
52
53
54

// utils/request.js

// 引入前面推送的库
import api from "@webape/api";

// 创建axios实例
const service = api.axios.service;

api.axios.setDefaultOption({
    baseURL: "/" + process.env.VUE_APP_API_PRE,
    timeout: 10000,
    // 跨域请求时携带cookie凭证
    withCredentials: true,
    headers: {
        "Content-Type": "application/x-www-form-urlencoded",
        "X-Requested-With": "XMLHttpRequest",
    },
});

// request拦截器
service.interceptors.request.use(
    (config) => {
        //...
        return config;
    },
    (error) => {
        //...
        return Promise.reject(error);
    }
);

// response拦截器
service.interceptors.response.use(
    (response) => {
        const { data } = response;
        if (Object.prototype.toString.call(data) === "[object Array]") {
            return Promise.resolve(data);
        } else {
            return Promise.reject("数据结构异常");
        }
    },
    (error) => {
        // 判断请求异常信息中是否含有超时timeout字符串
        if (error.message.includes("timeout")) {
            return Promise.reject("请求超时,请稍后再试");
        } else if (error.message.includes("NetworkError")) {
            return Promise.reject("网络错误,请稍后再试");
        } else {
            return Promise.reject(error);
        }
    }
);

export default api.axios.request;

然后在应用项目的 api 定义文件中像下面这样使用：

1
2
3
4
5
6
7
8
9
10
11

import request from "@/utils/request";
import api from "@webape/api";

// 使用函数处理方式
export function show(data) {
    return request(["commandXml函数参数param1", "commandXml函数参数param2", "commandXml函数参数param3"], api.api.commandXml);
}
// 直接使用axios的请求参数
export function show2(data) {
    return request({ url: "/webape.net/api/commandXml", method: "post", data: { webape: "webape" } });
}

然后就可以在具体的 vue 文件中 import 后进行使用了，这样只要使用封装的 axios 库的请求，都会被处理为同步请求，而且兼容在同一个项目中，有其他不被管控制的 XHR 请求，也会等待串行处理。

但在 Linux 系统上，例如 ubuntu，使用 VMware 就不是那么友好，当你去查资料时，可能还会被推荐 VirualBox,这也是一个不错好用的软件，但随着更新 Linux 内核版本，VirtualBox 也逐渐被弃用，而导致之前创建的虚拟机无法运行。

这里推荐大家使用 Qemu 来创建虚拟机，Qemu 是一个开源的虚拟化软件，它允许我们创建虚拟机，如果你需要运行 Linux 虚拟机，Qemu 是目前最快的管理程序之一，甚至没有“之一”。

在 Ubuntu 上安装 Qemu 和 KVM

首先检查当前 Linux 平台是否支持虚拟化，在终端输入：

1

LC_ALL=C lscpu | grep Virtualization

AMD 的架构中，如果支持虚拟化，则输出：

1

Virtualization:                       AMD-V

还要看当前系统中有多少核以供分配虚拟机，在终端输入：

1

egrep -c '(vmx|svm)' /proc/cpuinfo

确认没有问题后，我们就可以安装 Qemu 了，在终端输入：

1

sudo apt install qemu qemu-kvm qemu-system  qemu-user-static virt-manager bridge-utils

安装结束后，需要重新启动系统。

安装完成之后，可以查看 Qemu 版本：

1
2

qemu-system-x86_64 -version
qemu-system-arm -version

为了使 Qemu 工作，你必须 将你的用户加入两个组：libvirt-kvm 和 libvirt。

1
2

sudo useradd -g $USER libvirt
sudo useradd -g $USER libvirt-kvm

接下来，启用并启动 libvirt 服务：

1

sudo systemctl enable libvirtd.service && sudo systemctl start libvirtd.service

创建虚拟机

在 ubuntu 系统中打开虚拟系统管理器，可以根据 ISO 系统镜像来创建虚拟机。这里是图形化界面的操作过程，比较简单，这里就不多说了。

虚拟机与宿主机实现剪切板共享

在我们使用虚拟机，需要在宿主机与虚拟机之间进行文件传输，如果是虚拟机是 Linux 系统的，可以通过 scp 来实现，但如果虚拟机是 windows 系统，并且也不支持远程，则还有其他办法。

下面我们来使用 SPICE vdagent 实现 ubuntu 的宿主机和 windows 虚拟机之间的剪切板共享。

虚拟机配置 SPICE 通道：

1、在 virt-manager 中，确保虚拟机使用 SPICE 显示协议。

添加 Channel 设备（用于 SPICE 通信）：

1
2
3

<channel type='spicevmc'>
  <target type='virtio' name='com.redhat.spice.0'/>
</channel>

2、windows 虚拟机安装 vdagent：

windows 下载 SPICE vdagent，在下载页面中找到 Windows binaries 的 Windows SPICE Guest Tools(spice-guest-tools)进行下载安装。

双击下载的 exe 程序安装完成之后，重新启动虚拟机。

这样在虚拟机中和宿主机之间就可以实现剪切版共享了，宿主机复制文件到虚拟机中，可以直接拖拽进去。

为什么要使用函数式编程？因为它使你的生活更轻松！

一旦你开始功能性思考，你就永远不会回头。原因如下：

• 正常工作的代码：纯函数总是对相同的输入返回相同的输出 - 没有奇怪的意外，没有隐藏状态。

例子：

1
2
3

// 纯函数：输出仅取决于输入
const add = (a, b) => a + b;
console.log(add(2, 3)); // 5

与命令式编程（函数可能会修改外部变量）不同，FP 可以避免意外的副作用。这使得调试变得非常容易。

• 更容易维护：不变性和清晰的数据流意味着更少的错误和更顺畅的调试。

例子：

1
2
3
4
5

// 不可变对象更新
const user = { name: "Alice", age: 25 };
const updatedUser = { ...user, age: 26 };
console.log(user.age); // 25 (原有不变)
console.log(updatedUser.age); // 26 (新对象)

这可以防止在代码的某一部分更改对象而意外影响另一部分的错误。

• 轻松实现并行：不可变的数据结构消除了竞争条件，使并发编程变得轻而易举。在命令式代码中，多个线程改变同一个变量通常会导致不一致。在 FP 中，数据默认是不可变的，从而使多线程安全。

功能精通路线图

想要提升你的 FP 技能吗？遵循以下结构化路径：

掌握基础知识：学习纯函数、不变性、高阶函数和递归。

示例：高阶函数

1
2
3
4

// 以另一个函数作为参数的函数
const applyTwice = (fn, value) => fn(fn(value));
const double = (x) => x * 2;
console.log(applyTwice(double, 3)); // 12

这是 FP 的基础：对其他函数进行操作的函数。

坚持下去：在实际项目中应用 FP

理论很棒，但真正的学习发生在编写代码时。方法如下：

解决 FP 挑战：解决迫使你进行功能性思考的编码练习。

构建真实应用程序：创建功能性应用程序或为基于 FP 的开源项目做出贡献。

重构你的代码：将命令式代码转换为函数式风格——你将亲眼看到其好处。

示例：将命令式循环重构为函数式方法

1
2
3
4
5
6
7
8

// 至关重要的
let sum = 0;
for (let i = 1; i <= 5; i++) {
    sum += i;
}

// 函数式方法
const sumFunctional = [1, 2, 3, 4, 5].reduce((acc, val) => acc + val, 0);

函数式方法更具可读性，消除了变异，并且扩展性更好。

最近网站内容重新整理后，想使用一个流量统计平台，但上面的国内常用如百度统计、CNZZ等都没有免费的可以使用的了，目前还有一个可以正常免费使用的平台 51la还可以正常免费使用。

但是，我更喜欢使用 umami 这个开源项目。使用 umami 可以在私有服务器上搭建一个流量统计平台，并且可以自己定制自己的统计页面。更加可以适应一些内网的需求。

下面我将以 umami 为例，介绍如何使用 docker 快速搭建一个私有流量统计平台。

准备工作

下面是 umami 的镜像地址，直接使用 docker pull 下载镜像即可。

1
2
3

docker pull elestio/umami:latest
# 数据库镜像
docker pull postgres:15-alpine

如果国内访问不了docker仓库，可以使用阿里云的镜像源。

1
2
3

docker pull registry.cn-hangzhou.aliyuncs.com/elestio_cn/umami:latest
# 数据库镜像
docker pull registry.cn-hangzhou.aliyuncs.com/elestio_cn/postgres:15-alpine

也可以在镜外服务器中 pull 下来再 save 到本地，下载后 load 到本地服务器中。

创建容器

下面是 docker-compose 的配置文件，可以参考。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

version: '3.3'
services:
  umami:
    image: elestio/umami:latest
    ports:
      - "172.17.0.1:3956:3000"
    environment:
      DATABASE_URL: postgresql://umami:${ADMIN_PASSWORD}@db:5432/umami
      DATABASE_TYPE: postgresql
      APP_SECRET: ${SECRET_KEY_BASE}
    depends_on:
      - db
    init: true
    restart: always
  db:
    image: postgres:15-alpine
    environment:
      POSTGRES_DB: umami
      POSTGRES_USER: umami
      POSTGRES_PASSWORD: ${ADMIN_PASSWORD}
    volumes:
      - ./umami-db-data:/var/lib/postgresql/data
    restart: always

上面的配置中，可以将变量 ADMIN_PASSWORD、SECRET_KEY_BASE 替换为实际的值。

将上面的配置文件保存为 docker-compose.yml，然后使用 docker-compose up -d 命令启动容器。

访问 umami

访问地址为 http://172.17.0.1:3956，默认用户名是 admin ，密码是上面配置文件中设置的变量值。其中 172.17.0.1 为宿主机的IP地址，3956 为端口号。

上面配置是只是一个示例，在生产环境中使用时，还需要配置域名绑定，使用nginx反向代理等。

1. 首先可以新增网站，在设置中可以看到网站列表

2. 编辑查看页面中，可以获到流量统计的代码

3. 将统计代码插入到网站中，即可实现流量统计。再通过 umami 查看流量统计。

这样就完成了使用 umami 搭建私有流量统计平台的过程。有更多需求，可以基于其 github 项目进行二次开发。

在本文中，我们将探讨依赖注入作为这些技术之一。

看看下面的代码片段。

1
2
3
4
5

const getData = async (url) => {
    const response = await fetch(url);
    const data = await response.json();
    return data;
};

此函数使用 Fetch API 通过网络检索资源并返回它。虽然这可行，但从干净且可维护的代码角度来看，这里有很多事情可能会出错。

• 如果我们的需求将来发生变化，并且我们决定用另一个 HTTP 客户端（例如 Axios）替换 Fetch API，我们将必须修改整个函数才能与 Axios 一起使用。
• Fetch API 是浏览器中的全局对象，在我们要运行测试的 Node.js 等环境中不可用或可能无法完全按照预期工作。
• 在测试时，我们可能不想从网络上实际检索资源，但目前还没有办法做到这一点。

这就是依赖注入发挥作用的地方。

其核心是，依赖注入是从外部提供我们的代码所需的依赖项，而不是像我们在上面的示例中所做的那样，让我们的代码直接构造和解析依赖项。我们将代码所需的依赖项作为参数传递给 getData 函数。

1
2
3
4
5
6
7
8
9
10

const getData = async (fetch, url) => {
  const response = await fetch(url);
  const data = await response.json();
  return data;
};

(async => {
  const resourceData = await getData(window.fetch, "https://myresourcepath");
  //do something with resourceData
})()

依赖注入背后的目的是实现关注点分离。这使得我们的代码更加模块化、可重用、可扩展和可测试。

javascript 的核心是对象和原型，因此我们可以通过函数式或面向对象的方式进行依赖注入。

JavaScript 的函数式编程特性（如高阶函数和闭包）使我们能够优雅地实现依赖注入。

1
2
3
4

const fetchResource = (httpClient) => (url) =>
    httpClient(url)
        .then((data) => data.json)
        .catch((error) => console.log(error));

fetchResource 函数获取 HTTP 客户端的一个实例，并返回一个接受 URL 参数并对资源发出实际请求的函数。

1
2
3
4
5
6
7
8
9
10

import axios from "axios";

const httpClient = axios.create({
    baseURL: "https://mybasepath",
    method: "POST",
    headers: { "Access-Control-Allow-Origin": "*" },
});

const getData = fetchResource(httpClient);
getData("/resourcepath").then((response) => console.log(response.data));

我们用 Axios 替换了原生的 fetch，一切仍然正常，无需干预内部实现。在这种情况下，我们的代码不直接依赖于任何特定的库或实现。因为我们可以轻松地替换另一个库。

接收依赖项的对象（在本例中为函数）通常称为客户端，而被注入的对象称为服务。

服务可能需要跨代码库的不同配置。由于我们的客户不关心服务的内部实现或配置，因此我们可以像上面所做的那样以不同的方式预配置服务。

依赖注入使我们能够将代码（业务逻辑）与库、框架、数据库、ORM 等外部组件的更改隔离开来。通过适当的关注点分离，测试变得简单明了。

我们可以消除依赖关系，并针对独立于外部组件的多个理想和边缘情况测试我们的代码。

在更复杂的用例中，通常是更大的项目，手动进行依赖项注入根本无法扩展，并且会带来全新的复杂性。我们可以利用依赖注入容器的强大功能来解决这个问题。宽松地说，依赖项注入容器包含依赖项以及创建这些依赖项的逻辑。你向容器请求服务的新实例，它会解析依赖关系，构造对象并将其返回。

有许多 Javascript 依赖注入容器库。我个人最喜欢的是 TypeDI 和 InversifyJS。以下示例演示了 Typedi 与 JavaScript 的基本用法。

1
2
3
4
5
6
7
8
9
10
11
12
13

import { Container } from "typedi";

class ExampleClass {
    print() {
        console.log("I am alive!");
    }
}

/** 从 TypeDI 请求 ExampleClass 的实例。 */
const classInstance = Container.get(ExampleClass);

/** 我们收到了一个 ExampleClass 实例并准备好使用它。 */
classInstance.print();

依赖注入技术跨越了不同的编程语言。作为一般经验法则，依赖注入可以使用允许将函数和对象作为参数传递的语言来完成。一些流行的 HTTP 框架（例如 NestJs 和 FastAPI）带有内置的依赖注入系统。

JavaScript 类是其原型继承系统的语法糖。 ES6 中引入的类提供了一种清晰且结构化的方式来定义对象并使用 JavaScript 中的继承，使代码更具可读性和组织性。

定义一个类

你可以使用 class 关键字定义一个类。

例子：

1
2
3
4
5
6
7
8
9
10
11
12
13

class Person {
    constructor(name, age) {
        this.name = name;
        this.age = age;
    }

    greet() {
        console.log(`我的名字是： ${this.name}，我的年龄是：${this.age}`);
    }
}

const person1 = new Person("webape", 25);
person1.greet(); // 我的名字是：webape，我的年龄是：25

类的主要特点

构造函数方法：

构造函数是初始化新对象的特殊方法。当创建该类的新实例时，它会被自动调用。

例子：

1
2
3
4
5
6
7
8

class Car {
    constructor(brand) {
        this.brand = brand;
    }
}

const myCar = new Car("宝马");
console.log(myCar.brand); // 宝马

方法：

在类中定义的函数称为方法。

例子：

1
2
3
4
5
6
7
8

class Animal {
    sound() {
        console.log("这是测试信息");
    }
}

const dog = new Animal();
dog.sound(); // 这是测试信息

静态方法：

使用 static 关键字定义的方法属于类本身，而不是类的实例。

例子：

1
2
3
4
5
6
7

class MathUtils {
    static add(a, b) {
        return a + b;
    }
}

console.log(MathUtils.add(3, 5)); // 8

Getters 和 Setters：

访问和修改属性的特殊方法。

例子：

1
2
3
4
5
6
7
8
9
10
11
12
13

class Rectangle {
    constructor(width, height) {
        this.width = width;
        this.height = height;
    }

    get area() {
        return this.width * this.height;
    }
}

const rect = new Rectangle(10, 5);
console.log(rect.area); // 50

类中的继承

继承允许一个类使用 extends 关键字从另一个类获取属性和方法。

例子：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

class Animal {
    constructor(name) {
        this.name = name;
    }

    speak() {
        console.log(`${this.name} 叫`);
    }
}

class Dog extends Animal {
    speak() {
        console.log(`${this.name} 吠.`);
    }
}

const dog = new Dog("Rex");
dog.speak(); // Rex 吠.

私有字段和方法

ES2022 中引入的私有字段和方法以 # 开头，不能在类外部访问。

例子：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

class BankAccount {
    #balance;

    constructor(initialBalance) {
        this.#balance = initialBalance;
    }

    deposit(amount) {
        this.#balance += amount;
        console.log(`存入: ${amount}`);
    }

    getBalance() {
        return this.#balance;
    }
}

const account = new BankAccount(100);
account.deposit(50); // 存入: 50
console.log(account.getBalance()); // 150
// console.log(account.#balance); // Error: Private field '#balance' must be declared in an enclosing class

类表达式

类也可以定义为表达式并分配给变量。

例子：

1
2
3
4
5
6
7
8
9
10
11
12
13

const Rectangle = class {
    constructor(width, height) {
        this.width = width;
        this.height = height;
    }

    getArea() {
        return this.width * this.height;
    }
};

const rect = new Rectangle(10, 5);
console.log(rect.getArea()); // 50

与原型混合

虽然类是语法糖，但你仍然可以将它们与 JavaScript 基于原型的继承结合起来。

例子：

1
2
3
4
5
6
7

class Person {}
Person.prototype.sayHello = function () {
    console.log("Hello!");
};

const person = new Person();
person.sayHello(); // Hello!

类的最佳实践

• 封装：

使用私有字段来保护敏感数据。

• 可重复使用性：

利用继承在多个类之间重用代码。

• 避免过于复杂：

仅在必要时使用类。简单的对象或函数可能足以完成小任务。

• 一致性：

遵循方法和属性的命名约定以提高可读性。

总结

JavaScript 类提供了一种干净有效的方法来管理 JavaScript 中的面向对象编程。凭借继承、静态方法、私有字段和封装等功能，它们提供了强大的工具来构建和管理代码，从而更轻松地构建可扩展和可维护的应用程序。

多年来，JavaScript 经历了巨大的发展，使开发人员能够构建更强大、更高效、更用户友好的 Web 应用程序。随着新技术的出现，JavaScript 被推向极限，释放出曾经难以想象的功能。在本博客中，我们将探索 JavaScript 中一些最令人兴奋的新技术，并提供代码示例来帮助你入门。

Deno：现代 JavaScript 运行时

Deno 是 JavaScript 和 TypeScript 的新运行时，由 Node.js 的原始创建者 Ryan Dahl 构建。Deno 旨在通过专注于安全性、简单性和现代功能（如开箱即用的 TypeScript 支持）来解决 Node 的一些缺点。

主要特点：

• 安全性：Deno 默认是沙盒化的，这意味着它需要明确的权限才能访问文件系统或网络。
• TypeScript 支持：TypeScript 原生支持，无需任何额外配置。
• 简化的模块系统：Deno 使用 URL 加载模块，无需使用 npm 等包管理器。

示例：

Deno 中的简单 HTTP 服务器

1
2
3
4
5
6
7
8
9

// 引入http服务module
import { serve } from "https://deno.land/std/http/server.ts";

const handler = (req: Request): Response => {
    return new Response("Hello from Deno!", { status: 200 });
};

console.log("Server running on http://localhost:8000");
await serve(handler, { port: 8000 });

TypeScript：使用静态类型增强 JavaScript

虽然 TypeScript 已经存在了一段时间，但它在开发人员中的受欢迎程度仍在不断提高。TypeScript 提供静态类型，有助于在开发过程中捕获错误，从而产生更易于维护和可扩展的代码。

主要特点：

• 早期错误检测：TypeScript 有助于在编译时捕获与类型相关的错误。
• 更好的开发人员体验：现代 IDE 中改进的自动完成、文档和重构工具。

示例：

具有函数类型的 TypeScript

1
2
3
4
5
6
7

// 具有类型参数和返回类型的函数
function greet(name: string): string {
    return `Hello, ${name}!`;
}

// 如果我们尝试传递非字符串参数，TypeScript 将显示错误
console.log(greet("JavaScript"));

WebAssembly (Wasm)：在浏览器中运行高性能代码

WebAssembly 是一种低级二进制格式，允许开发人员以接近原生的速度直接在浏览器中运行 C、C++和 Rust 等语言的代码。它非常适合性能至关重要的应用程序，如游戏、图像/视频编辑或科学模拟。

主要特点：

• 接近原生的性能：对于性能要求高的任务，WebAssembly 可以比 JavaScript 更快地运行代码。
• 跨平台：所有现代浏览器都支持 WebAssembly，确保兼容性。

示例：

在 JavaScript 中使用 WebAssembly

1
2
3
4
5
6
7
8
9
10

// 加载WebAssembly
const goWasm = fetch("example.wasm").then((response) => response.arrayBuffer());

// 初始化 WebAssembly 实例
goWasm
    .then((bytes) => WebAssembly.instantiate(bytes))
    .then((results) => {
        const { add } = results.instance.exports;
        console.log(add(2, 3)); // 输出：5（假设 add 函数从 WASM 导出）
    });

Svelte：革命性的前端框架

Svelte 是下一代框架，它将繁重的 UI 更新工作转移到编译时，生成最少且高度优化的 JavaScript 代码。与 React 或 Vue 等其他框架不同，Svelte 不使用虚拟 DOM，因此速度极快且轻量级。

主要特点：

• 无虚拟 DOM：Svelte 将组件编译为直接操作 DOM 的高效命令式代码。
• 更小的包大小：由于采用基于编译器的方法，与其他框架相比，Svelte 生成的包大小要小得多。

示例：

Svelte 计数器组件

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

<script>
  let count = 0;

  function increment() {
    count += 1;
  }

  function decrement() {
    count -= 1;
  }
</script>

<button on:click={decrement}>-</button>
<span>{count}</span>
<button on:click={increment}>+</button>

每当计数发生变化时，此 Svelte 组件都会自动更新 DOM，并且 Svelte 会将其编译为针对浏览器优化的 JavaScript。

React 服务器组件：优化性能

React 服务器组件 (RSC) 是一项实验性功能，允许开发人员在服务器而不是客户端上渲染组件，从而提高大型应用程序的性能。

主要功能：

• 减少 JavaScript 包：通过在服务器端渲染组件，React 服务器组件减少了发送到浏览器的 JavaScript 数量。
• 更快的初始加载：服务器渲染的组件可缩短初始加载时间，从而带来更好的用户体验。

示例：

React 中的服务器组件

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

import { Suspense } from "react";

// 模拟从 API 获取数据
const fetchData = () =>
    new Promise((resolve) =>
        setTimeout(() => resolve("Hello from Server"), 2000)
    );

function ServerComponent() {
    const data = fetchData();
    return <div>{data}</div>;
}

export default function App() {
    return (
        <Suspense fallback={<div>Loading...</div>}>
            <ServerComponent />
        </Suspense>
    );
}

在这个例子中，React Server Components 与 Suspense 组件一起使用来异步处理数据提取，通过减少客户端的负载来提高应用程序的性能。

TensorFlow.js：JavaScript 中的机器学习

TesnorFlow.js 将机器学习引入 JavaScript，允许你直接在浏览器或 Node.js 上训练和运行模型。它是构建智能 Web 应用程序的强大工具。

主要特点：

• 在浏览器中运行模型：TensorFlow.js 允许你直接在浏览器中运行机器学习模型。
• 实时预测：非常适合实时应用，例如图像识别或情绪分析。

示例：

将预训练模型与 TensorFlow.js 结合使用

1
2
3
4
5
6
7
8
9
10

import * as tf from "@tensorflow/tfjs";

async function loadModel() {
    const model = await tf.loadLayersModel("https://example.com/model.json");
    const inputTensor = tf.tensor([1, 2, 3, 4]);
    const prediction = model.predict(inputTensor);
    prediction.print();
}

loadModel();

在这个例子中，我们加载一个预先训练的 TensorFlow 模型并使用它在浏览器中进行预测。

总结

JavaScript 不断发展，新技术和工具为开发人员开辟了令人兴奋的可能性。从 Deno 的现代运行时和 TypeScript 的静态类型到 WebAssembly 和 TensorFlow.js 提供的性能增强，JavaScript 的未来前景一片光明。

无论你是想提高性能、使用机器学习构建更智能的应用程序，还是简化前端工作流程，这些新工具和技术都将帮助你保持领先地位。

随着 JavaScript 生态系统的发展，探索这些新兴技术并在项目中进行试验非常重要。你对这些创新的了解和实施越多，你就越有能力构建下一代 Web 应用程序。

这里我给大家重点介绍一下使用 docker 来安装，还有一些个性化的配置，以及邮件通知的配置方法。

安装

首先拉取 verdaccio 的镜像：

1

docker pull verdaccio/verdaccio

利用 docker-compose.yml 来启动容器：

1
2
3
4
5
6
7
8
9
10
11
12
13

version: "3"
services:
    verdaccio:
        image: verdaccio/verdaccio:latest
        container_name: npm-verdaccio
        restart: always
        ports:
            - 4873:4873
        volumes:
            - ./data/verdaccio/conf:/verdaccio/conf
            - ./data/verdaccio/storage:/verdaccio/storage
            - ./data/verdaccio/plugins:/verdaccio/plugins
        tty: true

在上面的配置中，我们将环境配置、库文件、插件目录都挂载到了本地当前对应的目录中，方便后面修改和数据的持久化。

运行启动容器：

1

docker-compose up -d

之后，会看到挂载的目录会生成对应的文件，下面我们来修改配置文件：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24

# 上游npm包获取地址
uplinks:
    npmjs:
        url: https://registry.npm.taobao.org

# 包存储地址，这里需要配置当前的conf的上一层，否则会在当前conf目录下新建storage目录
storage: ../storage

# 一些自定义的web配置信息
web:
    enable: true
    title: npm私有库
    logo: /verdaccio/conf/logo.svg
    primary_color: "#de0000"
    favicon: /verdaccio/conf/favicon.ico
    pkgManagers:
        - pnpm
        - npm
    showInfo: false
    showSettings: false
    showThemeSwitch: false
    showFooter: false
    scriptsBodyAfter:
        - "<style></style>"

内网

如果你的 verdaccio 是搭建在内网的，还需要将外网的第三方包下载安装转移到内网。

这个工作首先需要在可以连接互联网的设备上同样使用 docker 安装 verdaccio 环境。

安装成功后，默认会在本地启一个 4873 的 http 服务。

本地还要安装 node 环境，通过 node 的 npm init 创建本地项目，通过当前项目的根目录文件 .npmrc，如果没有可自行创建，内容为：

1

registry=http://localhost:4873

这样，在本地安装安装的项目，将会从私有平台 4873 上下载获取第三方包，verdaccio 通过其设置的上游链接，去互联网上下载后，会缓存放置在 storage 目录中。

这样操作之后，在 verdaccio 的 storage 目录中就会存在我们需要的第三方包，我们可以将其转移到内网环境中。

1

sudo tar --exclude=storage/@sg --exclude=storage/@wgl --exclude=storage/.verdaccio-db.json -zcvf storage.tar storage

上面的压缩命令，我们排除了本地测试的自定义包，和 verdaccio 的版本数据文件，是为了覆盖时不要把内网 verdaccio 里的私有数据覆盖了，只允许覆盖第三方包。

解压覆盖到内网 verdaccio 的 storage 目录后，重启内网的 docker 容器即可。

通知

verdaccio 给我们提供了 publish 的通知功能，当有新包被推送时，可以及时通知相关引用使用者，下面是一个比较好的通知配置：

1
2
3
4
5

notify:
    method: POST
    headers: [{ "Content-Type": "application/json" }]
    endpoint: http://172.17.0.1:5000/send_email
    content: '{"subject":"{{ publishedPackage }}已推送","sendMail":"`{{#each versions}} {\"enable\":\"{{ sendMail.enable }}\",\"msg\":\"{{sendMail.msg}}\",\"to\":\"{{sendMail.to}}\"}{{/each}}`","message":"User：{{ publisher.name }}<br/>Package：{{ publishedPackage }}`{{#each versions}} <br/> Author：{{author.name}}<br/>Email：{{author.email}}<br/>Integrity：{{dist.integrity}}<br/>Tarball：{{dist.tarball}}{{/each}}`","notify":true,"message_format":"text"}'

这里的 endpoint 是接口地址，我们可以使用 express 框架来建立一个发送邮件的服务。

index.js 的服务文件内容如下：

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
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91

const express = require("express");
const nodemailer = require("nodemailer");
const bodyParser = require("body-parser");

// 如果smtp服务器是ip，会报证书的一些问题，这里可以设置为0
// process.env.NODE_TLS_REJECT_UNAUTHORIZED = "0";

const app = express();
const PORT = 5000;

// 创建 application/json 解析
app.use(bodyParser.json());

// 创建 application/x-www-form-urlencoded 解析
app.use(bodyParser.urlencoded({ extended: true }));

// 格式化接收内容
const baseFormat = (obj) => {
    for (let key in obj) {
        if (typeof obj[key] === "string") {
            obj[key] = obj[key].replaceAll("`", "").trim();
        }
    }
    return obj;
};

// 邮件配置
const emailConfig = {
    defaultTo: ["webape@qq.com"],
    from: "webape@qq.com",
    host: "smtp.qq.com",
    port: 465,
    user: "webape@qq.com",
    pass: "******",
};

// 设置路由
app.post("/send_email", (req, res) => {
    const body = baseFormat(req.body);
    const { sendMail, subject, message } = body;
    console.log("body", body);

    const sendMailObj = baseFormat(JSON.parse(sendMail));

    if (["true", ""].indexOf(sendMailObj.enable) > -1) {
        const defaultTo = emailConfig.defaultTo;
        // 设置邮件内容
        const mailOptions = {
            from: emailConfig.from,
            to: sendMailObj.to
                ? sendMailObj.to.split(",").map((item) => item.trim())
                : defaultTo,
            subject: subject,
            html:
                message.replaceAll("`", "") +
                (sendMailObj.msg
                    ? '<div style="background-color:red;color:#fff">' +
                      sendMailObj.msg +
                      "</div>"
                    : ""),
        };

        // 设置邮件发送配置
        const transporter = nodemailer.createTransport({
            host: emailConfig.host,
            port: emailConfig.port,
            auth: {
                user: emailConfig.user,
                pass: emailConfig.pass,
            },
        });

        // 发送邮件
        transporter.sendMail(mailOptions, (error, info) => {
            if (error) {
                console.log(error);
                res.status(500).send("邮件发送失败");
            } else {
                console.log("Email sent: " + info.response);
                res.send("邮件发送成功");
            }
        });
    } else {
        res.send("无需发送邮件");
    }
});

// 启动服务
app.listen(PORT, "172.17.0.1", () => {
    console.log(`Server is running on http://172.17.0.1:${PORT}`);
});

可以看到上面的服务是绑定在 ip:172.17.0.1 上的，这个是 docker 的网关地址，使 docker 内部可以访问外部宿主机的 http 服务。

我们可以在和 verdaccio 同一服务器中后台启动该服务：

1
2
3
4

# 在后台执行程序
nohup node index.js &
# 将该进程与当前 shell 分离，避免关闭当前 shell 连接后进程关闭
disown

由于 verdaccio 的通知是读取的项目的 package.json 的数据在我们的项目的 package.json 文件中，我们可以添加以下内容来配合邮件通知的发送行为和内容：

1
2
3
4
5

"sendMail":{
    "enable":true,
    "msg":"提示信息",
    "to":["webape@qq.com"]
},

配置说明:

• 当 package.json 中没有定义 sendMail 对象时，默认会向内置的默认用户发送通知邮件。
• 当 sendMail.enable 为 true 时，表示发送邮件，false 时表示不发送邮件，默认为 true。
• 用户可以通过 sendMail.msg 来在邮件中指定提示信息，例如，“此版本为测试版本，请勿使用”。
• 用户可以通过指定 to 来限定邮件的发送范围，为空数组时，默认会向内置的默认用户发送。

注意

1. 私有库绑定域名后，用什么域名第一次访问，则默认就是哪个域名。我们一般还会配合绑定域名使用成功一个可以对外提供服务的站点，需要注意的时，绑定域名后，第一次访问后，再次访问需要使用该域名才能访问。但是我们可以使用环境变量 VERDACCIO_PUBLIC_URL 来指定域名地址。

2. 私有库需要 npm adduser 添加用户后输入邮箱后半天没有反应，应该是 htpasswd 文件写权限问题。可以给其 775 的权限。

3. 使用 pnpm 时的缓存问题。因为 pnpm 本身也会创建本地的存储库，当想在外网缓存外部库转到内网中时，.nprc 配置 registry=[地址]，执行 pnpm store prune，pnpm store path 查看缓存库位置删除，删除 node_modules 和 pnpm-lock.yaml，后执行 pnpm install。

这就是本文的用武之地 - 让我们看看如何在现实生活中使用网络。涵盖使用 docker-compose 进行网络管理的基础知识、如何将网络用于多存储库/多 docker-compose 项目、微服务以及如何利用它们来测试不同的问题场景，如有限的网络吞吐量、丢失的数据包等。

让我们从一些非常基本的东西开始，如果你已经熟悉 docker-compose，你可能想要跳过下面的一些部分。

Docker-compose 基础知识

使用 docker-compose 开放端口

你可能想要做的第一件事就是简单地开放一个端口：

1
2
3
4
5
6

version: "3.6"
services:
    phpmyadmin:
        image: phpmyadmin
        ports:
            - 8080:80

对于刚接触 Docker 的人来说，暴露意味着向外界开放一个端口。你可以通过 IP 限制它，但默认情况下，这意味着每个人都可以访问它。端口暴露在你的网络接口上，而不是容器接口上。在上面的例子中，你可以在端口 8080（localhost:8080）上访问 PhpMyAdmin 容器的端口 80。

如你所见，这非常简单，你只需传递要暴露的端口，遵循与 docker CLI 中相同的想法，即 localPort:containerPort。添加本地端口的监听接口显然也是可能的：

1
2
3
4
5
6

version: "3.6"
services:
    phpmyadmin:
        image: phpmyadmin
        ports:
            - 127.0.0.1:8080:80

当你不想将某些服务暴露给外部时，这可能会很方便。

在 docker-compose 文件中连接容器

正如 docker 网络文章中提到的，docker-compose 默认创建一个网络。你可以通过创建一个非常简单的 docker-compose 配置文件轻松检查这一点：

1
2
3
4
5
6
7
8
9
10
11
12
13

version: "3.6"
services:
    db:
        image: mariadb:10.3
        environment:
            MYSQL_ROOT_PASSWORD: secret
    phpmyadmin:
        image: phpmyadmin
        restart: always
        ports:
            - 8080:80
        environment:
            - PMA_HOSTS=db

让我们运行它并看看会发生什么：

1
2
3
4

docker-compose up -d
Creating network "myexampleproject_default" with the default driver
Pulling db (mariadb:10.3)...
(...)

你可能在第一行就注意到了，为该项目创建了一个名为 myexampleproject_default 的默认网络。它在 docker CLI 中也可见：

1
2
3
4
5
6

docker network ls
NETWORK ID     NAME                      DRIVER    SCOPE
a9979ee462fb   bridge                    bridge    local
d8b7eab3d297   myexampleproject_default  bridge    local
17c76d995120   host                      host      local
8224bb92dd9b   none                      null      local

此 docker-compose.yaml 中的所有容器都与此网络连接。这意味着，它们可以轻松相互通信，并且主机可以通过名称解析：

1
2
3

docker-compose exec phpmyadmin bash
root@b362dbe238ac:/var/www/html# getent hosts db
172.18.0.3      db

Docker-compose 网络和面向微服务的架构

在编写面向微服务的项目时，能够在开发环境中模拟至少一部分生产方法非常方便。这包括分离和连接容器组，以及测试网络延迟问题、连接问题等。

将容器划分为单独的网络

但是，如果你不希望容器能够相互通信怎么办？也许你正在编写一个系统，其中一个部分应该对另一个部分隐藏？实际上，系统的这些部分是使用 AWS VPC 或类似机制分离的，但在开发机器上测试它会很好，对吗？

没问题，让我们看看这个配置文件：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

version: "3.6"
services:
    service1-db:
        image: mariadb:10.3
        environment:
            MYSQL_ROOT_PASSWORD: secret
    service1-web:
        image: nginxdemos/hello
        ports:
            - 80:80
    service2-db:
        image: mariadb:10.3
        environment:
            MYSQL_ROOT_PASSWORD: secret
    service2-web:
        image: nginxdemos/hello
        ports:
            - 81:80

如你所见，我们有两个独立的服务，每个服务都包含一个 web 和 db 容器。我们希望仅从其 web 服务访问 db，因此 service2-web 无法直接访问 service1-db。

现在让我们检查一下它是如何工作的：

1
2
3
4
5

docker-compose exec service1-web ash
/ # getent hosts service1-db
172.19.0.2        service1-db  service1-db
/ # getent hosts service2-db
172.19.0.5        service2-db  service2-db

不幸的是，这些服务并没有按照我们所希望的方式分开。

不用担心，只需添加非常简单的更改即可实现：

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

version: "3.6"
services:
    service1-db:
        image: mariadb:10.3
        environment:
            MYSQL_ROOT_PASSWORD: secret
        networks:
            - service1
    service1-web:
        image: nginxdemos/hello
        ports:
            - 80:80
        networks:
            - service1
            - web
    service2-db:
        image: mariadb:10.3
        environment:
            MYSQL_ROOT_PASSWORD: secret
        networks:
            - service2
    service2-web:
        image: nginxdemos/hello
        ports:
            - 81:80
        networks:
            - service2
            - web

networks:
    service1:
    service2:
    web:

我们引入了三个不同的网络（第 31-33 行）——每个服务一个，Web 服务共享一个。为什么我们需要第三个网络？这是允许 service1-web 和 service2-web 之间通信所必需的。我们还为每个服务添加了网络配置（第 7-8、13-15、20-21、26-28 行）。

现在让我们检查一下 service1-web 如何解析名称：

1
2
3
4
5
6

dco exec service1-web ash
/ # getent hosts service2-web
172.22.0.2        service2-web  service2-web
/ # getent hosts service2-db
/ # getent hosts service1-db
172.20.0.3        service1-db  service1-db

如你所见，我们可以通过引入网络并仅将选定的容器连接在一起，轻松实现容器之间的分离。

在多个 docker-compose 文件之间连接容器

通常，上述项目会拆分到 git 存储库之间，或者至少拆分到 docker-compose.yaml 文件之间。因此，开发人员可以单独启动每个服务。我们如何连接这些服务？让我们来看看。

假设我们决定将之前使用的项目拆分为两个单独的存储库。一个用于 service1，另一个用于 service2。这意味着我们有两个 docker-compose.yaml 文件：

1
2
3
4
5
6
7
8
9
10
11

#service1/docker-compose.yaml
version: "3.6"
services:
    service1-db:
        image: mariadb:10.3
        environment:
            MYSQL_ROOT_PASSWORD: secret
    service1-web:
        image: nginxdemos/hello
        ports:
            - 80:80

1
2
3
4
5
6
7
8
9
10
11

#service2/docker-compose.yaml
version: "3.6"
services:
    service2-db:
        image: mariadb:10.3
        environment:
            MYSQL_ROOT_PASSWORD: secret
    service2-web:
        image: nginxdemos/hello
        ports:
            - 81:80

如果我们启动这两个配置，service1-web 和 service2-web 将无法相互通信，因为它们将被添加到两个不同的网络：每个 docker-compose.yaml 文件默认创建自己的网络。

1
2
3
4

docker-compose up -d
Creating network "service1_default" with the default driver
Creating service1_service1-web_1 ... done
Creating service1_service1-db_1  ... done

让我们首先重新添加 service1 的网络配置并进行一些小的修改：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

version: "3.6"
services:
    service1-db:
        image: mariadb:10.3
        environment:
            MYSQL_ROOT_PASSWORD: secret
        networks:
            - service1
    service1-web:
        image: nginxdemos/hello
        ports:
            - 80:80
        networks:
            - service1
            - web

networks:
    service1:
    web:
        name: shared-web

我们在第 20 行添加了一些配置。在本例中，我想为我的 Web 网络指定一个固定名称。默认情况下，名称由 PROJECTNAME_NETWORKNAME 组成，项目名称默认为目录名称。我们所在的目录可能对不同的开发人员有不同的名称，因此安全的选择是强制使用这个名称。

现在，对于 service2，我们需要采取一些不同的行动：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

version: "3.6"
services:
    service2-db:
        image: mariadb:10.3
        environment:
            MYSQL_ROOT_PASSWORD: secret
        networks:
            - service2
    service2-web:
        image: nginxdemos/hello
        ports:
            - 81:80
        networks:
            - service2
            - web

networks:
    service2:
    web:
        external: true #needs to be created by other file
        name: shared-web

如你在第 20-21 行中看到的，在本例中我们配置了一个外部网络。这意味着，docker-compose 不会尝试创建它，如果不可用，它将失败。但是一旦可用，它就会重新使用它。

就是这样。Service1 和 2 Web 容器可以相互访问，但它们的数据库是分开的。两者也可以在单独的存储库中开发。

作为上述内容的扩展，你可以查看容器别名以使路由更容易，或者内部路由以进一步隔离服务。

混沌测试

如你所知，当发生中断时，问题不是是否会发生，而是何时发生。最好为这种情况做好准备，并测试系统在出现不同问题时的行为。如果某些数据包丢失或延迟增加，会发生什么？也许服务离线？

混沌测试就是为此做好准备。

我强烈建议你查看 Pumba，这是一个允许你暂停服务、终止服务的项目，但也会添加网络延迟、丢失、损坏等。

完整描述 pumba 需要大量时间，所以让我们只看一个非常简单的网络延迟模拟。

让我们启动一个 ping 8.8.8.8 的容器：

1

docker run -it --rm --name demo-ping alpine ping 8.8.8.8

现在，查看输出，在单独的控制台选项卡中运行以下命令：

1

pumba netem --duration 5s --tc-image gaiadocker/iproute2 delay --time 3000 demo-ping

就这样！

你还可以在几分钟内实施其他混沌测试。

总结

Docker 和 docker-compose 是模拟不同网络配置的绝佳工具，无需设置服务器或虚拟机。命令和配置非常容易使用。结合 Pumba 等外部工具，你还可以测试问题情况并为中断做好准备。

相关文章：

• Docker 网络详解 1
• Docker 网络详解 2

开放端口

让我们从基础开始。端口开放是 Docker 网络中最常用的东西，但你了解它的全部内容吗？

让我们看一个简单的命令，如下所示：

1

docker run -p 127.0.0.1:80:8080/tcp ubuntu bash

这是什么意思？好吧，可能有点棘手，但它的意思是：

在端口 80 上监听 127.0.0.1 上的 TCP 连接，并将流量转发到容器内的端口 8080。

如果我们稍微简化一下：

1

docker run -p 80:8080/tcp ubuntu bash

我们省略了 IP 部分，现在 Docker 将监听所有接口，因此可以从外部访问该服务。

我们可以进一步更改符号，然后运行：

1

docker run -p 80:8080/udp ubuntu bash

这将转发 udp 连接。另一个选项是 sctp，但它并未广泛用于与 Web 相关的东西。TCP 显然是最常见的，因此如果我们跳过 /protocol 部分 - 它将默认设置为 TCP。

如果我们只运行这个会发生什么：

1

docker run -p 8080 ubuntu bash

这会将 TCP 流量从随机选择的端口转发到容器中的端口 8080。等等？随机？！我怎么知道使用了哪个端口？

只需查看 docker ps - 有一列：

1
2
3
4
5

$ docker ps
CONTAINER ID        IMAGE               COMMAND                  CREATED             STATUS              PORTS                  NAMES
2f82dac833ae        mariadb:10.3        "docker-entrypoint.s…"   10 days ago         Up 9 hours          3306/tcp               project_db_1
86f00e7f41a2        phpmyadmin          "/docker-entrypoint.…"   10 days ago         Up 9 hours          0.0.0.0:8080->80/tcp   project_phpmyadmin_1
31ea70729fbf        redis:6             "docker-entrypoint.s…"   6 weeks ago         Up 9 hours          6379/tcp               project_redis_1

PORTS 列中包含你需要的所有信息，甚至更多。它还显示未转发的开放端口。此类端口无法从外部访问（docker 网络除外，但这会改变），但如果你想转发它，你可以获得此信息。

你还可以运行 docker port 来检查给定容器的映射：

1
2