技术分享
💭NotionNext 网页部署到云服务器
00 分钟
2023-10-16
2024-6-22
type
status
date
slug
summary
tags
category
icon
password
 

前言

 
两个多月前, 我依照 NotionNext 官方文档 搭建起了静态网页 ( dalechu.life ) 其托管在 vercel 的服务器上, 使用了 Cloudflare 的 CDN. 我对 vercel 和 cf 的免费服务还是很满意的, 但由于众所周知的原因, 在国内访问这种网页, 很多时候响应速度无法令人满意. 而当我们将自己写的帖子分享给他人, 往往就是 “怎么打不开呀” , “微信提醒这个网页有风险” ,”图片加载不出来” … 因此, 在不使用梯子的情形下流畅稳定地访问网页是不容忽视的问题.一些解决办法如下 :
  1. 使用自己的域名而非 vercel 提供的, 在 DNS 解析里, 将域名的 A 记录 IP 设为 76.223.126.88 及 CNAME 设为 cname-china.vercel-dns.com. 我一开始确实是这么做的, 但访问速度偶尔还是很慢.
  1. 关闭 Cloudflare 的 CDN 服务, 仅使用它的 DNS 解析服务. 这确实能让网页访问速度快一些, 但也不多. 同时, 也抛弃了 CDN 服务的各种便利和安全防护.
  1. 购买 CDN, 但一般需要进行网站和域名的备案, 这显然是使用 vercel 无法做到的. 无需备案的 CDN 稳定性和安全性很难说 …
  1. 彻底解决问题 : 将网页部署到便于国内访问的云服务器上. 缺点是需要花点钱, 以及配置维护比 vercel 麻烦一些.
 
 

部署过程

 
下面是我配置云服务器时 ( 系统为 centOS 7 ) 踩的一些坑及解决方案 ~ 主要参照 VPS本地服务器. 请一起阅读. 下面的大部分内容为 Nodejs 原生部署流程, docker 部署方式可直接根据目录跳到后面.
 

 

安装软件及拉取仓库

第一步安装 git 和第二步安装 nodejs 问题不大, 如果服务器访问不了 github 请自行下载文件通过 scp 指令传输到服务器上.
第三步请注意一下, 如果你之前和我一样也是使用 vercel + github , 使用命令 git clone https://github.com/tangly1024/NotionNext && cd NotionNext 时, git clone 后面的 url 请填写你自己 fork 的仓库地址 ! 因为我们想个性化网页上的某些内容时, 都会在 NotionNext 文件夹里进行修改. 我建议即使是从零开始利用云服务器搭建网页, 也请先尝试 vercel + github, 即将NotionNext 仓库按自己喜欢的想法来修改. 等修改地差不多了再去部署到云服务器上也不迟, 因为本地修改文件内容再 git push 比在服务器上修改要方便的多. 然后使用 npm install -g yarn 安装 yarn.
 

yarn 相关操作

在 yarn build 之后, 将 notion_page_id 修改为你自己的 NotionNext 笔记的 id. 注意 : 将网页部署到服务器上, 它仅仅是通过这个 id 来读取展示你写在 notion 上的帖子的. 换言之, 你只需将 id 改为其他人的, 那么网页上就能展示别人的帖子了. 除了作者说的 NOAGE_ID = balabala 在 NotionNext/blog.config.js 文件第五行的 process.env.NOTION_PAGE_ID 也指的是这个 id. ( 我不确定这里也修改一下是不是必要的, 但改了反正更稳妥 ) 另外, 作者贴心地在原文中这部分底下贴上了 “执行效果记录”, 建议执行完命令后对比一下, 因为偶尔 yarn build 第一遍会失败, 需再执行一次.
 
