Onedrive Vercel Index 本地部署教程

在独立服务器中迅速创建 Onedrive Vercel Index 实例。

无需再多说什么废话,点进来的你肯定知道这篇教程是要做什么的,我们直接开始。

在 CentOS 上部署

现在我们假设是在一台纯净全新的 CentOS 机器上开始操作,按照国际惯例,新机器拿到手先执行一次 yum update
更新完系统中的依赖之后便可以执行 yum install nodejs 安装 Node.js,一些国内源的 Node.js 版本可能相当老旧(Next 要求 Node.js 12.22+),这里我推荐直接使用 Snap 来安装 Node 和 Redis,具体操作是按照顺序执行如下指令。注意在绝大多数 CentOS 的发行版本中,epel-release 和 snapd 可能已经被预装:

sudo yum install epel-release
sudo yum install snapd
sudo systemctl enable --now snapd.socket
sudo ln -s /var/lib/snapd/snap /snap
sudo snap install snap-store
sudo snap install node --classic
snap install redis

当然安装 Redis 也可以试试简单粗暴的 yum install redis 指令,最后验证安装成功的标志是在终端执行 redis-cli 指令能够成功进入 Redis 命令行。安装好 Node.js 之后,执行 sudo yum install npm 来安装 npm,然后执行:

wget -qO- https://get.pnpm.io/install.sh | PNPM_VERSION=7.0.0-rc.2 sh -

配置 pnpm,注意 pnpm 安装完成之后需要退出 SSH 并重新连接到服务器,否则安装所做出的修改不会生效。
最后,执行一次 sudo yum install git 为服务器安装 Git 支持。
在安装好 git 之后,便可以将自己所 fork 的 Onedrive Vercel Index 代码包 git clone 到自己的服务器本地,这条指令我们就不写了,记得 clone 之后 cd 到文件夹中就好。在克隆过来的文件夹中,找到 package.json 文件,通过你喜欢的方式打开并编辑该文件,在 dependencies 中添加如下两行:

"@fortawesome/fontawesome-common-types": "^0.2.36",
"sharp": "^0.30.7",

此修改能够解决 #518-2536090
绝大多数本地部署的朋友会遭遇 #694:对于本地部署时网页中的任何图片,如果使用 next 自带的 Image 标签则会报错,只能将其替换为原生 HTML img 标签。

  1. 打开并编辑 src/components 文件夹中的 Auth.tsxDownloadBtnGroup.tsxFourOhFour.tsxNavbar.tsx 四个文件;
  2. 在这些文件中找到 <Image> 标签,将其替换为经典的 HTML <img> 标签;
  3. 由于新的图片标签不再携带尺寸,故还应前往 styles/globals.css 文件添加相应的 HTML 样式,或者直接使用 width 等属性。

按照 Vercel Index 官方文档,还需要在目录下创建 .env 文件以声明 Redis 配置,在创建的 .env 文件中粘贴如下内容:

REDIS_URL = "redis://127.0.0.1:6379"

保存退出即可。现在万事俱备,只需在 Vercel Index 目录中分别执行一次 pnpm installpnpm build 即可完成构建。
在 Build 阶段还有一个可能的错误,但估计只有万分之一的人会遇到。该错误发生在 Creating an optimized production build 的时候,报错内容为 Failed to load SWC binary for linux/x64,要解决该错误,请:

  1. 在 Vercel Index 根目录下创建一个名为 .babelrc 的文件;
  2. 编辑文件内容,输入 {"presets": ["next/babel"]},然后保存并退出;
  3. 在目录下执行一次 sudo rm -rf .next 然后重新执行 pnpm build 命令。

如果在 Build 阶段没有发生任何错误,那么基本上已经成功了,现在只差反向代理。
急着检验构建成果的可以先在目录中执行一次 pnpm start 看看效果。

在 Ubuntu 上部署

Ubuntu 和 CentOS 一样都是 Linux,它们只在包管理(安装依赖)时的所执行的指令上有所区别。如果使用的是 Ubuntu 20.04+ 系统,那么首先应当分别执行一次 sudo apt updatesudo apt upgrade 命令,然后将上面 CentOS 安装依赖所有的那些指令中的 yum 换成 apt 执行就可以了,比如要安装 npm,那就是 sudo apt install npm;剩下的其它任何操作与 CentOS 别无二致。

