🚀 CMDワンクリックインストール＆Cloudflareデプロイガイド

本ガイドは、ターミナル（CMDまたはPowerShell）環境で自動化コマンド（npm run setup）を実行してCloudflareエッジインフラを構築し、管理者アプリとブログアプリを同時にデプロイ・同期する、最も簡単かつ安全な方法を案内します。

---

🛠️ 1. ワンクリックデプロイ自動化の紹介

SvelteKitブログエンジンは、複雑なサーバーリソースの生成や設定ファイルの編集プロセスを、ターミナル上の対話型インストールツールを通じて完全に自動化しました。

ブログのソースコードを解凍するか、git cloneでPCに保存した後、ターミナルを開いてプロジェクトのルートフォルダーに移動し、以下のコマンドを順番に実行するだけです。

# 必要なパッケージのインストール
npm install

• 依存関係ライブラリのインストール: ターミナルでnpm installを入力して、必要なパッケージをすべてインストールします。インストール完了後にセキュリティ警告（vulnerabilities）メッセージが表示された場合は、npm audit fixコマンドを実行して最新のセキュリティパッチを適用することをお勧めします。

パッケージのインストールが終わったらnpm run setupを実行します。ターミナル画面の案内に従って、以下のプロセスが自動的に処理されます。

• Cloudflareアカウントの簡単認証: クリック1回でデプロイアカウントの連携が完了します。
• DBおよびストレージリソースの生成: ブログ専用のD1データベース2個と画像保存用のKVストレージを自動的に新規生成します。
• 設定ファイルのリアルタイム更新: 生成されたデータベースの固有IDを検出し、モノレポの設定ファイル（wrangler.json）に自動的に注入します。
• データベースの初期データ注入: テーブルを生成し、選択したデフォルト言語に合わせてサンプル記事と基本環境設定情報を自動的に登録します。
• 環境変数とアクセス許可IPのアップロード: 管理者アクセス用に、デプロイ実行者の現在のパブリックIPアドレス（ALLOWED_IP）と管理者パスワードをクラウドへ自動送信します。
• 統合ビルドおよびWebサービスのデプロイ: ブログと管理者のSvelteKitプロジェクトを統合ビル드し、Cloudflare Pagesへ即時にアップロード・デプロイします。

---

📋 2. デプロイ前の確認事項

安全にインストールを開始する前に、以下の準備がすべて整っているかご確認ください。

1. Node.jsのインストール: パソコンでNode.js（バージョン22以上）が動作している必要があります。
2. Cloudflareアカウント: ブログサイトとデータベースをホスティングするCloudflareアカウント（無料枠で十分対応可能です）が必要です。
3. 環境変数ファイル（.dev.vars）の生成（必須）:
   • デプロイを開始する前に、apps/admin/フォルダとapps/blog/フォルダの配下に、それぞれ.dev.varsファイルを手動で作成する必要があります。
   • apps/admin/.dev.varsファイルには、ADMIN_PASSWORD=管理者ログインパスワードを記述します。
   • apps/blog/.dev.varsファイルには、BETTER_AUTH_SECRET=任意の文字列を記述します。

   • [!WARNING]
     これらの環境変数が設定されていない場合、npm run setupの実行直後に、正常な動作のためにインストールツールが中断されます。

---

⚙️ 3. npm run setup ステップ別解説

ターミナルを開き、ブログプロジェクトのルートディレクトリでnpm run setupを入力してEnterキーを押します。

Step 0. 環境変数の事前検査（Pre-Validation）

• 実行直後に、管理者およびブログフォルダ内の.dev.varsファイルと、必須の環境変数（ADMIN_PASSWORD、BETTER_AUTH_SECRET）が入力されているか検査します。
• 未入力の項目がある場合は、ガイドログを表示して終了しますので、事前に必ず記載しておいてください。

Step 1. デプロイプロジェクト名（ドメインURL）の設定

• 読者がブログにアクセスする際に使用するアドレス（例：[入力したプロジェクト名].pages.dev）を決定する段階です。
• デプロイターゲットであるブログと管理者の2つの名前を入力します。復元モード（--restore）で実行する場合、既存のバックアップ情報ファイル（wrangler.backup.json）から既存の名前を自動的に読み込んで設定します。

Step 2. Cloudflareアカウントのログイン認証

• Cloudflareの認証を確認します。すでにログイン履歴がある場合は、自動的にセッションを検出してこの手順をスキップします。
• ログインしていない場合は、ブラウザウィンドウが開き認証要求画面が表示されます。**[Allow / 許可]**をクリックしてアカウント連携を承認してください。
• セキュリティ情報：本自動化ツールは、インフラ生成およびデプロイに必要な最小限のアカウントAPI権限のみを要求するため、安心してお進みください。

Step 3. リソース生成および設定の連携

• 実際のサービス動作に必要なデータベースとメディアストレージをクラウドに生成する段階です。ターミナルの案内に従って、適切な番号を入力してください。
  1. 1（新規インストール / Fresh Install）: 以前に作成されたデータベースとストレージを完全に削除して新しく作成し直します。 既存のデータはすべて消去されるためご注意ください。
  2. 2（既存データの維持 / Keep Existing Data）[推奨]: すでに生成されたリソースがある場合、データを安全に保持したまま接続情報のみを紐付けます。
• 連携完了後、新しく発行されたDBおよびKVの固有IDがモノレポの各設定ファイル（wrangler.json）に自動的に反映されます。

Step 4. Webプロジェクトの事前生成

• デプロイの安定性を高めるため、Cloudflare Edge上に空のWebプロジェクトをあらかじめ登録・確保します。
• すでに同じ名前のアドレスが占有されている場合は、既存のアドレスを再利用して次のステップへ自動的に移行します。

