biulight Site Blog

快速配置你的 ubuntu 服务器

2025-04-14T00:00:00.000Z

常见的软件

Atuin

安装

curl --proto '=https' --tlsv1.2 -LsSf https://setup.atuin.sh | sh

拯救你的Docker

2025-02-07T00:00:00.000Z

威联通 Docker 国内无法拉取镜像？

背景

由于众所周知的原因，国内拉取 docker 镜像愈发可困难，网上现有的教程涉及 NAS 的极少，为了能愉快的使用 NAS，我进行了大量尝试，终于找到了可用的方法，顺手记录下，分享给各位苦苦挣扎的道友。

常见的方案

现有环境下，想成功拉取镜像，无非使用魔法或者换国内镜像。

使用代理

开启威联通 ssh 服务,并通过 ssh 连接到 QNAP

# 远程登录
ssh -p 22 username@192.168.0.155

tip

SSH 服务的默认端口是 22，上述命令是用户通过 SSH 工具用账号（username）连接到服务器（192.168.0.155）的 22 端口

增加 docker 的代理配置

# 编辑配置文件
sudo vim /share/CACHEDEV1_DATA/.qpkg/container-station/etc/docker.json

增加代理配置

/share/CACHEDEV1_DATA/.qpkg/container-station/etc/docker.json
{
  // 新增配置
  "proxies": {
    "http-proxy": "http://代理地址:端口",
    "https-proxy": "http://代理地址:端口",
    "no-proxy": "*.test.example.com,.example.org,127.0.0.0/8"
  }
}

tip

ssh 登录后，可以通过 which docker、whereis docker 查看 docker 所在位置

重启 docker 服务

sudo /etc/init.d/container-station.sh restart

查看配置是否成功

docker info

如下图：

完成上述设置后，你就可以愉快的拉取镜像了

更换国内镜像源

参考使用代理，增加镜像源配置

步骤 1、2 参考使用代理

# 编辑配置文件
sudo vim /share/CACHEDEV1_DATA/.qpkg/container-station/etc/docker.json

增加镜像源配置

/share/CACHEDEV1_DATA/.qpkg/container-station/etc/docker.json
{
  // 新增配置
  "registry-mirrors": [
    "https://mirror.ccs.tencentyun.com",
    "https://docker.mirrors.ustc.edu.cn"
  ]
}

info

腾讯云镜像加速器地址：https://mirror.ccs.tencentyun.com

中国科学技术大学：https://docker.mirrors.ustc.edu.cn

Docker 官方镜像（中国区）镜像加速：https://registry.docker-cn.com

网易云镜像加速器地址：http://hub-mirror.c.163.com

南京大学镜像加速器地址：https://docker.nju.edu.cn

剩余步骤参考使用代理

使用Github自动交付前端制品

2025-02-05T00:00:00.000Z

怎样通过 Github 自动交付前端编译产物？

准备

一台阿里云 ubuntu 服务器

实施

以 deploy 用户组下的 deploy001-timeline 用户,部署目录 /path/to/folder，部署工具 easingthemes/ssh-deploy@v2.2.11 为例

新建部署用户，修改部署目录权限

tip

遵循权限最小化原则，创建 deploy001-timeline 用户，用于部署若已存在 deploy 用户组，跳过步骤 1，直接新建指定项目部署用户

# 检查指定xxx用户组是否存在
cat /etc/group | grep xxx

创建用户组

sudo addgroup deploy

创建用户

sudo adduser --ingroup deploy deploy001-timeline

sudo chown deploy001-timeline:deploy /path/to/folder

sudo chmod 755 /path/to/folder

配置部署工具

以 easingthemes/ssh-deploy@v2.2.11 为例

tip

easingthemes/ssh-deploy使用手册

服务器侧

tip

使用 ssh 登录服务器，需要使用一组秘钥对，其中公钥设置到服务器 ~/.ssh/authorized_keys 文件中，私钥设置在客户端

登录新创建的用户

su deploy001-timeline

生成非对称密钥

ssh-keygen -m PEM -t rsa -b 4096 -f deploy001-timeline -C "deploy001-timeline"

把公钥粘贴到 authorized_keys 文件中

# 查看公钥，复制输出到终端的结果
cat deploy001-timeline.pub
# 编辑 authorized_keys 文件，并把复制的结果粘贴到此文件
vim ~/.ssh/authorized_keys

