Minimal and Clean blog theme for Hugo

免费https证书及续签


免费https证书及续签

1. 安装Certbot

首先,确保系统已更新:

sudo yum update -y

然后安装EPEL仓库:

sudo yum install epel-release -y

接着安装Certbot:

sudo yum install certbot -y

2. 生成证书脚本

假设你使用的是Nginx或Apache作为Web服务器,以下是生成证书的脚本示例。这里以Nginx为例:

#!/bin/bash

# 设置域名
DOMAIN1="51wurenji.com"
DOMAIN2="admin.51wurenji.com"
EMAIL="[email protected]"  # 替换为你的电子邮件地址

# 停止Nginx服务
sudo systemctl stop nginx

# 生成证书
sudo certbot certonly --standalone --expand -d $DOMAIN1 -d $DOMAIN2 --email $EMAIL --agree-tos --non-interactive

# 启动Nginx服务
sudo systemctl start nginx

echo "SSL证书已生成并保存在 /etc/letsencrypt/live/$DOMAIN1/"

将上述脚本保存为 generate_cert.sh,并赋予执行权限:

chmod +x generate_cert.sh

3. 配置自动续约

使用cron作业来定期检查和续约证书。编辑cron作业:

Read more ⟶

内网穿透之SSH反向隧道


DNS

将一个域名(aaa.bbb.com)用A记录解析到你的服务器ip(123.456.789)

服务器设置

安装SSH服务器软件

sudo apt-get install openssh-server // ubuntu
sudo yum install openssh-server // centos

配置SSH服务器

编辑SSH服务器的配置文件。在Ubuntu或CentOS中,配置文件通常位于/etc/ssh/sshd_config。在配置文件中,请确保以下选项设置为“yes” sudo nano /etc/ssh/sshd_config

GatewayPorts yes AllowTcpForwarding yes

重启ssh sudo systemctl restart ssh

配置NGINX

编辑Nginx配置文件(例如/etc/nginx/sites-available/default):

vim /etc/nginx/sites-available/default

server {
    listen 80;
    server_name aa.bbb.com;

    location / {
        proxy_pass http://localhost:8080;
        proxy_set_header Host $host;
        proxy_set_header X-Real-IP $remote_addr;
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
        proxy_set_header X-Forwarded-Proto $scheme;
    }
}

重启

Read more ⟶

对react的理解


对react的理解

跨浏览器事件统一

事件代理节省内容

并发渲染提高性能

常用hook

state

effect

memo

callback

context

reducer

react闭包问题

useState和useEffect

  • setState用回调
  • useEffect加依赖

hook原理

  • hook是按执行顺序存在组件的一个数组中的
  • 再次执行按顺序取对应的状态

父子通讯

Read more ⟶

整理一下


博客里的东西很多都只是随手记了一下。

本地的项目,github的项目,gitee的项目,cloudflare的项目,vercel的项目。都要整理下。

博客、博客园、小米笔记、语雀记的东西

博客中随手记的东西,应该叫草稿,不应该叫文章。所以默认应该是草稿,然后真正写好了,能说明白什么问题了,才发布。

todo 反向隧道原理及实战 安卓手机部署服务器 strapi的使用 tanstack-table实现自适应table

地图看片项目

分类: idea project public demo business note 网站收藏夹 有用的开源项目 post——能讲明白一件事,或者能做到什么事。

https://apis.map.qq.com/uri/v1/marker?marker=coord:39.892326,116.342763;title:超好吃冰激凌;addr:手帕口桥北铁路道口&referer=myapp

Read more ⟶

strapi


ubuntu服务器

安装nodejs

curl -fsSL https://deb.nodesource.com/setup_20.x | sudo -E bash -D sudo apt-get install -y nodejs

centos sudo dnf install -y nodejs

开启yarn

corepack enable

nginx

如何使用这两个文件夹

创建虚拟主机配置文件: 在 sites-available 文件夹中创建配置文件,例如 example.com:

sudo nano /etc/nginx/sites-available/example.com

编写配置文件: 在这个文件中编写虚拟主机的配置,例如:

server {
  listen 80;
  server_name example.com www.example.com;

  root /var/www/example.com/html;
  index index.html index.htm index.nginx-debian.html;

  location / {
    try_files $uri $uri/ =404;
  }
}

启用虚拟主机: 通过创建符号链接将配置文件从 sites-available 链接到 sites-enabled:

sudo ln -s /etc/nginx/sites-available/strapi.conf /etc/nginx/sites-enabled/

Read more ⟶

userland


启动ubuntu后运行ssh