配置反向代理

pnpm start 之后我们会发现监听的是 3000 端口,要正常绑定到自己的域名使用,则还应该配置反向代理。
基于所安装的 Web 服务器类型,大致有两种情况:

基于 Nginx

首先确保服务器中已经安装了 Nginx,且 nginx 配置文件位于 /etc/nginx/nginx.conf。在该文件的 http{} 代码段中添加如下内容:

server {
   listen 443 ssl http2;
   listen [::]:443 ssl http2;
   # 下面的 test.com 应当是你自己的域名
   server_name  test.com;
   # 下面的两份证书及路径应当填写自己的情况
   ssl_certificate "/home/root.saammaa.com.crt";
   ssl_certificate_key "/home/root.saammaa.com.key";

   location / {
       proxy_pass http://127.0.0.1:3000$request_uri;
       proxy_ssl_session_reuse off;
       proxy_ssl_protocols TLSv1 TLSv1.1 TLSv1.2;
       proxy_set_header Accept-Encoding "none";
       proxy_set_header Host $host;

保存文件之后在终端执行 service nginx restart,然后在浏览器中前往自己的域名即可。

基于 Apache,但是 CentOS

在文件夹 /etc/httpd/conf.d 中创建(随意命名)文件 onedrive.conf,然后编辑其内容为:

<IfModule mod_ssl.c>
   <VirtualHost *:443>
       # 邮箱、域名分别是你自己的邮箱和域名
       ServerAdmin test@test.com
       ServerName test.com.com
       # 两个证书路径和自己的证书文件名-路径对应好
       SSLEngine on
       SSLProxyEngine On
       SSLProxyVerify none
       SSLCertificateFile /home/test.com.crt
       SSLCertificateKeyFile /home/test.com.key
       <Proxy *>
           Order deny,allow
           Allow from all
       </Proxy>

       ProxyPreserveHost On
       ProxyRequests Off
       ProxyPass /  http://127.0.0.1:3000/
       ProxyPassReverse / http://127.0.0.1:3000/

       SetEnv force-proxy-request-1.0 1
       SetEnv proxy-nokeepalive 1
   </VirtualHost>
</IfModule>

由于 CentOS 上的 Apache 真的是傻逼到不能再傻逼,所以在写好配置文件之后我们还需要:

  1. 前往 SSH 终端,执行一次 yum install mod_ssl
  2. 前往文件夹 /etc/httpd/conf.d,删除其中新添加的文件 ssl.conf
  3. 前往文件夹 /etc/httpd/conf,在文件 httpd.conf 的大约第四十三行 Listen 80 下方添加 Listen 443

完成三个步骤之后,在终端执行一次 service httpd restart,然后前往自己的域名即可。

基于 Apache,Ubuntu

相比于弱智 CentOS httpd,Ubuntu 上的反代配置就让人倍感轻松。
我们直接定位到 /etc/apache2/sites-enabled 目录,创建一个任意名字的 conf 文件,然后编辑其内容:

<VirtualHost *:443>
   # 邮箱、域名分别是你自己的邮箱和域名
   ServerAdmin test@test.com
   ServerName test.com
   # 两个证书路径和自己的证书文件名-路径对应好
   SSLEngine on
   SSLProxyEngine On
   SSLProxyVerify none
   SSLCertificateFile /home/test.com.crt
   SSLCertificateKeyFile /home/test.com.key
   # ProxyPassReverse 一定不能忘加,否则将无法访问
   ProxyPreserveHost On
   ProxyRequests Off
   ProxyPass /  http://127.0.0.1:3000/
   ProxyPassReverse / http://127.0.0.1:3000/
</VirtualHost>

确保证书位置正确,然后去 SSH 执行一次 sudo service apache2 restart 再访问域名就可以了。
对于宝塔玩家,配置个反代应该是再简单不过的事,这里我就不再进行赘述了。

添加新评论

点击评论者的头像,即可对其进行回复。