~/.ssh/authorized_keys
ssh-rsa AAAAB3NzaC1yc2EAAAADAQABAAACAQDcGxPtreCc5bBbaN7jIRuVuTQkC0Mp6VxnyC5sQKG1IZwSL5agL3Zdbu3YVzx0rSU33XZZj5lWp0AAz4ABQGhAU6iIgDNjRmhyuLG4VOS3Gas21Si1lK4Dm/D0lBA//zFmDBTwa9sAEl39rJQCQYL3n2prMrlC2k8m93RGLFmgxWDcb2D+LGgi43bgR4TXvJD6dZa7xfIldsQL5SQpCzEMX8uDDlnnsus99AqmmMzUenW6I25G2ApwgUY/Toj/scCGeHRb7PmGK0AwjqBr9siiIRNi0DpX4JbYPqLPn0IciC70RNLs2tOEFV1BwP50gmF5eDD4tI7NOLaI4HvkesYy9xF6qBtNJOfALgu7Dt+s5g5izXg2pfb/RKJw2WEj56hLI2NIOr1CgZRJH6Yq2xlP1SKlo3GwkzT/NhnhiO1NFy/FKFj/sYmn4/SM92QM2OmruPDAU6JUHUT9P7m/bhlAxo5xrzMqH8v9c4acxUGz5s87j8eNcNfaIuzMQOG+jzEOqqdWI4uLeTPHrm4pSuZUuse7IenTN3Wx1MD4CfjyZZZIWR6Xv+f7MJ0CpbvpZ7E4MjenLfb8g/upl2L1kv3Lz/UUbL4n38DCY113wkJY5x6T54ckqHUmhirsL2SCHb71VAtxUhEByCTBdPEN18Hh+QOKKTp4rmJYjNrvm4E5yw== deploy001-timeline

tip

vim 是 linux 常用的终端编辑器，常见命令如下

:wq 保存并退出
i 进入输入视图

Github 配置

配置 secrets ，在 workflow 中使用

tip

配置位置如下图所示

新增 ALY_USER，如下

deploy001-timeline

新增 ALY_HOST，如下

192.168.0.155

新增 ALY_SSH_TOKEN，如下

tip

ALY_USER: 服务器配置的部署用户名
ALY_HOST: 服务器域名
ALY_SSH_TOKEN: 通过ssh-keygen 生成的私钥

项目 workflow 配置

tip

配置文件配置在项目中，通常写在 .github/workflows 目录下

example:

.github/workflows/deploy.yml
name: Deployment
# 触发脚本的条件，develop分支push代码的时候
on:
  push:
    branches:
      - release
# 要执行的任务
jobs:
  # 任务名称
  build:
    # runs-on 指定job任务运行所需要的虚拟机环境（必填）
    # runs-on: self-hosted
    runs-on: ubuntu-latest
    # 任务步骤
    steps:
      # 获取源码
      - name: pull code
        # 使用action库  actions/checkout获取源码
        uses: actions/checkout@v3
      # 安装node
      - name: create build environments
        # 使用action库 actions/setup-node 安装node
        uses: actions/setup-node@v3
        with:
          node-version: 18.20.4
      # 安装依赖
      - name: install
        run: npm install
      # 打包
      - name: build
        run: npm run build
      - name: Upload static files as artifact
        id: deployment
        uses: actions/upload-pages-artifact@v3 # or specific "vX.X.X" version tag for this action
        with:
          path: build/
      # 上传打包文件到远程服务器
      - name: ssh deploy
        uses: easingthemes/ssh-deploy@v2.2.11
        env:
          REMOTE_USER: ${{secrets.ALY_USER}}
          REMOTE_HOST: ${{secrets.ALY_HOST}}
          REMOTE_PORT: "22"
          ARGS: "-rltgoDzvO --delete"
          SSH_PRIVATE_KEY: ${{secrets.ALY_SSH_TOKEN}}
          # 要上传文件所在目录
          SOURCE: "build/*"
          # 远程服务器目标路径
          TARGET: "/var/www/timeline"

补充

NGINX 配置

以访问 http://blog.biulight.cn/timeline 能显示 /var/www/timeline 目录内容为例

tip

通常，Nginx 的虚拟主机配置位于/etc/nginx/sites-available/目录下。如果已经有针对timeline的配置文件，可以直接编辑它；否则，创建一个新的配置文件。
启用配置文件，需要在 /etc/nginx/sites-enabled/目录下有对应配置文件的映射。

新增配置文件

/etc/nginx/sites-available/timeline
server {
    listen 80;
    server_name blog.biulight.cn;

    # 映射/timeline到指定目录
    location /timeline {
        alias /var/www/timeline;
        index index.html index.htm;
    }
}