修改 /support/startSSHServer.sh 文件,在最下面加两行

#! /bin/bash

if [ ! -f /support/.ssh_setup_complete ]; then
    rm -rf /etc/dropbear
    mkdir /etc/dropbear
    dropbearkey -t dss -s 1024 -f /etc/dropbear/dropbear_dss_host_key
    dropbearkey -t rsa -s 2048 -f /etc/dropbear/dropbear_rsa_host_key
    dropbearkey -t ecdsa -s 521 -f /etc/dropbear/dropbear_ecdsa_host_key
    touch /support/.ssh_setup_complete
fi

dropbear -E -p 2022

# Start OpenSSH Server
service ssh start

下载并修改ssh配置

sudo apt-get update sudo apt-get install openssh-server

启动回话是运行脚本

先修改默认登录用户的 .bashrc 文件,在最后加一行 su 来切换用户的 root, 然后修改root用户的 .bashrc 文件

Read more ⟶

Array的方法


Array的方法

  • 1.遍历foreach
  • 2.转换map、reduce
  • 3.扁平化flat
  • 4.过滤filter
  • 5.查找indexOf、includes、some、every、
  • 6.排序sort
  • 7.添加删除push、pop、shift、unshift
  • 8.拼接join、concat

includes适合比较基本类型,对象适合用some判断是否包含在数组中

Read more ⟶

nextjs缓存


nextjs缓存

遇到了一个缓存问题。

有一个列表页面和一个新建页面,新增一条数据后会返回到列表页,但是列表页中不显示新数据,怎么刷新不显示。

查了一下好像nextjs的全路由缓存机制(full-route-cache)1,下面是列表也的代码。

export default async function Page() {
   const notes = await prisma.markdownNote.findMany()
   return (
     <ClientList initData={notes} />
   )
}

先查到了用重新验证刷新缓存,revalidatePath方法,代码如下

export const POST = async (
   request: any,
   context: { params: { id: string } }
) => auth(async (req) => {
   const body = await req.json();
   const user: MarkdownNote = await prisma.markdownNote.create({data: body});
   revalidatePath('/markdown/list')
   return Response.json(user)
})(request, context)

但是用了之后不但没解决问题,反而出现了另一个问题——水合。不过我没有仔细研究这个问题,可能是因为服务端刷新了缓存,但是客户端缓存没刷新,两边对不上了导致的。

然后又加了 prefetch 解决了水合问题,但是缓存还是没刷新。

router.prefetch('/markdown/list')
router.push('/markdown/list')

最后找到了动态渲染(dynamic-rendering)2,大概意思是当页面中有动态函数3时,页面就不是全路由缓存了,而是有效载荷和数据缓存。

在列表页加了读取 session 就好了,感觉应该是它内部使用了动态函数。

export default async function Page() {
  const session = await auth();
  const userId = session?.user?.id
  const notes = await prisma.markdown_note.findMany({
    where: {
      userId: Number(userId)
    }
  })
  return (
    <ClientList initData={notes}/>
  )
}

现在问题就解决了。

后续要研究一下这部分的原理。

  • 缓存机制
  • 水合
  • 有效负载
Read more ⟶

promise


promise

promise状态

  • pendding
  • fulfilled
  • rejected

转换

只能发生一次,且不可逆 未调resolve或reject时是pendding

静态方法

  • resolve
  • reject
  • all,全部fulfilled才resolve
  • race,第一个到settled状态的
  • allSettled,全部settled不管reject和resolve
  • any,第一个resolve状态的

await/async

  • await是相当于把下面的代码放到了then的回调里。
  • async是相当于将函数放到了promise的构造函数里,resolve()之前。
console.log(0);

async function fetchData() {
  console.log(1);
}

let a = await fetchData()
console.log(2);

上面的代码与下面的代码一样的效果。

console.log(0);

function fetchData() {
  return new Promise((resolve) => {
    console.log(1);
    resolve(); // 模拟异步操作的解决
  });
}

fetchData().then(() => {
  console.log(2);
});
Read more ⟶

React v18 新特性


并发渲染模式

  • ReactDOM.createRoot开启并发模式
  • useTransition并发更新
    • startTransition将更新标记为低优先级
  • useDeferredValue延迟响应的值
    • 也是被标记为低优先级
  • 优先级调度
    • 高优先级的任务可以打断低优先级
    • 比如input输入

自动批量更新

  • 原来只在合成时间中进行批处理,在promise、timeout、原生事件不批处理
  • 现在都自动批处理
  • 现在都会批处理,flushSync可以不批处理
Read more ⟶