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

前端

技术

生活

关于我

进入NetlifyCMS

Spark1e的Github

前往Twitter

给spark1e发邮件

在博客中搜索……

Category: All - Page 5 | Spark1e的个人博客

常见情况，使用了一些如NFS，s3fs等方式，动态挂载目录，并提供给nginx使用，如果nginx设置直接启动，会找不到文件因而启动失败。

## Fix

### Edit systemctl of nginx

```bash
# if your device doesn't have /etc/systemd/system/nginx.service.d/
mkdir /etc/systemd/system/nginx.service.d
touch /etc/systemd/system/nginx.service.d/override.conf
# Start edit
vim /etc/systemd/system/nginx.service.d/override.conf
# Or
systemctl edit nginx.service
```

在文件内添加：

```
[Unit]
RequiresMountsFor=/data # Your dynamic mount folder
```

然后重启nginx

```bash
systemctl start/restart nginx.service
systemctl enable nginx.service
```

Nginx配置目录挂载后启动

本文主要针对HD4600核心显卡给出特殊问题的解决办法，正常直通流程请参考下方：

> 正常直通请参考LALA大佬的教程，此处给出[链接](https://lala.im/6324.html)

> HD4600 核心显卡驱动[直达地址](https://www.intel.cn/content/www/cn/zh/support/products/81496/graphics/graphics-for-4th-generation-intel-processors/intel-hd-graphics-4600.html#drivers-software)

> 如果是win10之前的版本如win7,8,server 2012可以选择15.36版本下载，能够正常使用3D等能力，但测试Plex硬解没有显示成功(hw标识)。win10及之后的版本可以选择15.40，能够正常进行硬解。

如果按照以上教程已经配置完毕，但进入系统设备管理器显示“设备已停止，代码：43”，那么请按以下方法配置。

## 0. (可选)将PCI ID更新到GRUB

> 之所以为可选步骤，是因为有些设备不需要这一行也能正常设置到vfio，具体原因不清楚。

```
vim /etc/default/grub
```

将`GRUB_CMDLINE_LINUX_DEFAULT`改为下方所示，我的DEVICE ID是8086:0412，修改为你的设备id

> 查询请参考上方教程。

```
# Replace your device_id
GRUB_CMDLINE_LINUX_DEFAULT="quiet intel_iommu=on video=efifb:off vfio-pci.ids=8086:0412"
```

修改完成后执行，使grub生效

```
update-grub
```

## 1. 编辑QEMU配置文件

执行下方命令，注意替换你的节点名和vm id。

```
vim /etc/pve/nodes/<YOUR_NODE_NAME>/qemu-server/<VM_ID>.conf
```

如果已经有hostpci0一行，请将其删除或注释，并在文件中增加一行：

> 00:02.0是我的VGA设备id，请对应替换为你的设备id。

```
args: -device vfio-pci,host=00:02.0,x-igd-opregion=on
```

## 2. 设置机器类型

经过我的测试，这套配置需要使用默认的SeaBIOS和i440fx机器，UEFI+q35的配置我这里没有直通成功。

## 3. 收尾工作

安装hd4600驱动，设置远程桌面，先后重启宿主机和vm，可以尝试在远程桌面模式下运行three.js的[examples](https://threejs.org/examples/)，能够看到GPU的3D部分开始工作，我这里第一个例子的帧数稳定在32帧。

Plex的面板也提供展示，能够看到某个用户当前正在看的，点击图标还有详细信息，如果后面括号有hw标记，则代表已经使用了硬件加速。


> 解决方案参考自[Proxmox论坛帖子](https://forum.proxmox.com/threads/i5-4440-hd-4600-passthrough-code-43.75322/post-339028)

Intel核显HD4600直通PVE

> 本文最后更新于2021年12月27日

Google搜索“hetzner mac abuse”关键字，可以说，在Hetzner购买独立服务器的确物美价廉，售后友好，上下行网络都是标准G口，即便是欧洲商家也很难找出其二。

但是，Hetzner位于德国，因此其网络限制比较多，比如NFS端口不能完全暴露外网，MAC地址限制等等。

> 有关于Hetzner关于MAC限制的[说明](https://www.hetzner.com/legal/dedicated-server)，这个规则适用于整个Hetzner下的所有Dedicated Server，不区分机房。

那么，如果在Hetzner独服上，安装Proxmox，__并开通带有独立IPv6的VM&LXC__，就会基本上一定收到"MAC Abuse Report"，警告机器能够检测到除主机mac之外的其他mac，违反了协议，超过指定时间会被锁定机器。

> 购买独立IPv4在2022年将会上涨，包括租费以及首次安装费，不建议独立IPv4，如果购买了额外IPv4，则需要在面板里手工绑定mac，不涉及本文中提到的解决方案。

## 官方文档解决方案

> [Reference](https://docs.hetzner.com/robot/dedicated-server/faq/error-faq/#mac-errors)

翻译一下，Proxmox的防火墙存在Bug，建议阻止outgoing方向的43端口，但是这个bug只在Proxmox VE 6版本存在，我在PVE7同样收到了MAC Abuse邮件。

## “破罐子破摔”型方案

这个报告的确很恼人，而且频率极高，如果非必须使用PVE，可以不用……

## 社区方案

上一个方案属于开玩笑了，想必点进来都是想解决问题的，搜索了所有提及相关关键字的帖子or方案，大致分为几类。

### pfsense

使用pfsense将子网网络独立，相对比较复杂，而且，子网内的机器比较依赖中间的中转。参考[链接](https://github.com/pekare/hetzner-proxmox-pfsense)

### 禁用一些转发（验证不一定成功）

sysctl.conf

```
net.ipv4.igmp_link_local_mcast_reports = 0
```

包括社区提及，关闭rpcbind相关服务

```
systemctl disable rpcbind.service rpcbind.socket rpcbind.target
```

## 我的终极方案（IPv4 NAT + IPv6）

最近手头增加了两台独服，参考了另一个Kimsufi的独服网络配置方案，相对简单，而且在PVE6 和 PVE7上，均能生效。

首先防火墙配置，正常设置一条规则（或者一个安全群组，vm和节点都能使用），阻止进出的43端口TCP链接。

由于是单个IPv4和一个/64位的IPv6段，拥有独立IP的vm都是单IPv6，直接设置一个经过主网卡进行转发。

所以对于IPv6的链接，流向如下：

```
Outside <==> vmbr0(main IPv4 + main IPv6) <==> vmbr1 (a subnet in main IPv6)
```

### 宿主机配置

一个示例的/etc/network/interfaces文件如下

```
### Hetzner Online GmbH installimage

source /etc/network/interfaces.d/*

auto lo
iface lo inet loopback
iface lo inet6 loopback

auto enp2s0    #ifconfig提前找到的主网卡名称
iface enp2s0 inet manual
iface enp2s0 inet6 manual

auto vmbr0
iface vmbr0 inet static
  address <YOUR_MAIN_IPV4>         #后台可查
  netmask <YOUR_MAIN_IPV4_NETMASK> #后台可查
  gateway <YOUR_MAIN_IPV4_GATEWAY> #后台可查
  bridge_ports enp2s0              #ifconfig提前找到的主网卡名称
  bridge_stp off
  bridge_fd 0
  bridge_maxwait 0

iface vmbr0 inet6 static
  address 2a01:aaa:aaa:aaa::2      #后台可查，这里假设一个虚拟的IPv6/64地址
  netmask 64                       #后台可查，Hetzner一般为/64
  gateway fe80::1                  #后台可查，Hetzner一般为此gateway
  bridge_ports enp2s0
  bridge_stp off
  bridge_fd 0

## 内网桥接 
auto vmbr1
iface vmbr1 inet static
  address 10.10.2.1
  netmask 255.255.255.0
  bridge_ports none
  bridge_stp off
  bridge_fd 0
  post-up iptables -t nat -A POSTROUTING -s '10.10.2.0/24' -o vmbr0 -j MASQUERADE
  post-down iptables -t nat -D POSTROUTING -s '10.10.2.0/24' -o vmbr0 -j MASQUERADE

  # NAT
  post-up iptables -t nat -A PREROUTING -i vmbr0 -p tcp --dport <EXPOSE_PORT> -j DNAT --to 10.10.2.2:<VM_PORT>
  post-down iptables -t nat -D PREROUTING -i vmbr0 -p tcp --dport <EXPOSE_PORT> -j DNAT --to 10.10.2.2:<VM_PORT>

iface vmbr1 inet6 static
  address 2a01:aaa:aaa:aaa::3/64
  bridge_ports none
  bridge_stp off
  bridge_fd 0
  post-up echo 1 > /proc/sys/net/ipv6/conf/all/proxy_ndp
  post-up echo 1 > /proc/sys/net/ipv6/conf/all/forwarding
  post-up echo 1 > /proc/sys/net/ipv6/conf/default/forwarding
  post-up /sbin/ip -f inet6 neigh add proxy 2a01:aaa:aaa:aaa::3 dev vmbr1
  # 下面两行为一对，指::100/128的IPv6地址通过vmbr0转发出去，而进网增加了一条经::3在vmbr1上转发的规则，有几个独立的固定IPv6，则增加几对
  post-up /sbin/ip -f inet6 neigh add proxy 2a01:aaa:aaa:aaa::100 dev vmbr0
  post-up /sbin/ip -f inet6 route add 2a01:aaa:aaa:aaa::100 dev vmbr1
```

> 建议使用我之前提过的较为安全的修改方式，避免interfaces错误导致无法连接机器，[文章链接](/others/安全配置服务器网络/)

保存，并重启networking服务。

```
service networking restart
```

如果顺利的话，SSH链接恢复，检查Proxmox，两块虚拟网卡vmbr0和vmbr1正常。

### Proxmox配置

VM和LXC(即CT)配置方式类似。

对于IPv6分配，采用静态，选择一个在interfaces内已经配置好转发的地址，桥接选择vmbr1，记得开启防火墙并同步双向43的规则，正常情况下，机器的IPv6应该是通的。

而对于NAT的IPv4地址，不开启防火墙也没有问题，因为43规则已经用于宿主机，端口转发会遵从宿主机防火墙配置。

hetnzer解决mac地址滥用警告

## 怎么看？

```bash
cat /var/spool/mail/root
```

## 哪来的？

有部分服务会产生report，如acme.sh，如果遇到续约失败等，会产生一封邮件，发送至对应host，而往往主机没有配置自身的邮件服务，那么就会保留在文件系统里。

SSH显示“You have new mail.”

## Why?

当前LTS版本为Debian11，使用了Debian10的系统——当前系统版本属于Old Stable。

## How?

```bash
apt-get update --allow-releaseinfo-change
# may show some error, just ignore, the repos have been updated.
apt-get update
```

解决"This must be accepted explicitly before updates for this repository can be applied"

> [MathJax's Home Page](https://www.mathjax.org/)

日常在一些页面里会用到Latex公式，在这一方面比较成熟的就是MathJax库，能够提供最为全面且方便的页面公式展示。

### 引入MathJax(v3)

```bash
npm i mathjax-full --save
# yarn add mathjax-full
```

Vue项目中import的内容需要通过Webpack处理，而MathJax最终的提供形式是挂载到window的，所以，在有需要的位置直接使用：

```javascript
import "mathjax-full/es5/tex-svg-full";
// import "mathjax-full/es5/tex-chtml-full"; // CHTML方式
```

### 在Vue项目中使用MathJax(v3)

在Vue项目中，我们习惯手工去触发渲染，因为大量的内容会动态生成。在手工触发时，调用以下方法:

```javascript
window.MathJax.typeset();
```

### 隐藏右键菜单

MathJax的功能对于公式展示而言，极为完备，甚至默认提供了右键菜单来让用户定制展示，对于B端项目，右键菜单并不是必要的，因此通过options将其关闭。

那么由于相关JS是通过直接import的方式引入的，无论是mount相关周期还是create相关周期，MathJax都已经初始化完毕，无法再配置。

所以，比较好的办法是在Vue的入口文件main.js内，直接全局优先定义options

```javascript
window.MathJax = {
  options: {
    enableMenu: false,
    processHtmlClass: 'tex2jax_process' // 指定需要处理的DOM元素类，避免全局遍历
  }
}
```

Vue项目中使用MathJax

说到解析字符串，第一时间，`new Date(dateString)`，但这样是存在问题的。

有如下一段非常简单的代码：

```javascript
new Date('2021-10-1 12:00:00')
```

请问他返回的是什么？

## 标准Date对象？No！

在IE下执行，返回 `[date] Invalid Date`;
在iOS(14.6)的Safari下执行，返回

```
[object Date]
null
```

虽然Date构造函数能够对日期字符串尝试进行解析，但是不同浏览器的支持程度并不一样，因此，贸然直接parse日期字符串是非常危险的。

## 正确方案

首先，目前绝大多数现代浏览器对于'/'的支持是ok的，所以简单而言可以进行正则匹配替换，即，

```javascript
new Date('2021/10/1 12:00:00')

// dateString.replace(/-/g, '/') // 需要注意，是否与UTC-时区的‘-’冲突
```

最好的办法是使用 [moment](https://momentjs.com/) / [day.js](https://day.js.org/) / [date-fns](https://date-fns.org/)

> moment由于“不可变”性以及使用的非现代API，目前不推荐使用，但其兼容性较好，请酌情。

如果不能够使用这一类库，就需要根据项目需要自行拆解，进而设置Date对象。

## 最佳方案

既然不应该使用日期字符串，那么毫秒数就是更好的选择啦！

正确的解析时间字符串

### WSL 是什么？

Windows Subsystem of Linux, 属于在Windows内加载的旁系统。WSL1与WSL2的实现不一致，WSL2更像是一个系统内的虚拟机，而WSL1是通过兼容层实现了类似与Linux的运行环境，如果涉及底层的一些操作或者命令则不存在。

更详细的对比请参阅: [Comparing WSL 1 and WSL 2
](https://docs.microsoft.com/en-us/windows/wsl/compare-versions)

### 对于前端同学的选择

我的需要最基本的有：可接受的文件io，Node.js，npm/yarn，容器（运行本地Debug环境）。

那么如上的需求，可以考虑WSL1+WSL2的搭配方案，即需要容器的环境使用WSL2挂载项目文件夹进行执行，否则则在WSL1内正常使用Node开发。

> 如果你能接受 __【挂载盘】较慢的io速度__ 以及 __每次需要现查的主机/WSL2 IP地址__ ，那么可以只使用一个WSL2环境。

### WSL快速配置

> 官方旧版安装指南 [Windows Subsystem for Linux Installation Guide for Windows 10](https://docs.microsoft.com/en-us/windows/wsl/install-manual)

> 2021-12-01 官方文档更新了，这个步骤不是很清晰，补充几个关键命令……

```powershell
wsl --install -d Debian # -d <DistributeName>
# 安装完毕后关闭WSL窗口，直接开始导出
wsl --export Debian C:\Debian.tar
wsl --import Debian-WSL1 <SomePathToDir> C:\Debian.tar
wsl --import Debian-WSL2 <SomePathToDir2> C:\Debian.tar
wsl --unregister Debian # 删除原来安装的默认版本
wsl --set-default Debian-WSL1 # 设置WSL1为默认版本
wsl --set-version Debian-WSL2 2 # 将其中一个版本转换为WSL2
```

这里我使用 Manual Installation，同时开启WSL2所需的Features，并安装Linux kernel update package。截止至Step4。

我选择不将所有WSL版本都设置为2，即不设置默认使用版本2。

这时安装的WSL即为一代，选择你希望安装的distribution，我这里选择的Debian。

正常安装并在内部配置好所需的开发工具后，将WSL1导出一份用来生成WSL2。

### 配置Node.js环境

前文赘述了不少关于npm的问题，其实根治的方案就是选择一个node版本控制工具，比如nvm，它会将不同版本的包管理在一个有权限的子目录内，“根本上”避免了权限问题。

> 这里我选择的nvm，官方Guide [Readme](https://github.com/nvm-sh/nvm#installing-and-updating)

安装好nvm并使用nvm安装Node.js以及其他工具如yarn等工具后，我们就可以开启“平行宇宙”，将环境一分为二了。

> Yarn (classic) 目前推荐的安装方案：`npm install -g yarn`

> "开启“平行宇宙”，将环境一分为二"的梗来自于Marvel的"What If..." 04，古一将Doctor Strange一分为二，使得同一时间线内有了两个Doctor Strange。

### 切分环境

打开PowerShell，确保容器目前处于关闭状态。

> 手工关闭，`wsl --shutdown`

首先需要把已有的导出为一个档案文件，

```cmd
wsl --export <DistributionName> <FileName>
```

导出后，再使用import进行导入，这里可以指定安装位置，因此 __也可以用来移动WSL安装位置__ :

```cmd
wsl --import <AnotherDistributionName> <InstallLocation> <FileName>
```

验证可以使用`wsl --list -v`，这时我们已经有了两个WSL1。接下来我们转换其中一个为WSL2

```cmd
wsl --set-version <AnotherDistributionName> 2
```

再执行`wsl --list -v`就可以得到两个版本的WSL共存了。

> 使用同一个环境切分，可以比较方便的处理同一个文件夹下的文件，避免了由于不同用户导致的权限问题。

### WSL2容器解决方案

> Docker Desktop v4开始，对于商业公司使用作出了明确限制，如果涉及商用，就需要使用付费plan，因此本文介绍的都是使用[Podman](https://podman.io/) 进行容器管理的方案。

#### Podman安装

其它WSL底层系统请参考[Podman Installation Instructions](https://podman.io/getting-started/installation)

```bash
sudo apt-get -y install podman
```

#### Podman登录Docker注册表

```bash
podman login your.registry.com
```

#### Podman拉取镜像并运行

```bash
podman pull <image>
podman run <custom-args> <image>
```

由于缺失systemd和journal，可能会启动时遇到报错，可以在执行时增加参数`--cgroup-manager=cgroupfs --events-backend=file`，或者直接在配置文件里进行全局设置：

```bash
vim /etc/containers/containers.conf
```

```conf
[engine]
events_logger="file"
cgroup_manager="cgroupfs"
```

#### Podman停止、列出镜像

```bash
podman ps -a
podman stop <container> && podman rm <container>
```

### WSL2实用命令

#### [如何获取主机IP](https://pscheit.medium.com/get-the-ip-address-of-the-desktop-windows-host-in-wsl2-7dc61653ad51)

```bash
ipconfig.exe | grep 'vEthernet (WSL)' -A4 | cut -d":" -f 2 | tail -n1 | sed -e 's/\s*//g'
```

使用WSL快速搭建开发环境

## Why not use Webpack 5 ?

因为目前有些大型的项目还在依赖Webpack4，比如我正在用的Storybook和flareact。

如果安装最新版的各种loader，最常见的错误就是`TypeError: this.getOptions is not a function`，所以要么开发时锁定loader版本，要么根据我下面的列表进行调整devDependencies。

## Lastest version of Webpack4 loaders

- css-loader@5.2.7
- sass-loader@10.2.0
- postcss-loader@4.2.0
- less-loader@7.3.0
- mini-css-extract-plugin@1.6.2
- copy-webpack-plugin@6.4.1

> Webpack4对于mjs文件处理存在问题，可以增加一条以下规则：
> ```javascript
> {
>     test: /\.mjs$/,
>     include: /node_modules/,
>     type: "javascript/auto",
> }
> ```

Webpack 4最后兼容的loader

## What is OpenSearch

OpenSearch是一个通用的搜索协议，主要是为了给浏览器提供“搜索引擎”探知，也就是说，支持了这个功能的网站，可以在较为新的浏览器地址栏添加搜索引擎或者直接进行搜索，如Gtihub和npm。

## Example

我们接下来以npmjs.com举例说明。

查看页面源代码，我们可以找到一行meta标签信息：

```html
<link data-react-helmet="true" href="https://static.npmjs.com/osd.xml" rel="search" title="npm package search" type="application/opensearchdescription+xml"/>
```

其中`type="application/opensearchdescription+xml"`声明了这是一条对OpenSearch支持的元信息，`rel="search"`，链接到了一个xml文档，我们打开可以看到：

```xml
<OpenSearchDescription xmlns="http://a9.com/-/spec/opensearch/1.1/" xmlns:moz="http://www.mozilla.org/2006/browser/search/">
<ShortName>npm</ShortName>
<Description>Search for packages on npm</Description>
<InputEncoding>UTF-8</InputEncoding>
<Image width="16" height="16" type="image/x-icon">https://static.npmjs.com/favicon-16x16.png</Image>
<Url type="text/html" method="get" template="https://www.npmjs.com/search?q={searchTerms}"/>
</OpenSearchDescription>
```

非常简单，首先最外层及OpenSearch协议标准，使用ShortName字段定义一个名称，可以带有描述、Icon，其中最主要的是Url字段。

这个字段提供了搜索需要的请求地址以及方法，在浏览器地址栏搜索时，会使用用户输入的字符替换`{searchTerms}`，并按照xml配置的方法进行请求，因此我们在自己实现时，主要需要将其修改为我们页面的搜索请求接口。

Spark1e

Category: all