启用配置文件

# 建立软连接，启用新增的配置文件
ln -s /etc/nginx/sites-available/timeline /etc/nginx/sites-enabled/timeline

测试配置文件

# 修改完配置后，运行以下命令检查语法是否正确
sudo nginx -t

重新加载 Nginx 服务

# 如果测试通过，重新加载Nginx以应用更改：
sudo systemctl reload nginx

使用 `Let's Encrypt` 证书

tip

ubuntu 安装查看certbot官方文档

使用certbot自动生成证书

sudo certbot --nginx

Install Neovim

2025-02-04T00:00:00.000Z

Ubuntu 怎样安装指定版本的 Neovim?

背景

由于 apt 中只有 Neovim(v0.72)的安装包。想使用新版需要自己安装

以 v0.9.5 版本为例

方案一

去 Github 上查看指定版本的压缩包,并下载

sudo wget https://github.com/neovim/neovim/releases/download/v0.9.5/nvim-linux64.tar.gz

解压缩 nvim-linux64 至 /opt 目录

sudo tar -C /opt -xzf nvim-linux64.tar.gz

add this to your shell config (~/.bashrc, ~/.zshrc, ...):

export PATH="$PATH:/opt/nvim-linux64/bin"

reload shell config

source ~/.bashrc

方案二

使用 snap 包管理工具安装

sudo snap install nvim --classisc

Watch document.title

2024-08-10T00:00:00.000Z

埋点监控 SDK ENTER 事件怎样获取到页面标题？

背景

使用 window.onload、hashchange 事件获取 document.title 时，某些场景出现异常，值为空

分析

单页面应用，document.title 存在异步设置的场景（如页面是后管配置的，需要等接口返回页面标题）

方案

场景一：多页面应用，`title` 写在 html 文件里；

window.onload 事件可以正常获取到页面标题

场景二：单页面应用，`title` 在页面初始化后设置；

借助 MutationObserver 观察 title 元素更新

function watchForTitleChanges(callback, type) {
  let ele = document.getElementsByTagName("title")?.[0];
  if (!ele) {
    ele = document.createElement("title");
    document.head.appendChild(ele);
  }
  let previousTitle = document.title;
  const observer = new MutationObserver((mutationList, observer) => {
    const title = document.title;
    if (previousTitle !== title) {
      previousTitle = title;
      callback?.(title);
      if (type === "once") observer.disconnect();
    }
  });

  observer.observe(ele, { childList: true });
  // 非仅监听一次更新时，返回取消监听函数
  if (type !== "once") return observer.disconnect;
}

完美实现如下：

// 页面初次加载时，在 load 事件中注册 watch
window.addEventListener("load", () => {
  watchForTitleChanges((title) => {
    console.log("title发生了变化", title);
  }, "once");
});

// 路由切换时，在 hashchange 事件中注册 watch
window.addEventListener("hashchange", () => {
  watchForTitleChanges((title) => {
    console.log("title发生了变化", title);
  }, "once");
});

Install Docker

2022-10-29T00:00:00.000Z

如何安装docker？

Ubuntu

Snap 安装

Snap 是一种全新的软件包管理方式，它类似一个容器拥有一个应用程序所有的文件和库，各个应用程序之间完全独立。

snap install docker
snap start docker --enable # 启动 docker，并添加随机启动

snap services docker # 确认服务状态
service snap.docker.dockerd status # 确认服务详情

snap refresh docker # 更新 Snap 安装的 docker 服务

常见的问题

Got permission denied while trying to connect to the Docker daemon socket

sudo chmod 666 /var/run/dokcer.sock

Got permission denied while trying to connect to the Docker daemon socket at unix:///var/run/dokcer.sock:Get http://%2Fvar%2Fdocker.sock/v1.40/containers/json:dial unix /var/run/docker.sock:connect:permission denied

sudo usermod -aG docker ${USER}

Got permission denied while trying to connect to the Docker daemon socket at unix:///var/run/docker.sock

sudo chmod 666 /var/run/docker.sock

SSH登录多个github账户

2022-08-20T00:00:00.000Z

在同一台电脑上，如何配置多个SSH Key？

背景

通常，我们只会生成一个SSH Key（id_rsa）,然后提交到多个不同的网站(如：github, gitee, 服务器); 但是也存在另外一种需要，我们在同一个网站上，注册了多个用户。通常网站不允许为多个用户名配置同一个SSH Key，此时就给用户造成些许麻烦。

如下图，就是github网站，往多个账号添加同一个SSH Key报错提示。

