二叉树树

Summary#

This tutorial is not a serverless deployment of AList, but rather deploys the front-end page to Cloudflare Pages, allowing users to quickly pull front-end files from Cloudflare's edge nodes without going back to the origin, improving the browsing experience. The back-end still requires a server exposed to the public network to deploy AList (if there is no public server, Cloudflare Tunnels can be used).

First, ensure your back-end server supports dual-stack access (IPv4 and IPv6)#

1. Use Cloudflare Tunnel to tunnel through Cloudflare.

2. Set up A and AAAA records separately; it's troublesome. If your IP is fast, you might not need to separate the front and back ends. Exposing the origin's front and back ends cannot avoid DDoS attacks because your origin will be exposed in the HTTP message.

Then, officially deploy the AList front-end to Cloudflare Pages#

1. Fork the repository:

2. Change the env.production file in the project root directory to your back-end server address

3. Clone the repository to your local machine; you need to install Git:

Using SSH (you need to hold your Github SSH private key):
git clone git@github.com:your_username/your_forked_repository

Using HTTPS (there's a chance of SSL handshake failure in China):
git clone git@github.com:your_username/your_forked_repository

5. Download the localization package: AcoFork's cloud storage or Crowdin - login required
   

6. Unzip it, and copy the Zh-CN folder from alist (zh-CN)\src\lang to src/lang under the repository.

7. Edit the .gitignore in the root directory, adding a line !/src/lang/zh-CN/ to ensure the files are not ignored.

8. Download Node.js. Open a terminal in the root directory to 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

9. Stage the changes and commit to the remote repository; open a 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

10. Go to the Cloudflare Dashboard, and navigate to the Workers and Pages page

11. Create a Pages, and choose to connect to a Git repository

12. Select your repository and start the setup

13. Enter the build command: pnpm install && pnpm build, and choose the build output directory as /dist

14. Wait for Cloudflare to finish building, and bind a custom domain to Pages
    
15. Visit the custom domain to check if AList is functioning properly

Customizing AList#

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

1. Edit the index.html in the root directory.
2. Stage the changes and commit to the remote repository; open a 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

3. Cloudflare Pages will automatically rebuild; wait for the new webpage to finish building.