在 yarn start 成功后, 在浏览器上输入 ip:3000 ( ip 为服务器的公网 ip ) 理论上就能访问到网页了. 但应该不会这么太顺利, 如果它在浏览器上加载几十秒最后还是无法访问, 那很可能与你云服务器的安全组配置有关. 请在云服务器控制台界面上, 在安全组的 “入方向” 添加你自定义的那个 yarn start 的端口 ( 默认是 3000 ) 或者直接所有端口, 协议选择 “所有协议” 即可. 如此, 再用浏览器访问 ip:3000, 应该就能加载出网页了. 如果还是无法访问, 可能需要更多安全设置或检查防火墙.
notion image
🌟
2023/10/20 补充 : 切忌设置如此宽松随意的入方向规则, 我当时开放了这个 “所有协议, 1-65535 端口” 的规则本来只是为了测试网站能否访问但一直忘了删掉, 导致两个小时前 8888 端口招进来了挖矿病毒 xmrig … 感染后 CPU 和内存的占用率都逼近 100% , 还好我立即发现并清除了, 总之就是引以为戒, 在使用 nginx 代理后, 请立即删除不必要的入方向规则.
 

域名解析

这一步很简单, 无论什么时候做都行. 非小白可以跳过. 需要注意的一点是如果你购买的是国内云服务器, 域名也请从国内云服务商购买, 此情形下不建议在 namesilo 等国外服务商购买. 因为国内必须服务器和域名一块备案, namesilo 无法提供这种服务, 若将 namesilo 的域名转入国内服务商, 手续费也不便宜. 把域名解析到服务器的公网 ip 上很简单, 网上随便搜索一下吧.
 

后台运行

 
 

Nginx 反向代理

 
如果你按以上内容没有报错, 那么下面的内容可以不用看了. 若无法通过 yum install nginx 安装 nginx, 可以参考一下 :
我在进行此步骤时遇到的麻烦是 : yum install nginx 显示 No package nginx available. 无论换源, yum 清缓存都这样无法安装 nginx … 所以只能手动安装了, 参考 这篇帖子 使用 wget 下载到 nginx 压缩包再解压, 按帖子里写的, 我解压到的目录即 /usr/local/nginx, 如果你目前的流程和我的一样, 那么请使用 vim 来编辑 nginx 的配置文件即 /usr/local/nginx/conf/nginx.conf 而非 tangly 在这里说的 /etc/nginx/conf.d/default.conf
 
这里 nginx 反向代理成功的标志应该是你在浏览器输入服务器的公网 ip 或域名后, 直接显示 网页. 有时云服务器重启之后网站无法访问, 用 netstat -lntp 命令没有找到 80 和 443 端口, 重启一下 nginx 也许就可以解决问题.
 

SSL 证书和 https

请参考 这篇帖子, 完全按上面说的做, 在阿里云上去申请免费证书. 注释掉你刚刚改动的 80 端口那些内容 ( 没错, 你白改了, 嘿嘿 ) 修改 https 的相关内容. 注意 server_name 后的域名填你自己的.
 
这里的 return 301 https://$server_name$request_uri; 原封不动地复制, server_namerequest_uri 并不是什么代号, 不需替换成什么东西.
修改 nginx.config 文件后记得用 nginx -t 检查格式是否正确.
这里成功的标志是使用 https://域名 可访问到你的网页.
 

修改 NotionNext 中文件后重新部署

 
 

npm 和 yarn 的 ‘command not found’

我原以为自己已经成功了, 但第二天打开网页, 赫然 502 bad geteway, 底下一句 Nginx 及版本号. 很离谱, 然后我 ssh 连接上服务器, 先 ps -ef | grep yarn 没有发现 yarn 的进程, 难道是被杀后台了 ? 遂 cd 到 ~/NotionNext 文件夹下, 输入 yarn start 回车, 唉, not found ? 输入 yarn 回车, 还是 not found, npm 也 not found, 离谱.
原因大抵就是在环境变量上, 找了很多的帖子, 具体因素不想分析了, 而我的解决办法就是 :
 
然后去 ~/NotionNext 目录下再把 yarn 的相关操作执行一遍, 使用 nohup yarn start >/dev/null 2>&1 & 挂后台 … 但愿可以常驻吧 ~
 
 

利用 docker 部署

