AcoFork

前情提要#

本教程不是 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，跟著圖走
   

3. 根據你的作業系統下載對應的 cloudflared 軟體並連接上你的新隧道

4. 建立公共主機名

5. 訪問公共主機名，看是否能進入 AList Web 介面

部署 AList 前端到 Cloudflare Pages#

1. 將Github - alist-org/alist-webFork 到你的倉庫
2. 更改專案根目錄的env.production檔案為你的後端伺服器地址
   
3. 將倉庫克隆到本地，需要安裝Git：

使用SSH（需要持有你的Github SSH私鑰）：
git clone git@github.com:你的使用者名稱/你Fork的倉庫

使用HTTPS（Not Use Magic有機率SSL握手失敗）：
git clone git@github.com:你的使用者名稱/你Fork的倉庫

5. 下載漢化包：AcoFork 的網盤或Crowdin - 需要登入
   
6. 解壓縮，將alist (zh-CN)\src\lang裡面的Zh-CN資料夾複製到倉庫下src/lang下
7. 編輯根目錄的.gitignore，新增一行!/src/lang/zh-CN/確保檔案不被忽略
8. 下載Nodejs。在根目錄打開終端，生成中文需要的檔案：

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

安裝依賴：
cnpm install --legacy-peer-deps

生成中文需要的檔案：
node .\scripts\i18n.mjs

9. 將更改提交到暫存區並提交到遠端倉庫，在根目錄打開終端

git add .   //將更改提交到暫存區
git commit -m 添加中文   //發布提交
git push -f   //強制將更改提交到遠端倉庫

10. 進入Cloudflare 儀表板，進入 Workers 和 Pages 頁面
    
11. 建立一個 Pages，選擇連接 Git 儲存庫
    
12. 選擇你的儲存庫，開始設定
    
13. 構建命令輸入：pnpm install && pnpm build，構建輸出目錄選擇/dist
    
14. 等待 Cloudflare 構建結束，為 Pages 綁定自定義域
    
15. 訪問自定義域，查看 AList 是否正常
    

定制 AList#

我們都知道 AList 支持自定義頭部和內容，但是因為 Cloudflare Pages 是一個靜態頁面，所以我們採用硬編碼方式，直接將需要自定義的內容寫入倉庫根目錄的index.html

1. 編輯根目錄的index.html
2. 將更改提交到暫存區並提交到遠端倉庫，在根目錄打開終端

git add .   //將更改提交到暫存區
git commit -m 你的提交摘要   //發布提交
git push -f   //強制將更改提交到遠端倉庫

3. Cloudflare Pages 會自動重新構建，等待新網頁構建完成即可