TRY CODING FUN

我服务器用的Oneinstack配置的环境，但是无法远程连接数据库，排查了一下是由于防火墙开启，3306端口不通导致的

防火墙开启3306端口

Centos

1
2

iptables -I INPUT 4 -p tcp -m state --state NEW -m tcp --dport 3306 -j ACCEPT
service iptables save #保存iptables规则

Ubuntu/Debian

1
2

iptables -I INPUT 4 -p tcp -m state --state NEW -m tcp --dport 3306 -j ACCEPT
iptables-save > /etc/iptables.up.rules  #保存iptables规则

数据库授权

1
2
3
4

# mysql -uroot -p
MySQL [(none)]> grant all privileges on db_name.* to db_user@'%' identified by 'db_pass'; #授权语句，特别注意有分号
MySQL [(none)]> flush privileges;
MySQL [(none)]> exit; #退出数据库控制台，特别注意有分号

后记

参考文章 - 如何配置数据库远程连接

简易的 react table 组件

Github: simple-react-table

Antd 中的 Table 组件有固定头和固定列的功能，表格还有无限滚动，合并单元格。

我自己手写实现了一下其中的固定头和固定列。

运行效果

代码分析

表格的固定头固定列

Table 组件用了 position: sticky; 实现了固定头和固定列，可以看看简易下面的 demo，打开页面后用 F12 查看代码。

• Sticky Table Column and Header

这是固定列部分的代码，更多的代码可以去上面的 Github 项目中查看

其中 style.position = 'sticky'; 设置了当前列固定，style.zIndex = '2'; 设置层级，这样在滚动的时候，这一列可以覆盖在上方，

1
2
3
4
5

if (fixed === 'left') {
  style.left = index * 100 + 'px';
} else {
  style.right = (columns.length - 1 - index) * 100 + 'px';
}

这一段代码判断列是在左边还是右边，如果是在左边，就加 css 的 left 属性，然后宽度是可以自定义的。

问题

Jenkins 收到 Github Webhooks 消息之后我要执行 Shell 脚本，但是遇到了报错，如下：

1
2
3

...
cd: /: Not a directory
...

我的脚本如下

1
2

cd /root/testjenk
mkdir 456

网上查了一下没查到原因，问网友，恶魔旋律 提到可能是权限不足导致的，我搜了一下 Jenkins 提权方面资料。

解决

编辑 /etc/sysconfig/jenkins 文件

将原来的 jenkins 用户修改为 root 用户。 $JENKINS_USER="root"

执行文件夹提权命令

1
2
3

chown -R root:root /var/lib/jenkins
chown -R root:root /var/cache/jenkins
chown -R root:root /var/log/jenkins

重启 Jenkins

1
2

service jenkins restart
service jenkins status

然后再次提交 giuhub，查看日志，发现自动构建成功

简易的 npm 包依赖查看器

Github: simple-npm-dependency-viewer

代码如下

Mark 一下 输出环境变量的。写脚本的时候需要附加上去需要看一下当前环境变量。

将本地服务器上的文件传到远程服务器上

1

echo $PATH

如果你用过Maga 网盘，那你可能发现它的文件下载方式不是直接用浏览器下载，而是先在网页中下载，下载完成后才调起浏览器的下载，比较酷。

原理就是它用了 blob 进行文件的下载之后再输出出来。我朋友 ZJINH 写了一个网盘软件中就实现了这个功能，他在群里讨论这个功能的同时也分享了代码，我的友链中有他的博客地址，欢迎大家访问（还能白嫖到他网盘客户端的源码）。

运行效果

代码如下

实现

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

function download(url, progress, callback, error) {
  const xhr = new XMLHttpRequest();
  xhr.open('GET', url, true);
  xhr.abort();
  xhr.addEventListener(
    'progress',
    function (e) {
      if (e.lengthComputable) {
        progress && progress(e.total, e.loaded);
      }
    },
    false
  );
  xhr.responseType = 'blob';
  xhr.onload = () => {
    if (xhr.status === 200) {
      callback(xhr.response);
    }
  };
  xhr.onerror = (e) => {
    error && error(e);
  };
  xhr.send();
  return xhr;
}

代码很好看，这儿不多做分析，关键的地方是 xhr.responseType = 'blob'; 用 blob 的方式获取资源。

补充

他没有给出全部的代码，callback 返回的是一个 blob 对象，我这儿补充一下。让代码跑起来

1
2
3
4
5
6
7
8
9
10

function blobDownload(blob, fileName) {
  let a = document.createElement('a');
  a.style = 'display: none';
  document.body.appendChild(a);
  let url = window.URL.createObjectURL(blob);
  a.href = url;
  a.download = fileName;
  a.click();
  window.URL.revokeObjectURL(url);
}

运行

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

let url = 'https://files.itnote.me/Software/npp.7.8.5.Installer.exe';

download(
  url,
  (total, loaded) => {
    console.log('total, loaded', total, loaded);
  },
  (callback) => {
    console.log('callback', callback);
    blobDownload(callback, 'npp.7.8.5.Installer.exe');
  }
);

