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

Summary#

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 pull front-end files from cf edge nodes without cf origin, improving browsing experience. The backend still needs to be deployed on a server open to the public (Cloudflare Tunnels can be used if there is no public server).

Deploy AList Backend to Your Server#

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

Map AList to the Public Internet#

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 internet using Cloudflare Tunnels.

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

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 locally, you need to install Git:

Use SSH (requires your Github SSH private key):
git clone [email protected]:your-username/your-forked-repo

Use HTTPS (Not Use Magic may have a chance of SSL handshake failure):
git clone [email protected]:your-username/your-forked-repo

Download the Chinese localization package: AcoFork's cloud disk or Crowdin - login required
Unzip and copy the Zh-CN folder in 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 Cloudflare Dashboard and go to the Workers and Pages pages.
Create a new Pages and choose to connect to a Git repository.
Select your repository and start the setup.
Enter the build command: pnpm install && pnpm build, and choose /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.