Let's Encrypt, 为nextjs加密
AI摘要: 本文介绍了如何在 Let's Encrypt 中为 Next.js 添加 TLS。由于缺少 TLS 证书,网站只能通过 HTTPS 访问,而 Chrome 浏览器更新后默认开启了安全 DNS,导致无法打开。了解到 Let's Encrypt 可以免费获取 TLS 证书后,决定为网站安装该证书。文章详细解释了 TLS 加密过程,包括银行与客户之间的信任建立和密码加密解密的过程。最后,通过执行特定命令,成功为 Next.js 应用部署了免费的 TLS 证书,并设置了定时更新功能。
HTTPS 在网站建设中非常重要,可以提升 SEO 排名。这个博客网站长期以来因为缺少 TLS 证书而只能通过 HTTP 访问,浏览器总是弹出一个不安全的小提示,显得十分难看。最近,Chrome 浏览器更新后默认开启了安全 DNS,导致我的网站无法打开,而用其他浏览器却能正常访问。
在了解到 Let's Encrypt 可以免费获取 TLS 证书后,我决定为网站添加这个证书——这是迟早要做的事。
TLS 加密过程
让我们用银行和客户的场景来类比。在这个比喻中,银行就是服务器,客户就是客户端。当客户想和银行进行交易时,首先需要确认银行是否是正规机构,而不是卷钱跑路的骗子。在现实生活中,银行的设立需要政府的授权和审批。我们可以查看银行是否有来自政府的正规设立手续(类似于数字证书),如果有,就说明这家银行是安全的。
当用户向银行存钱时,他们不希望自己的存款信息被他人监听到,要确保财务信息不外露。这时就需要进行加密。银行和客户之间约定一个加解密密码,客户存入多少钱就用这个密码告诉银行。即使密码被他人偷听到,也无法判断存入的是一块钱还是一个亿,但银行可以通过解密得到真实的存款数额。
仔细思考这个过程,问题就变成了客户如何与银行约定一个不被他人监听到的密码。首先,银行把自己的授权证书(公钥)发送给用户,用户自己生成一个临时密码(私钥),用银行的公钥加密这个私钥,然后将加密结果发送给银行。银行通过自己的私钥来解密,得到客户的私钥。注意,偷听者没有银行的私钥,因此无法解密得到客户的临时私钥。
最后,银行获得了客户的临时私钥。此后,客户存入的每笔款项都通过加密方式发送给银行,银行则用私钥解密。
为nextjs部署TLS
sudo apt install certbot
certbot certonly --standalone -d we1.top -d www.we1.top
执行完这两个命令后,系统会自动为我们的网站安装免费证书,并设置定时更新功能。这意味着我们只需一次部署,就能长期享受免费的 TLS 服务。
server {
server_name we1.top www.we1.top;
listen 443 ssl;
ssl_certificate /etc/letsencrypt/live/we1.top/fullchain.pem;
ssl_certificate_key /etc/letsencrypt/live/we1.top/privkey.pem;
location / {
proxy_pass http://127.0.0.1:3999;
proxy_http_version 1.1;
proxy_set_header X_FORWARDED_PROTO https;
proxy_set_header X-Real-IP $remote_addr;
proxy_set_header X-Forwarded-For $remote_addr;
proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
proxy_set_header Host $host;
}
}
server {
listen 80 default_server;
listen [::]:80 default_server;
server_name we1.top www.we1.top;
root /var/www/html;
index index.html index.htm index.nginx-debian.html;
location / {
return 301 https://$server_name$request_uri;
}
}
这个配置文件设置了两个服务器块。第一个服务器块处理 HTTPS 请求,将它们代理到运行在本地 3999 端口的 Next.js 应用。第二个服务器块将所有 HTTP 请求重定向到 HTTPS,确保所有流量都是加密的。
完成这些配置后,重启 Nginx 服务器,我们的 Next.js 应用就可以通过 HTTPS 安全地访问了。这不仅提高了网站的安全性,还可能会改善搜索引擎排名和用户体验。