What? Cloudflare proxy AList is too slow? Teach you how to deploy the front end to Pages! Reject origin pull!

Introduction#

This tutorial is not about deploying AList's serverless deployment, but only about deploying the front-end page to Cloudflare Pages. This allows users to quickly fetch front-end files from cf's edge nodes without cf sourcing, improving the browsing experience. The backend still requires a server deployed on the public network to deploy AList (Cloudflare Tunnels can be used if there is no public network server).

Deploy AList Backend to Your Server#

Find an AList deployment tutorial and follow it to complete the deployment.

Map AList to the Public Network#

If your server can already access AList through a public IP + port, please find another tutorial to enable SSL (home broadband is recommended to use v6+SSL to minimize latency). The following teaches how to map AList to the public network using Cloudflare Tunnels.

Go to Cloudflare One.
Select Networks -> Tunnels -> Create a Tunnel and follow the instructions in the image.

3. Download the corresponding cloudflared software for your operating system and connect to your new tunnel.

4. Create a public hostname.

5. Access the public hostname to see if you can enter the AList web interface.

Deploy AList Frontend to Cloudflare Pages#

Fork Github - alist-org/alist-web to your repository.
Change the env.production file in the project root directory to your backend server address.
Clone the repository to your local machine. You need to install Git:

Use SSH (requires your Github SSH private key):
git clone git@github.com:your-username/your-forked-repo

Use HTTPS (Not Use Magic may have a chance of SSL handshake failure):
git clone git@github.com:your-username/your-forked-repo

Download the localization package: AcoFork's Network Disk or Crowdin - login required
Unzip and copy the Zh-CN folder inside alist (zh-CN)\src\lang to src/lang in the repository.
Edit the .gitignore file in the root directory and add a line !/src/lang/zh-CN/ to ensure that the file is not ignored.
Download Nodejs. Open the terminal in the root directory and generate the files needed for Chinese:

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

Install dependencies:
cnpm install --legacy-peer-deps

Generate files needed for Chinese:
node .\scripts\i18n.mjs

Stage and commit the changes to the remote repository. Open the terminal in the root directory.

git add .   // Stage the changes
git commit -m "Add Chinese"   // Commit the changes
git push -f   // Force push the changes to the remote repository

Go to the Cloudflare Dashboard and go to the Workers and Pages pages.
Create a new Pages and select Connect to a Git repository.
Choose your repository and start the setup.
Enter the build command: pnpm install && pnpm build, and select /dist as the build output directory.
Wait for Cloudflare to finish building and bind a custom domain to the Pages.
Access the custom domain to see if AList is working properly.

Customize AList#

We all know that AList supports custom headers and content, but because Cloudflare Pages is a static page, we use hard-coded methods to directly write the content that needs to be customized into the index.html file in the root directory of the repository.

Edit the index.html file in the root directory.
Stage and commit the changes to the remote repository. Open the terminal in the root directory.

git add .   // Stage the changes
git commit -m "Your commit summary"   // Commit the changes
git push -f   // Force push the changes to the remote repository

Cloudflare Pages will automatically rebuild. Wait for the new webpage to finish building.