问题

安装 Jenkins 之后我要用 Jenkins 拉取 github 仓库，但是我碰到了个奇怪问题

就是以 git@github.com:mtrucc/ice-electron.git 这种格式拉取仓库，不选择凭据，或者凭据选择用户名密码，总是返回

1
2
3
4
5
6
7

无法连接仓库：Command "git ls-remote -h -- git@github.com:mtrucc/ice-electron.git HEAD" returned status code 128:
stdout:
stderr: git@github.com: Permission denied (publickey).
fatal: Could not read from remote repository.

Please make sure you have the correct access rights
and the repository exists.

过程

在此之前我自己已经添加过 ssh-keygen 到 github ssh 配置中了。

网上的解决方法也有不少，但都没用

比如执行 sudo su jenkins 切换到 jenkins 用户拉一遍仓库。

或者在 /home/jenkins 文件夹生成密钥后提权 chown jenkins:jenkins id_rsa id_rsa.pub

后来我又试验了一下将链接换成 https://github.com/mtrucc/ice-electron.git 就不存在上面的问题了。

我对比了一下命令行执行

1
2

git ls-remote -h -- git@github.com:mtrucc/ice-electron.git HEAD
git ls-remote -h -- https://github.com/mtrucc/ice-electron.git HEAD

这两个命令的返回结果其实是一致的，但是jenkins

但这样解决的话，我实在是非常别扭，找不到原因。

解决方式

后来我又执行 cat ~/.ssh/id_rsa 将私钥提取出来，然后在Jenkins中添加了 SSH Username with private key 类型的凭据，username填的root，key是将刚刚提取出来的key粘贴上去，就可以用 git@github.com:mtrucc/ice-electron.git 了。

或者 Repository URL 填写为 https 类型的也可以。

本文介绍了如何使用 Nginx 反向代理谷歌服务，并且替换其中的内容。

我对谷歌字体进行了反代操作，具体见这篇文章：Nginx 反向代理 Google Font、Ajax 和 Gravatar 头像

这儿记一下研究过程中碰到的问题。

Nginx 反向代理配置文件参考

在 Nginx 文件夹下创建 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
25
26
27
28
29
30

server {
  ...
  resolver 8.8.8.8;

  location /css {
    sub_filter                'fonts.gstatic.com' 'fonts.itnote.me';
    sub_filter_once           off;
    sub_filter_types          *;
    proxy_pass                $scheme://fonts.googleapis.com:$server_port;
    proxy_set_header          Host fonts.googleapis.com;
    proxy_set_header          Accept-Encoding '';
    proxy_set_header          X-Real-IP $remote_addr;
    proxy_set_header          X-Forwarded-For $proxy_add_x_forwarded_for;
    proxy_set_header          Upgrade $http_upgrade;
    proxy_set_header          Connection $connection_upgrade;
    client_max_body_size      1m;
    proxy_cache_key           $scheme$host$request_uri;
    proxy_cache               proxy_cache_zone_of_site_fonts.itnote.me;
    proxy_cache_valid         200 301 302 7d;
    proxy_cache_valid         any 7d;
    proxy_cache_min_uses      1;
    proxy_cache_methods       GET HEAD;
    proxy_cache_use_stale     error timeout invalid_header updating http_500 http_502 http_503 http_504;
    proxy_cache_revalidate    on;
    proxy_cache_lock          on;
    proxy_cache_lock_timeout  6s;
  }
  ...
}

遇见的问题

页面 502 错误

我网站是 itnote.me，页面上有个链接，代码是这样的

1

<a href="https://files.itnote.me/XXX/xxx.mp3" target="_blank">下载文件</a>

结果通过页面跳转打开这个链接的时候，竟然 403 错误，我直接复制链接在浏览器中打开却能正常访问。

百思不得其解之下，我查了一下，可能和防盗链（跨域）有关，去看了一下 nginx 的配置

Nginx 反向代理配置文件参考

在 Nginx 文件夹下创建 conf 文件，用于反代。

1
2
3
4
5
6

location ~ .*\.(wma|wmv|asf|mp3|mmf|zip|rar|jpg|gif|png|swf|flv|mp4)$ {
  valid_referers none blocked *.itnote.me files.itnote.me;
  if ($invalid_referer) {
      return 403;
  }
}

这段代码很有意思哈，虽然表明了 *.itnote.me files.itnote.me 是可以访问的，但是注意一下，没有表明 itnote.me 是可以访问的，这就造成了 a 标签元素打不开链接

很低级的错误。但挺有意思的，没想到 a 标签打开的页面再某些情况下也会触发防盗链（跨域）问题。

因为 IOS 下中文文件名需要 utf8 才能支持。

主要就是在响应头设置 content-disposition，主要遵循 RFC 5987 标准。

response.setHeader("content-disposition","attachment;filename\*=UTF-8''" + URLEncoder.encode(fileName,"UTF-8"));