当你购买了一台全新的服务器, 使用 docker 部署网站速度显然是更快的, 当然你需要有一定的 docker 基础知识. 而且 docker 创建 Nginx 容器也很简单, 能避免我上文中提到的 yum install nginx 失败不得不手动安装的情况. 在服务器中安装成功 docker 之后, 执行以下操作 :
容器创建好后, 在安全组中开放 3000 端口的入方向规则, 在浏览器上输入 http:// 公网 ip:3000 后应该就能访问到网页. ( 或先把 Nginx 配置好, 80 端口映射到 3000 端口 ) 特别的, 这个容器内的 NotionNext 版本应该默认是最新版的 ( 我在 2023 年 10 月份创建的这个容器, 在 .env.local 文件中查看到的版本为最新 ) 可以看出 docker 确实简化了很多操作, 但毕竟容器内默认的文件还需要修改, 请看下面 ~
 
 

后语

从一个简单的角度来看, 你公开了自己的某个 notion 笔记, 其通过一个 16 进制的 id 字符串来标识, 在 vercel 或 netlify 及这台云服务器上, 都是通过此 id 来从 notion 服务器获取你的笔记内容然后展示到网页上, 因此, 理论上你可以将自己的网页同时部署到很多的服务器上, 只需购买相同数量的域名解析过去即可 ( 甚至 vercel 它们会赠送你免费域名 ) 比如我的域名 dalechu.life 解析到 vercel 服务器上, dalechu.cn 解析到自己购买的云服务器上, 它们所展示的正是相同的 notion 帖子. 因此你如果能白嫖到某些云服务器, 完全不需要犹豫万一厂商突然涨价或者倒闭, 自己的网页怎么办.
刚开始使用 NotionNext + vercel 部署博客的时候, 我还不知道 hexo, halo 这些更主流的网页框架. 但在用 hexo 搭建了一些静态网页后, 我还是选择了 NotionNext 作为自己主要的工作.
 

多余的话

购买香港的云服务器 ( CN2 线路 ) 完全是因为受不了 GFW 的压迫. 这堵墙确实有很大的积极意义, 因为它为大多数人拦截住了外面的各种危险和不健康的内容, 有利于人民团结和青少年身心健康. 可是另一方面, 它也在恶意阻挠我们享用更好的服务, Github 封没封 ? 如封; VS Code 官网跳出封禁反诈提示; Vercel 被半封被 DNS 污染; Cloudflare 的安全快速的 CDN 到了东方大国比黄包车还慢; 国外很多免费便捷的图床到了赛里斯这边一大半都卡死. 而国内的云服务商在坐地起价; 所有的网络言论都在被逐字审查甚至有时整出些欲盖弥彰的笑话; 各个平台都是广告流量为王; 某些大厂只知道把应用集成的越大越臃肿挤占更多内存和硬盘天天抓着你要各种权限; 部分国企为了骗经费和粉饰工作搞出 CEC-IDE 这样离谱的项目. 某些搜索引擎不仅是在垃圾堆里翻东西自己也生产有害垃圾; 网页端被限流被抛弃, 很多东西被和媚俗广告段子直播封印成手机 APP 和小程序, 很多人不了解互联网和硬件信息身陷狭隘的民族主义气氛中被 “国货” 的宣传包围, 很多自由软件和开源软件的开发者们得不到尊重得不到推广甚至无法稳定生活… 把外面的好的服务拦下来转而给高墙内的人各种不便, 难道这也是 ”文化自信” 的一方面吗 ?
简体中文互联网很精彩但糟粕也实在太多, 由于政策的压迫和企业对流量的追求, 这一切恐怕只会朝着越来越坏的方向发展, 我们不得不舍弃更多的自由和隐私的权利, 我们不得不被官方和大厂监控一切, 我们不得不整日生活忙碌在流量软件上. 我并非在鼓吹简体中文互联网已死, 它死不了它也一直都有很多价值高的内容和服务, 但从整体的发展来看现在无疑是在某些方向上走上了不好的路. 我们受够了这一切, 我们无法扭转局势, 但总可以在自己的范围内做些更加自由的事情, 说出更自由地话, 更多地选择自由的服务.
 
 
 
 

留言区