Re Player を Cloudflare にデプロイする

01プロジェクト概要

Re Player はリンク型メディアライブラリ：ストレージサービスを直接マウントするのではなく、外部メディアのリンクを仮想ディレクトリとして登録し、訪問者側のプレイヤーが必要に応じて読み込みます。すべてのページと API は Cloudflare Workers 上の Astro がサーバーサイドレンダリングで生成し、データは Cloudflare D1 に書き込まれます。

02デプロイ方法の選び方

Re Player 本体は Cloudflare Workers 上で動作します。違いは「どうやってコードを Cloudflare へ届けるか」だけです。

動作環境

• Node.js ≥ 22（Astro 7 の要件）と npm。
• Cloudflare アカウント（無料プランで構いません。Workers と D1 のどちらにも無料枠があります）
• Git 連携方式では GitHub アカウント（リポジトリをご自分のアカウントへ Fork します）
• コマンドライン方式ではグローバルツールの追加インストールは不要で、npx wrangler がプロジェクト内の依存をそのまま利用します。

03事前準備

1. Cloudflare アカウントを登録

   dash.cloudflare.com を開いて登録・ログインします。無料プランでも Workers と D1 の無料枠が含まれており、個人利用には十分です。

2. Node.js 22 以上をインストール

   nodejs.org からインストーラーをダウンロードし、インストール後にターミナルでバージョンを確認します。22 未満だと Astro 7 のビルドに失敗します。

3. コードを取得

   リポジトリを clone するか、Releases から ZIP をダウンロードして展開します。Git 連携方式を使う場合は、先にリポジトリをご自分のアカウントへ Fork してから接続します。

4. （任意）Wrangler にログイン

   コマンドラインでリリースする場合のみ必要です。初回実行時にブラウザで認証ページが開くので、そのまま承認してください。

# 1. 環境の確認
node -v      # v22 以上が必要
npm -v

# 2. ソースコードの取得
git clone https://github.com/lircia/RP-Re_Player.git
cd RP-Re_Player
npm install

# 3. Cloudflare へログイン（コマンドラインでのリリース時のみ）
npx wrangler login

04Cloudflare Workers へデプロイ

これが最も手間のかからない方法です。リポジトリを Cloudflare に接続すれば、以後は push のたびに自動でビルド・公開されます。 過去のバージョンも記録として残るため、いつでもロールバックできます。

1. リポジトリを Fork

   github.com/lircia/RP-Re_Playerを開き、右上の「Fork」をクリックしてご自分のアカウントへ Fork します。後から設定をカスタマイズしたり、変更を commit したりしやすくなります。

2. Cloudflare で Workers アプリケーションを作成

   コンソール左側で「コンピューティングと AI」→「Workers と Pages」→「アプリケーションを作成」→ 「Workers」→「Import an existing Git repository / Connect to Git」を選択します。 初回は、画面の指示に従って Cloudflare が GitHub にアクセスすることを承認してください。

3. リポジトリと本番ブランチを選択

   Fork したリポジトリを選び、本番ブランチは既定の mainのままにします。

4. ビルドとデプロイの設定を確認

   ビルドコマンドは既定の npm run buildのままにします。デプロイコマンドは、アダプタが生成する設定ファイルを明示的に指定する必要があります （下の表を参照）。初回ビルドは 1〜3 分ほどかかります。

5. 保存してデプロイ

   完了すると <プロジェクト名>.workers.dev というアドレスが発行されます。 「設定 → ドメインとルート」から独自ドメインを割り当てることもできます。

6. D1 をバインドしたら再デプロイ

   データベースのバインディングは、それ以降のデプロイにのみ反映されます。先に第 06 節を完了してから、もう一度「デプロイを再試行」をクリックしてください。

05コマンドラインでのデプロイとローカルプレビュー

5.1 Wrangler CLI によるローカルからのリリース

ローカルにリポジトリを clone すれば、コマンド 1 つでビルドとリリースが完了します。ターミナル操作に慣れ、リリース工程を完全に掌握したい人に向いています。

git clone https://github.com/lircia/RP-Re_Player.git
cd RP-Re_Player
npm install

# ビルドして Cloudflare Workers へリリース
npm run cf:deploy

# 以下と同等：
# npm run build && wrangler deploy --config dist/server/wrangler.json

5.2 ローカル実行（任意）

手元で先に動作を確認したい場合は、 npm run local（Windows では Local.cmd をダブルクリックしても構いません）。 既定では 127.0.0.1 で HTTP 80 と HTTPS 443 サービスを提供します。 アドレスは soers.de5.netとして表示され、既定の管理者パスワードは masteradminです。

06D1 データベースの作成とバインド

D1 は疑似マウント情報、訪問者統計、設定を保存するために使います。D1 がなくても RP は動作します（自動的にメモリ保存へフォールバックします）が、 再起動や再デプロイのたびにデータが失われます。本番利用では必ずバインドしてください。

1. D1 データベースを作成

   コンソールで「ストレージとデータベース」→「D1 SQL データベース」→「データベースを作成」を選び、 名前には re-playを入力します（任意の名前で構いません）。ローカルでコマンドラインから作成することもできます。