重点来了，怎样配置多个SSH Key呢？下面就以我自身为例，给出解决方案。

解决方案

我当前已配置了一个SSH Key，已关联了多个网站，怕麻烦的我，并不想修改它，我继续把它当做默认的SSH Key。此时我只需要增加一个新的SSH Key,关联到新的github账户

tip

多个github账户的配置方案跟下述的方案没有太大的差异，所以只要学会加法，就很容易了。

准备工作

准备一个新的github账号(biulight)
bash/zsh环境

配置

以Mac/Linux为例

打开终端，生成新的SSH Key

cd ~/.ssh
ssh-keygen -m PEM -t rsa -b 4096 -f biulight -C "biulight007@gmail.com"

tip

上述命令会在当前目录下生成两个文件biulight, biulight.pub , 因此一般会选择在 ~/.ssh 目录下
后缀.pub的文件为公钥文件，没有后缀的为私钥文件。
可以通过 ssh-keygen --help 查看对应命令信息。

把biulight.pub里面的内容复制到新准备的github账户（biulight）中对应的位置
再次打开终端，编辑 ~/.ssh/config 文件

在该文件中新增以下内容

# biulight登录信息
Host biulight # 别名（可以随便起）
HostName github.com # 访问的真实地址
PreferredAuthentications publickey # 配置登录用什么权限验证
IdentityFile ~/.ssh/biulight  # 私钥文件(证书所在的位置)

关键在于Host与HostName的区别：

HostName: 填写真实的服务地址（如：访问github，填写github.com）
Host: 填写别名，后续会用上（如：通过ssh拉取github代码）

tip

~/.ssh/config文件其他配置信息:

UserName 登录的用户名(如：git, root)
Port 服务器open-ssh端口（默认：22，默认时，一般不写此行）

拉取代码

通常我们在Web页面上复制的SSH URL，可以直接使用，例如：

git clone git@github.com:biulight/blog.git

但是，由于现在使用的biulight的秘钥，因此需要修改原有的URL

# 用上面配置的HostName替换链接中的 `github.com`
git clone git@biulight:biulight/blog.git

总结

此时，就可以通过git ssh玩转多个github账户了

其他

如果想要进一步区分每个账户提交，可以为仓库设置局部的用户名和邮箱

# 取消全局 用户名/邮箱 配置
git config --global --unset user.name
git config --global --unset user.email

# 单独为每个repo设置 用户名/邮箱
git config user.name "xxx01"
git config user.email "xxx01@gmail.com"

小程序与h5通信实现方案

2022-08-16T00:00:00.000Z

在微信小程序中，如何实现原生页面与webview内嵌的h5页面双向通信？

背景

微信小程序提供的 message只能在特定的场景触发

内嵌h5在小程序中的交互（跳转）场景

h5 跳转小程序 native 页面
小程序 native 页面返回 webview 页面

内嵌h5跳转h5的方式

常见的h5跳转h5方式

直接用 location.href 跳转
通过路由hash跳转，触发 hashchange ,页面不刷新， js 层面重新渲染
跳转页面打开一个新的 webview ，相当于每个页面都是一个独立的 webview

跨页面通信的实现

实现的条件

tip

url链接 hash 变化，不会重新加载页面

小程序通过 hash传参给 webview 页面
h5通过 hashchange 捕获最新的参数，进行自定义逻辑处理
h5通过 window.history.go(-1) 去掉传参的路由栈

方案缺点

需要h5和小程序同步改造

biulight Site Blog

快速配置你的 ubuntu 服务器

常见的软件​

Atuin​

拯救你的Docker

背景​

常见的方案​

使用代理​

更换国内镜像源​

使用Github自动交付前端制品

准备​

实施​

新建部署用户，修改部署目录权限​

配置部署工具​

服务器侧​

Github 配置​

项目 workflow 配置​

补充​

NGINX 配置​

使用 Let's Encrypt 证书​

Install Neovim

背景​

方案一​

方案二​

Watch document.title

背景​

分析​

方案​

场景一：多页面应用，title 写在 html 文件里；​

场景二：单页面应用，title 在页面初始化后设置；​

Install Docker

Ubuntu​

Snap 安装​

常见的问题​

SSH登录多个github账户

背景​

解决方案​

准备工作​

配置​

总结​

其他​

小程序与h5通信实现方案

背景​

内嵌h5在小程序中的交互（跳转）场景​

内嵌h5跳转h5的方式​

跨页面通信的实现​

实现的条件​

方案缺点​

基础版实现​

中级版实现​

终极版本实现​