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作业:
…内网穿透之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;
}
}
重启
…对react的理解
对react的理解
跨浏览器事件统一
事件代理节省内容
并发渲染提高性能
常用hook
state
effect
memo
callback
context
reducer
react闭包问题
useState和useEffect
- setState用回调
- useEffect加依赖
hook原理
- hook是按执行顺序存在组件的一个数组中的
- 再次执行按顺序取对应的状态
父子通讯
…整理一下
博客里的东西很多都只是随手记了一下。
本地的项目,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
…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/
…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 文件
…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判断是否包含在数组中
…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}/>
)
}
现在问题就解决了。
后续要研究一下这部分的原理。
- 缓存机制
- 水合
- 有效负载
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);
});
React v18 新特性
并发渲染模式
- ReactDOM.createRoot开启并发模式
- useTransition并发更新
- startTransition将更新标记为低优先级
- useDeferredValue延迟响应的值
- 也是被标记为低优先级
- 优先级调度
- 高优先级的任务可以打断低优先级
- 比如input输入
自动批量更新
- 原来只在合成时间中进行批处理,在promise、timeout、原生事件不批处理
- 现在都自动批处理
- 现在都会批处理,flushSync可以不批处理