二叉树树

二叉树树

瞎几吧写

教你把AList的前端部署到CF Pages!让你的AList秒加载!

前情提要#

本教程不是 AList 的无服务器部署,仅将前端页面部署到 Cloudflare Pages,这样用户就能很快从 cf 的边缘节点拉取前端文件,而不用 cf 回源,提高浏览体验,后端仍然需要一台开放到公网的服务器部署 AList(无公网服务器可使用 Cloudflare Tunnels)

首先,保证你的后端服务器支持 v4v6 双栈访问#

  1. 使用 Cloudflare Tunnel,套 cf

  2. 分别设置 A 和 AAAA 解析,麻烦,如果你的 IP 很快,那其实可以不用前后端分离,暴露源站的前后端分离也不能避免被 DDoS,因为你的源站会在 HTTP 报文中暴露

然后,开始正式将 AList 前端部署到 Cloudflare Pages#

  1. Fork 仓库:
  1. 更改项目根目录的env.production文件为你的后端服务器地址

424a1a2f76edc52dd95a3f7924417d83

  1. 将仓库克隆到本地,需要安装Git
使用SSH(需要持有你的Github SSH私钥):
git clone git@github.com:你的用户名/你Fork的仓库

使用HTTPS(国内有概率SSL握手失败):
git clone git@github.com:你的用户名/你Fork的仓库
  1. 下载汉化包:AcoFork 的网盘Crowdin - 需要登录
    9ba7aa1a74a16f6d36d8980fde015afe

  2. 解压,将alist (zh-CN)\src\lang里面的Zh-CN文件夹复制到仓库下src/lang

  3. 编辑根目录的.gitignore,添加一行!/src/lang/zh-CN/确保文件不被忽略

  4. 下载Nodejs。在根目录打开终端,生成中文需要的文件:

安装cnpm:
npm install -g cnpm --registry=https://registry.npmmirror.com

安装依赖:
cnpm install --legacy-peer-deps

生成中文需要的文件:
node .\scripts\i18n.mjs
  1. 将更改提交到暂存区并提交到远程仓库,在根目录打开终端
git add .   //将更改提交到暂存区
git commit -m 添加中文   //发布提交
git push -f   //强制将更改提交到远程仓库
  1. 进入Cloudflare 仪表盘,进入 Workers 和 Pages 页面

caf5ecd7a74ddba4fd942fb3ae10ba3d

  1. 创建一个 Pages,选择连接 Git 存储库

2d7bf36b759a97e67e56d052b5a6d4ce

  1. 选择你的存储库,开始设置

d80fed72915e81c7a73dac5bde7f1f79

  1. 构建命令输入:pnpm install && pnpm build,构建输出目录选择/dist

b20b09629c6b7a37df858b830124eba6

  1. 等待 Cloudflare 构建结束,为 Pages 绑定自定义域
    ac186b18ebd6817268ffd61ca84cf842
  2. 访问自定义域,查看 AList 是否正常

16ed1a6d31f8bf143e7f8ecc61c59126

定制 AList#

我们都知道 AList 支持自定义头部和内容,但是因为 Cloudflare Pages 是一个静态页面,所以我们采用硬编码方式,直接将需要自定义的内容写入仓库根目录的index.html
169353a448f588c35afb6dcfb61b5929

  1. 编辑根目录的index.html
  2. 将更改提交到暂存区并提交到远程仓库,在根目录打开终端
git add .   //将更改提交到暂存区
git commit -m 你的提交摘要   //发布提交
git push -f   //强制将更改提交到远程仓库
  1. Cloudflare Pages 会自动重新构建,等待新网页构建完成即可

73aac2c2d49d8e795fa1c77eebfbbaf2

加载中...
此文章数据所有权由区块链加密技术和智能合约保障仅归创作者所有。