一些关于前端、技术，和我的生活的文字

前端

技术

生活

关于我

进入NetlifyCMS

Spark1e的Github

前往Twitter

给spark1e发邮件

在博客中搜索……

安全配置服务器网络

- 删除空格行：

```
:g/^$/d
```

- 删除所有行首空格：

```
:%s/^\s*//g
```

- 删除所有行尾空格：

```
:%s/\s*$//g
```

Vim 删除空行、行首空格、行尾空格

随着全球IPv4资源的枯竭，VPS商家衍生了一种新的IPv6 only VPS，由于不占用商家的IPv4资源，因此可以压低价格。然而，VPS上面如果希望运行一些服务，那么势必需要IPv4的接入，我们可以通过Cloudflare的CDN让只有IPv4的用户访问，但如果机器需要访问如Github等，只有IPv4的网站该怎么办呢？一些大佬想到了使用Cloudflare的[Warp服务](https://1.1.1.1/)来实现，本文介绍自己在配置的成功方案。

## STEP 1. 安装Wireguard

> 执行`uname -a`查看内核，内核版本5+可以使用wireguard-tools, 否则请使用 [wireguard-go](https://github.com/WireGuard/wireguard-go)

确认内核版本后，如果选择升级至5+，请执行：

```bash
sudo apt -t $(lsb_release -sc)-backports install linux-image-$(dpkg --print-architecture) linux-headers-$(dpkg --print-architecture) --install-recommends -y
```

内核在5+后，执行下列命令，安装Wireguard：

```bash
sudo apt install net-tools resolvconf -y
sudo apt install wireguard-tools --no-install-recommends
# If can't find `wiregurad-tools`, execute this and retry
echo "deb http://deb.debian.org/debian $(lsb_release -sc)-backports main" | sudo tee /etc/apt/sources.list.d/backports.list
```

## STEP 2. 安装第三方工具wgcf

> [wgcf](https://github.com/ViRb3/wgcf) is an unofficial, cross-platform CLI for Cloudflare Warp

### wgcf 自动安装

执行命令，下载wgcf工具：

```bash
curl -fsSL git.io/wgcf.sh | sudo bash
```

### wgcf 手工安装

> 如果服务器起始状态就没有IPv4，那么访问git.io也是不可能的，我这里提供一个v2.2.10版本的文件给大家临时使用

```
wget -O /usr/local/bin/wgcf "https://cdn.arc-light.fun/pg2Edc/wgcf_2.2.10_linux_amd64"
chmod -x /usr/local/bin/wgcf
```

### 开始使用

完成后，首先进行注册：

```bash
wgcf register
```

过程中需要同意Cloudflare Warp协议，选择“Yes”，

成功生成后，再执行：

```bash
wgcf generate
```

执行成功，会在当前目录生成一个`wgcf.conf`，我们将它复制到Wireguard目录下：

```bash
cp wgcf.conf /etc/wireguard/wgcf.conf
```

## STEP 3. 修改wgcf.conf

编辑`wgcf.conf`文件，使其与下面的例子相似：

    [Interface]
    PrivateKey = YOUR_GENERATED_KEY_HERE
    Address = *.*.*.*/32
    #Address = *:*:*:*:*:*:*:*/128
    DNS = 2001:4860:4860::8888
    MTU = 1280
    PostUp = ip -6 rule add from [ipv6 addr] lookup main
    PostDown = ip -6 rule delete from [ipv6 addr] lookup main
    [Peer]
    PublicKey = YOUR_GENERATED_KEY_HERE
    AllowedIPs = 0.0.0.0/0
    #AllowedIPs = ::/0
    Endpoint = [2606:4700:d0::a29f:c001]:2408

> 2001:4860:4860::8888 可以替换为 Google DNS 或 Cloudflare 的IPv6 DNS服务器。

## STEP 4. 利用Crontab让Wireguard与ssh服务按顺序启动

如果启用了Wireguard的自启动，ssh服务就不能正常开启，因此，使用crontab，增加重启时自动启动Wireguard和SSH

```bash
crontab -e
```

增加以下配置：

    @reboot mkdir -p -m0755 /run/sshd
    @reboot systemctl start wg-quick@wgcf # wgcf是配置文件的名称
    @reboot /etc/init.d/ssh start

## Finish

重启，之后我们可以测试一下能否ping通Github，如果能ping通，意味着Warp配置成功，服务器能够正常访问IPv4 only的地址。

使用Cloudflare Warp为IPv6 only的机器添加IPv4

```
> diskpart
> list vol
> sel vol 1
# 分配盘符
> assign letter=G
# 修复引导
> cd /d G:\EFI\Microsoft\Boot\
> bcdboot C:\Windows /l zh-cn /s G: /f ALL
# 退出重启电脑
> exit
```

windows10 UEFI引导修复

### nginx.service: Failed to read PID from file /run/nginx.pid: Invalid argument

已解决。遇到此问题是使用DigitalOcean的Ubuntu 18.04 Droplet,检查nginx运行状态 `service nginx status` 输出标题的错误, 参考[StackOverflow](https://stackoverflow.com/questions/42078674/nginx-service-failed-to-read-pid-from-file-run-nginx-pid-invalid-argument)解决，步骤(以下均使用root账户)：

- `mkdir /etc/systemd/system/nginx.service.d`
- `printf "[Service]\nExecStartPost=/bin/sleep 0.1\n" > /etc/systemd/system/nginx.service.d/override.conf`
- `systemctl daemon-reload`
- `systemctl restart nginx`

Nginx故障排除

> 跨域,一个说腻了的话题,今天遇到一个新的情况,单独拎出来说说;

## 情景再现

b.site有一个ajax请求a.site的某一个地址,post请求+自定义header(假设,header头为`X-Application-Token`),ok,妥妥的跨域,那么自然加上以下代码(以express.js为例):

```javascript
app.options('*', (req, res, next) => {
    res.header("Access-Control-Allow-Origin", "*")
    res.header("Access-Control-Allow-Headers", "X-Application-Token")
    // call the path service
})
app.post('/a-cors-request-path', (req, res) => {
    res.header("Access-Control-Allow-Origin", "*")
    res.header("Access-Control-Allow-Headers", "X-Application-Token")
    // call the path service
})
```

反复确认了相关配置已经设置好,但浏览器仍报错:

> Access to XMLHttpRequest at 'a.site' from origin 'b.site' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: It does not have HTTP ok status.

## 排查

1. 返回说"not have HTTP ok status"

那么说明option请求没有返回200,打开postman发送请求尝试看看,成功返回...

1. 自己启动一个Express Server,尝试复现

已经能够确认,option不通过和状态码有关,那么为什么浏览器内非200,而postman发送option请求正常返回200 ?

打印headers,一口老血...

![cors-with-verify-header](https://cdn.arc-light.fun/BeGtIi/cors-with-verify-header.png)

## 结论

除了常见的跨域问题,也要考虑实现时的业务逻辑,比如本情境下,错误的在option中也调用相关服务验证了`X-Application-Token`,而option请求在浏览器内是不会携带额外的header信息的,这才导致了浏览器内 _not HTTP ok status_,而postman正常的原因.

## 额外

后来利用老的Microsoft Edge浏览器(Edge legacy)调试,发现会清楚的返回400 Bad Request,所以如果option请求能够返回精确的HTTP code,也会更利于开发人员排查问题,后续修改后完美解决.

跨域这个问题还得单独揪出来说一下

## 现象

```bash
sed: -e expression #1, char 24: unknown command: `.'
```

切换用户时（此用户是原来WSL2的默认账户），shell报以上错误。

考虑到是切换用户才导致的，因此怀疑`.zshrc (or .bashrc)`内有命令错误

## 移除未使用的命令

使用debug模式，尝试读取并执行.zshrc

> 如果不能确定当前.zshrc配置，请清理后再执行source！

```bash
source ~/.zshrc -x
```

果然，发现了新的错误：

```bash
compinit:501: no such file or directory: /usr/share/zsh/vendor-completions/_docker
```

这是由于复制时WSL2和WSL1在处理docker的方案上不同，导致自动补全的链接出现问题，移除WSL1容器内的docker自动补全

```bash
cd /usr/share/zsh/vendor-completions
# remove your deprecated auto-completions
```

再执行source，问题解决！

解决切换用户提示的sed报错

## 依然先说结论

UWP应用是一类特殊的应用，Windows会限制其在使用代理时使用127.0.0.1的回环地址，因此需要使用第三方工具开启回环代理或者修改注册表，考虑到修改注册表危险性较高且不便于操作，这里转载来自[Qv2ray](https://qv2ray.net/getting-started/step4.html#%E4%BD%BF%E7%94%A8%E7%B3%BB%E7%BB%9F%E4%BB%A3%E7%90%86)的解决方案。

## EnableLoopback

这是一个来自Fiddler的项目，用来调试UWP应用，也可以为我们简单的开启本地代理。

> Qv2ray给出的下载地址：[链接](https://qv2ray.net/EnableLoopback.zip)
> 上传到本站的地址：[链接](https://cdn.arc-light.fun/E2itoL/EnableLoopback.exe)

打开后在左侧的应用名称找到Microsoft Todo（或者其他的UWP应用名），勾选并点击"Save Changes"，即可开启127.0.0.1的本地代理权限。

![使用工具打开UWP的proxy](https://cdn.arc-light.fun/PSvgEE/enable-uwp-proxy.png)

有关于UWP应用联网的问题

## 如果你还没有被自动更新

你可以选择Fast Cycle或者使用Beta版尝鲜新Edge，这样的Edge版本不需要进行额外的操作，即可与旧版本兼容并存。

## 如果你已经通过Windows Update自动更新

那么就需要通过注册表修改使其并存。

首先找到注册表的这个位置：

`HKEY_LOCAL_MACHINE\SOFTWARE\Policies\Microsoft`

在左侧的`Microsoft`项右键，选择“新建” > “项”，命名为EdgeUpdate。

在右侧窗口，右键，新建DWORD（32位）值，命名为`Allowsxs`，双击修改值为1（保持16进制不变）。

最终成果如图：![注册表最终修改](https://cdn.arc-light.fun/DD5JPL/dual-edge-reg.png)

## 如果操作完成后开始菜单仍找不到“Microsoft Edge 旧版”

在“设置” > “应用和功能”找到新版Edge，点击修改，（如果有卸载可以尝试卸载），再重新安装即可双版本共存。

![双版本共存](https://cdn.arc-light.fun/S3ReV0/dual-edge-final.png)

配置MS Edge双版本并行

> 如果英文能力还可以的同学可以直接移步 [官网文档](https://forestry.io/docs/welcome/)

## 原来的写博客方式

现在比较多的写博客模式是利用Github仓库，连接Github Page或者一些第三方服务如Netlify, Vercel(Now.sh)来进行部署，写好文章提交后的流程已经基本自动，而且大部分平台的服务都是免费的。

> 博主之前使用Vercel部署时，需要注意免费计划 **每个小时不能超过30次构建部署** 。

然而写博客主要是内容，那么书写平台就是一大问题，我们虽然可以用本地IDE（亦或是Code Server/VSCode Remote）这一类工具进行编写，但是未免仍不够轻量，如果是iPad这一类移动设备更是不方便，因而，我发现了这个基于Git的第三方编辑平台—— [Forestry.io](https://forestry.io)

## 快速上手

Forestry.io支持四种Git来源：Github, Gitlab, Bitbucket, Azure Devops。

一般作为博客我们使用Github，继续后会进入到Github的授权界面，授权即可。

> 默认的授权是读取Public库，如果你需要也可以在CMS左侧的Settings中选择授权Private仓库。

> 如果是Bitbucket和Azure Devops，可能需要更复杂的设置，我没有使用过，可以参考官方文档。

授权完成后，可以进入Dashboard，选择Add Site。

本篇以一个GatsbyJS的模板项目为例子，Hexo，Hugo，Jekyll官网上都有相关的例子可以参考。如果你是Hexo，请选择Other类别。然后点击Next。

![选择静态生成框架](https://cdn.arc-light.fun/ACvJrn/forestry-step1.png)

进入到“Select your git provider”界面，和原来一样，选择你的Git来源，这里我选择Github。

第三步就来到了仓库选择，直接选择你想要操作的仓库与分支，如果你不想让Forestry提交commit到master，请在此选择一个编辑分支。

![选择仓库与分支](https://cdn.arc-light.fun/px985W/forestry-step3.png)

导入完成，进入到CMS的主界面。

![CMS主界面](https://cdn.arc-light.fun/mrnxZc/forestry-step4.png)

## 简单设置

如同上面的CMS显示，我们只要将剩下三步配置完成即可。

### Set up sidebar

侧边栏是一些快捷入口，这里你可以配置三类：

![侧边栏配置](https://cdn.arc-light.fun/DzKWqf/forestry-setting1.png)

* 目录: 顾名思义，目录可以用作分类等场合，对应的，所有在分类下创建的文档都会进入到对应的目录下；
* 文档: 直接编辑某一篇文档，适合作为介绍页或者文档页的快捷入口；
* Heading: Heading是一个 **没有内容** 的侧边栏选项，适合作为分割线等等，来定制你的侧边栏；

这里添加一个Section，可以看到可以配置很多项，一般默认即可，如果不希望分类下额外存在目录，可以将创建内容改为Documents

![创建侧边栏](https://cdn.arc-light.fun/KEXWaw/forestry-setting2.png)

这里我们先不配置默认模板，先保存。

### Import Media

重头戏来了，之所以选择一个CMS，最重要的就是我们很多时候有上传图片的需求，但是无论是Git手动提交还是第三方工具上传，都费时费力，还需要手工粘贴图片的绝对地址。

而有了CMS，这一切都简化了。

![](https://cdn.arc-light.fun/ks36HG/forestry-setting3.png "配置媒体文件")

如图所示，可以支持四种图片管理方式，最普通的Git提交，第三方支持了Cloudinary和Amazon S3以及Netlify Large Media。

> Cloudinary可以免费试用，它是一个积分制的服务，如果你的博客流量较小，那么它的免费量其实足以；
>
> Amazon S3这里特别提一下，目前有很多VPS厂家会提供Object Storage，他们会提供类似S3的管理方式，但是咨询了Forestry.io的技术支持后，明确表示了 **目前支持的S3仅有Amazon，即你暂时无法通过配置其他域名来实现其他S3的配置** 。

如果配置顺利，在“可视化编辑器”内，你就可以点击这里实现上传直接插入文档中：

![](https://cdn.arc-light.fun/JatvkA/forestry-setting4.png "添加图片")

点击open后，会跳转到你的媒体库，上传即自动插入到文章中。

## 配置预览

Forestry.io支持在发布前进行预览，需要配置预览的相关命令，环境以Node.js为主，也可以进行自定义，本章内容建议详细参阅官方文档的 [配置页面](https://forestry.io/docs/previews/instant-previews/)

## 设置文章模板

这一章也是非常重要的，我们在前面的Section里可以设置默认模板，这就是为了方便统一类别下的文章格式一致(Front matter)，点击左侧的Front matter进入配置界面。

点击添加模板后，可以全新创建，也可以从已有的文章自动分析。

> 我自己使用时发现，文本编辑的识别率较好，如果是类似标签选择的则会识别错误，建议先导入，然后添加一篇新文章进行测试。

一般对于Markdown的博客写作，我们选择左侧的“Fields and big content area”。

![](https://cdn.arc-light.fun/Z721sM/forestry-setting5.png)

Forestry.io提供了一些Field选项，对于博客写作，它们可以与你的Front matter一一对应，通过交互实现配置Front matter，进而与你的博客主题（如Banner图，文章简介等等）比较好的对应，具体使用可以自己体验一下。

Spark1e

Category: all