xChar
·2 months ago

前情提要

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

部署AList后端到你的服务器

寻找一篇AList部署教程,部署完毕后往下看

将AList映射到公网

如果你的服务器已经可以通过公网IP+端口访问到AList,请另寻教程开启SSL(家庭宽带建议使用v6+SSL实现延迟最小化)。下面教授如何使用Cloudflare Tunnels将AList映射到公网

  1. 前往Cloudflare One
  2. 选择 Networks -> Tunnels -> Create a Tunnel,跟着图走
    image

image

image
3. 根据你的操作系统下载对应的cloudflared软件并连接上你的新隧道
image
4. 创建公共主机名
image
5. 访问公共主机名,看是否能进入AList Web界面

部署AList前端到Cloudflare Pages

  1. Github - alist-org/alist-webFork到你的仓库
  2. 更改项目根目录的env.production文件为你的后端服务器地址
    image
  3. 将仓库克隆到本地,需要安装Git
使用SSH(需要持有你的Github SSH私钥):
git clone [email protected]:你的用户名/你Fork的仓库

使用HTTPS(Not Use Magic有概率SSL握手失败):
git clone [email protected]:你的用户名/你Fork的仓库
  1. 下载汉化包:AcoFork的网盘Crowdin - 需要登录
    image
  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 页面
    image
  2. 创建一个Pages,选择连接Git存储库
    image
  3. 选择你的存储库,开始设置
    image
  4. 构建命令输入:pnpm install && pnpm build,构建输出目录选择/dist
    image
  5. 等待Cloudflare构建结束,为Pages绑定自定义域
    image
  6. 访问自定义域,查看AList是否正常
    image

定制AList

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

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