何ですか？CloudflareがAListを遅くしている？フロントエンドをPagesにデプロイする方法を教えます！オリジンへのリクエストを拒否します！

前情提要#

本教程不是 AList のサーバーレスデプロイで、フロントエンドページを Cloudflare Pages にデプロイするだけです。これにより、ユーザーは cf のエッジノードからフロントエンドファイルを高速に取得できるため、cf へのソースリクエストが不要になり、ブラウジング体験が向上します。バックエンドは引き続き、パブリックネットワークに公開されたサーバーに AList をデプロイする必要があります（パブリックネットワークサーバーがない場合は、Cloudflare Tunnels を使用できます）。

AList バックエンドをサーバーにデプロイする#

AList のデプロイチュートリアルを見つけて、完了したら次に進んでください。

AList をパブリックネットワークにマッピングする#

サーバーがパブリック IP + ポートで AList にアクセスできる場合は、SSL を有効にするための別のチュートリアルを探してください（家庭用ブロードバンドでは、v6+SSL を使用して遅延を最小限に抑えることをお勧めします）。以下では、Cloudflare Tunnels を使用して AList をパブリックネットワークにマッピングする方法を説明します。

Cloudflare Oneにアクセスします。
ネットワーク -> トンネル -> トンネルの作成に移動し、画像の指示に従います。

3. 操作システムに応じて、対応する cloudflared ソフトウェアをダウンロードして新しいトンネルに接続します。

4. パブリックホスト名を作成します。

5. パブリックホスト名にアクセスして、AList Web インターフェースに入ることができるか確認します。

AList フロントエンドを Cloudflare Pages にデプロイする#

Github - alist-org/alist-webをフォークしてリポジトリに追加します。
プロジェクトのルートディレクトリのenv.productionファイルをバックエンドサーバーのアドレスに変更します。
リポジトリをローカルにクローンし、Gitをインストールする必要があります：

SSHを使用する場合（Github SSHプライベートキーが必要です）：
git clone [email protected]:your-username/your-forked-repo

HTTPSを使用する場合（Not Use MagicではSSLハンドシェイクが失敗する可能性があります）：
git clone [email protected]:your-username/your-forked-repo

翻訳パッケージをダウンロードします：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 ページに移動します。
ページを作成し、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 は自動的に再ビルドされ、新しいウェブページが構築されるのを待ちます。