2. database_id をコピー

   データベースの詳細ページを開き、データベース ID をコピーします。

3. プロジェクトの設定に書き込む

   ID を wrangler.toml に入力してリポジトリへ commit します。 Git 連携方式の場合は、コンソールの「設定 → バインディング」から直接 D1 バインディングを追加することもできます。 バインディング名は必ず DBのままにしてください。

4. 再デプロイ

   バインディングはデプロイ時にのみ反映されるため、必ずもう一度デプロイしてください（Git 連携方式では「デプロイを再試行」をクリックします）。

5. 確認

   /admin または /tableにアクセスすると、RP が必要なデータテーブルを自動で作成し、書き込みを開始します。

name = "rp"
compatibility_date = "2026-09-06"
keep_vars = true

[[d1_databases]]
binding = "DB"              # 必ず DB。名前を変えないこと
database_name = "re-play"      # あなたの D1 データベース名
database_id = "あなたの D1 データベース ID"

# データベースを作成（出力の database_id を wrangler.toml に記入）
npx wrangler d1 create re-play

# 既存のデータベース一覧を表示
npx wrangler d1 list

# データベースをバックアップ（更新前に実行を推奨）
npx wrangler d1 export re-play --remote --output backup.sql

RP が自動作成するデータテーブル

07環境変数

Workers プロジェクトの「設定 → 変数とシークレット」で追加するか、 wrangler.toml [vars] セクションで宣言します。すべての変数は再デプロイ後に反映されます。

[vars]
A  = ""                              # 訪問者ページを開く前に表示する外部メディアのアドレス
B  = "4.2"                           # A / C の最大表示時間／再生時間（秒）
C  = ""                              # A と同時に再生する任意の外部オーディオアドレス
N  = "Re Player"                     # サイト名
P  = "masteradmin"                   # 管理者パスワード。本番では必ず変更すること
US = "https://cloud.umami.is/script.js"
UI = ""
UH = ""
UD = ""

変数の優先順位

• keep_vars = true は Wrangler がコンソールで設定した変数を削除するのを防ぐため、 コンソールと wrangler.toml は共存できます。
• D1 が利用できる場合、RP は rp_settings 内の、空でないバインド済み短縮変数ごとに env:変数名 キーを書き込みます（キーがまだ存在しない場合のみ）。以後はデータベース内の値を優先的に読み取ります。
• つまり、管理画面で変更した値が再デプロイで上書きされることはありません。逆に、環境変数を変更しても反映されない場合は、 rp_settings に古い値が残っていないか確認してください。

08初回アクセスと管理画面

1. サイトを開く

   https://<プロジェクト名>.workers.dev（またはバインドした独自ドメイン）にアクセスします。 最初にイントロアニメーションが表示され、モバイルでは自動的に /Local へ遷移します。

2. 管理画面にログイン

   /admin を開き、変数 P で設定したパスワードでログインします（既定値は masteradmin）。

3. メディアをマウント

   管理画面で外部の動画 / 音声 / 画像リンクを仮想ディレクトリとファイルとして登録します。サイト名やテーマなどもここで設定します。

4. 統計を確認

   /table でアクセス・ディレクトリ・メディア・再生イベントを確認します。

09バージョン更新

1. まずデータベースをバックアップ

   D1 内のデータだけは再生成できないため、更新前に一度エクスポートしておくと安全です。

2. 最新のコードを取得

   コマンドライン方式では git pull。Git 連携方式ではコードを push するか、そのまま再デプロイすれば完了です。

3. 依存を更新して再リリース

   npm install を実行してから、もう一度ビルドしてデプロイします。

4. データ構造は自動でアップグレード

   RP は起動時にデータテーブルを自動で作成／アップグレードするため、手動で SQL を実行する必要はありません。

# 1. データベースをバックアップ
npx wrangler d1 export re-play --remote --output backup.sql

# 2. 最新のコードを取得して依存を更新
git pull
npm install

# 3. 再ビルドしてリリース
npm run cf:deploy

10よくある質問

11付録

11.1 プロジェクトのディレクトリ構成

RP-Re_Player
├── src/                        # ソースコード
│   ├── layouts/                # ページレイアウト
│   ├── lib/                    # ビジネスロジック（疑似マウント、字幕、歌詞、テーマなど）
│   ├── pages/                  # ルートページ
│   │   ├── api/                # API エンドポイント
│   │   │   ├── admin/          # 管理画面用エンドポイント
│   │   │   └── public/         # 訪問者向け公開エンドポイント
│   │   ├── Local/              # 訪問者向けメディアライブラリ
│   │   └── tree/               # ネイティブプレイヤー
│   ├── styles/                 # グローバル／テーマスタイル
│   └── types/                  # 型定義
├── public/                     # 静的アセット（フォント、アイコン、ポスター）
├── scripts/                    # ビルド／ローカル実行スクリプト
├── astro.config.mjs            # Astro 設定
├── wrangler.toml               # Cloudflare 設定
├── package.json                # プロジェクトの依存
└── LICENSE                     # MIT ライセンス

11.2 関連リンク