前情提要#
本教程では AList のサーバーレスデプロイではなく、フロントエンドページを Cloudflare Pages にデプロイします。これにより、ユーザーは cf のエッジノードからフロントエンドファイルを迅速に取得でき、cf からのリソース取得を避け、ブラウジング体験を向上させます。バックエンドには、AList をデプロイするためにパブリックにアクセス可能なサーバーが必要です（パブリックサーバーがない場合は Cloudflare Tunnels を使用できます）。
まず、バックエンドサーバーが v4v6 デュアルスタックアクセスをサポートしていることを確認します#
-
Cloudflare Tunnel を使用し、cf を設定します。
-
A と AAAA の DNS レコードをそれぞれ設定します。面倒ですが、IP がすぐに取得できる場合は、フロントエンドとバックエンドを分離する必要はありません。ソースのフロントエンドとバックエンドを公開しても DDoS 攻撃を回避することはできません。なぜなら、ソースは HTTP メッセージ内で公開されるからです。
次に、AList のフロントエンドを Cloudflare Pages に正式にデプロイします#
- リポジトリをフォークします：
- プロジェクトのルートディレクトリにある
env.productionファイルをバックエンドサーバーのアドレスに変更します
- リポジトリをローカルにクローンします。 Git をインストールする必要があります：
SSH を使用する場合（GitHub SSH プライベートキーを持っている必要があります）：
git clone git@github.com:あなたのユーザー名/あなたがフォークしたリポジトリ
HTTPS を使用する場合（国内では SSL ハンドシェイクが失敗する可能性があります）：
git clone git@github.com:あなたのユーザー名/あなたがフォークしたリポジトリ
-
日本語化パッケージをダウンロードします：AcoFork のネットワークドライブ または Crowdin - ログインが必要
-
解凍し、
alist (zh-CN)\src\lang内のZh-CNフォルダーをリポジトリのsrc/langにコピーします。 -
ルートディレクトリの
.gitignoreを編集し、!/src/lang/zh-CN/の行を追加してファイルが無視されないようにします。 -
Nodejs をダウンロードします。ルートディレクトリでターミナルを開き、中国語に必要なファイルを生成します：
cnpm をインストールします：
npm install -g cnpm --registry=https://registry.npmmirror.com
依存関係をインストールします：
cnpm install --legacy-peer-deps
中国語に必要なファイルを生成します：
node .\scripts\i18n.mjs
- 変更をステージングエリアに追加し、リモートリポジトリにコミットします。ルートディレクトリでターミナルを開きます。
git add . //変更をステージングエリアに追加
git commit -m 中国語を追加 //コミットを発行
git push -f //強制的に変更をリモートリポジトリにプッシュ
- Cloudflare ダッシュボード にアクセスし、Workers と Pages ページに移動します。
- Pages を作成し、Git リポジトリに接続します。
- あなたのリポジトリを選択し、設定を開始します。
- ビルドコマンドに
pnpm install && pnpm buildを入力し、ビルド出力ディレクトリを/distに選択します。
- Cloudflare のビルドが終了するのを待ち、Pages にカスタムドメインをバインドします。
- カスタムドメインにアクセスし、AList が正常に動作しているか確認します。
AList のカスタマイズ#
私たちは AList がカスタムヘッダーとコンテンツをサポートしていることを知っていますが、Cloudflare Pages は静的ページであるため、ハードコーディング方式を採用し、カスタマイズする必要があるコンテンツをリポジトリのルートディレクトリの
index.htmlに直接記述します。
- ルートディレクトリの
index.htmlを編集します。 - 変更をステージングエリアに追加し、リモートリポジトリにコミットします。ルートディレクトリでターミナルを開きます。
git add . //変更をステージングエリアに追加
git commit -m あなたのコミットメッセージ //コミットを発行
git push -f //強制的に変更をリモートリポジトリにプッシュ
- Cloudflare Pages は自動的に再構築され、新しいウェブページの構築が完了するのを待ちます。