Step 5. 環境変数のリモート同期

• ローカルで作成した.dev.vars内のマスターパスワードなどの秘密の値をCloudflareへ安全にアップロードして同期します。
• アクセス許可IPの自動登録: 特にこの段階で、デプロイを実行している管理者PCのパブリックIPアドレスをリアルタイムで検出し、ALLOWED_IP変数として自動的に注入します。これにより、デプロイ直後の初回ログイン時にIP制限でアクセスできなくなる事態を防ぎます。

Step 6. データベーステーブルの構築＆デフォルトテーマの設定

• ブログ機能の動作に必要なDBテーブルを構築し、初期設定値を移植します。
• 画面の案内に従って使用するデフォルトの言語（韓国語、英語、日本語）を選択すると、翻訳システムが構築され、サンプルカテゴリ、ヘッダーメニューの骨組み、およびデフォルトのウェルカム記事が自動的に設定されます。

Step 7. Webサービスのビルド＆最終デプロイ

• モノレポ全体のアプリの統合ビルドを実行し、Cloudflareサーバーへのデプロイコマンドを自動実行してインストールプロセスを完了します。デプロイが完了すると、ブログと管理者のPagesアクセス用URLが表示されます。

---

[!TIP]

💡 環境変数の自動設定と即時アクセスサポート

本プロジェクトのインストールプロセスは、リソースの生成からWebプロジェクトの確保、環境変数の送信までを一貫して処理します。
デプロイ完了と同時に、ログインパスワードやIPアクセス許可設定がリモートサーバーに設定されるため、追加の手動操作なしで即座に動作します。

---

🔄 4. ブログのアップデートとデータ復元デプロイ（npm run restore）

ブログの運用中に新しいパッチバージョンやバグが修正された最新リリースのコードが配布された際、これまでに作成した記事データやアドレスを失うことなく、新しいコードへ安全に画面を差し替える方法です。

💡 新バージョン移行の4ステップ手順

管理者のデータバックアップと**npm run restore**コマンドを使用すれば、データ消失のリスクなく安全にアップグレードを完了できます。

1. [ステップ1] 既存データおよびデプロイ設定のバックアップ:
   • 稼働中の管理者アプリの**コンテンツバックアップメニュー、およびデザインエディタ**メニューの下部バックアップセクションから、記事データとテーマデザイン設定をそれぞれパソコンへダウンロードします。
   • また、**コンテンツバックアップ**メニューの「設定バックアップダウンロード」ボタンをクリックして、[wrangler.backup.json]ファイルをPCに保存します。（これは、既存の運用データベースの固有ID連携を維持するための最も重要なファイルです。）
2. [ステップ2] 新コードの分離テスト:
   • 新しく入手した新バージョンのコードフォルダ配下でnpm run setupを実行し、テスト用の仮DBとテスト用のPages仮デプロイ名を入力して別個にデプロイします。
   • 仮デプロイされた新しい管理者にログインし、ステップ1で保存したバックアップデータファイルをインポートして、データが正常に読み込まれるか事前に確認します。
3. [ステップ3] 既存の運用サーバーへのバインディング復元（npm run restore）:
   • 検証が終了したら、新バージョンプロジェクトのルートディレクトリに、ステップ1で保存したwrangler.backup.jsonファイルをコピーして貼り付けます。
   • ターミナルで**npm run restoreコマンドを実行します。スクリプトがバックアップファイルに記述された既存の運用DBおよびKVの固有ID情報**を読み込み、新しいコードの設定ファイルへ上書きの形で自動接続します。
4. [ステップ4] スキーマ同期と上書きデプロイ:
   • 復元スクリプトは既存の運用DBのテーブル構造スキーマのみを安全に最新仕様へ更新するため、すでに蓄積されている実際の記事やデータは破損または削除されず完璧に保持されます。
   • 続いて、npm run deploy:blogとnpm run deploy:adminをそれぞれ実行します。使用していたドメインそのままで、最新にアップグレードされたブログシステムが安全に上書きデプロイされます。

---

📦 5. バックアップファイルの種類と機能

管理者のバックアップメニューで安全にインポートおよびエクスポートできる各ファイルの役割は、以下の表をご参照ください。

バックアップファイルの種類	抽出経路	フォルダ・ファイル名（推奨）	機能・保存内容
1. コンテンツDBデータ	コンテンツバックアップ メニュー	blog-content-backup-[日付].json	作成されたすべてのブログ記事本文、作成済みのカテゴリ情報、タグ一覧、および基本的なシステム設定値を保存
2. デプロイ設定バックアップ	コンテンツバックアップ メニュー	wrangler.backup.json	Cloudflare D1 DBおよびKVストレージ連携に必要なデプロイ名と固有のUUID情報を安全に保存（サーバー移行時に必須）
3. メディアファイルバックアップ	コンテンツバックアップ メニューの「メディアバックアップと復元」セクション、または メディアライブラリ メニュー右上の「[バックアップ / 復元]」ボタン	[ストレージ名]-images-backup-[日付].zip (例: r2-images-backup-[日付].zip)	有効化されている画像ストレージ（R2、Supabaseなど）にアップロードされたすべての画像ファイルをZIP形式で圧縮ダウンロードして保存
4. デザイン設定バックアップ	デザインエディタ メニュー下部	blog-design-backup-[日付].json	デザインエディタで設定したブログのテーマカラー情報、背景タイプ、およびデバイス別（PC/モバイル）のウィ젯配置構造を保存
5. システム全体のバックアップ	サイト設定 メニュー下部	full-system-backup-[日付].json	2つのデータベース（BLOG_DB, USER_DB）内のすべてのテーブルの元データを1つのJSONファイルにまとめ、全体のバックアップおよび復元を実行