📑 目次

• Action自動デプロイ
  • バックエンド自動デプロイ
  • フロントエンド自動デプロイ
• 手動デプロイ
  • バックエンド手動デプロイ
  • フロントエンド手動デプロイ
• ClawCloud CloudPasteデプロイチュートリアル

Action自動デプロイ

GitHub Actionsを使用すると、コードプッシュ後にアプリケーションを自動的にデプロイできます。

GitHubリポジトリの設定

1. リポジトリをフォークまたはクローン https://github.com/ling-drag0n/CloudPaste
2. GitHubリポジトリ設定に移動
3. Settings → Secrets and variables → Actions → New Repository secretsに移動
4. 以下のSecretsを追加:

Cloudflare APIトークンの取得

1. Cloudflareダッシュボードにアクセス

2. 新しいAPIトークンを作成

3. "Edit Cloudflare Workers"テンプレートを選択し、D1データベース編集権限を追加

   

バックエンド自動デプロイ

リポジトリをフォークし、secretsを入力後、ワークフローを実行!!! backendディレクトリ内のファイルが変更され、mainまたはmasterブランチにプッシュされると、デプロイが自動的にトリガーされます。ワークフローは以下のように進行します:

1. D1データベースを自動的に作成（存在しない場合）
2. schema.sqlでデータベースを初期化（テーブルと初期データを作成）
3. ENCRYPTION_SECRET環境変数を設定（GitHub Secretsから取得または自動生成）
4. WorkerをCloudflareに自動デプロイ
5. 元のCloudflareドメインを置き換えるカスタムドメインを設定することを推奨（特定の地域ではアクセスできない可能性があるため）

⚠️ バックエンドドメイン名を覚えておいてください

フロントエンド自動デプロイ

Cloudflare Pages（推奨）

リポジトリをフォークし、secretsを入力後、ワークフローを実行。 frontendディレクトリ内のファイルが変更され、mainまたはmasterブランチにプッシュされると、デプロイが自動的にトリガーされます。デプロイ後、Cloudflare Pagesコントロールパネルで環境変数を設定する必要があります:

1. Cloudflareダッシュボードにログイン

2. Pages → プロジェクト（例: "cloudpaste-frontend"）に移動

3. "Settings" → "Environment variables"をクリック

4. 環境変数を追加:

   • 名前: VITE_BACKEND_URL

   • 値: バックエンドWorker URL（例: https://cloudpaste-backend.your-username.workers.dev）末尾の"/"なし。カスタムWorkerバックエンドドメインの使用を推奨。

   • 必ず完全なバックエンドドメイン名を"https://xxxx.com"形式で入力してください

5. 重要なステップ: その後、フロントエンドワークフローを再度実行し、バックエンドドメインの読み込みを完了!!!

   

手順を厳密に守ってください、そうしないとバックエンドドメインの読み込みに失敗します

Vercel

Vercelの場合、以下のようにデプロイすることを推奨:

1. フォーク後、GitHubプロジェクトをインポート
2. デプロイパラメータを設定:

Framework Preset: Vite
Build Command: npm run build
Output Directory: dist
Install Command: npm install

3. 以下の環境変数を設定: VITE_BACKEND_URLとバックエンドドメインを入力
4. "Deploy"ボタンをクリックしてデプロイ

☝️ 上記の方法のいずれかを選択

手動デプロイ

バックエンド手動デプロイ

1. リポジトリをクローン

git clone https://github.com/ling-drag0n/CloudPaste.git
cd CloudPaste/backend

2. 依存関係をインストール

   npm install
   

3. Cloudflareにログイン

   npx wrangler login
   

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

   npx wrangler d1 create cloudpaste-db
   

   出力からデータベースIDをメモ。

5. wrangler.toml設定を修正

   [[d1_databases]]
   binding = "DB"
   database_name = "cloudpaste-db"
   database_id = "YOUR_DATABASE_ID"
   

6. Workerをデプロイ

   npx wrangler deploy
   

   出力からURLをメモ; これがバックエンドAPIアドレス。

7. データベースを初期化（自動） Worker URLにアクセスして初期化をトリガー:

   https://cloudpaste-backend.your-username.workers.dev
   

⚠️ セキュリティリマインダー: システム初期化後、すぐにデフォルト管理者パスワードを変更してください（ユーザー名: admin、パスワード: admin123）。

フロントエンド手動デプロイ

Cloudflare Pages

1. フロントエンドコードを準備

   cd CloudPaste/frontend
   npm install
   

2. 環境変数を設定 .env.productionファイルを作成または修正:

   VITE_BACKEND_URL=https://cloudpaste-backend.your-username.workers.dev
   VITE_APP_ENV=production
   VITE_ENABLE_DEVTOOLS=false
   

3. フロントエンドプロジェクトをビルド

   npm run build
   

   ビルド時は注意！ !

4. Cloudflare Pagesにデプロイ

   方法1: Wrangler CLI経由

   npx wrangler pages deploy dist --project-name=cloudpaste-frontend
   

   方法2: Cloudflareダッシュボード経由

   1. Cloudflareダッシュボードにログイン
   2. "Pages"を選択
   3. "Create a project" → "Direct Upload"をクリック
   4. distディレクトリからファイルをアップロード
   5. プロジェクト名を設定（例: "cloudpaste-frontend"）
   6. "Save and Deploy"をクリック

Vercel

1. フロントエンドコードを準備

   cd CloudPaste/frontend
   npm install
   

2. Vercel CLIをインストールしてログイン

   npm install -g vercel
   vercel login
   

3. 環境変数を設定、Cloudflare Pagesと同じ

4. ビルドしてデプロイ

   vercel --prod
   

   プロンプトに従ってプロジェクトを設定。

ClawCloud CloudPasteデプロイチュートリアル

月間10GB無料トラフィック、軽量使用のみに適しています

ステップ1:

登録リンク: Claw Cloud（#AFFなし） クレジットカード不要、GitHub登録日が180日以上であれば、毎月$5クレジットを獲得。

ステップ2:

登録後、ホームページでAPP Launchpadをクリックし、右上のcreate appをクリック

ステップ3:

まずバックエンドをデプロイ、図を参照（参考のみ）:

バックエンドデータストレージはこちら:

ステップ4:

次にフロントエンド、図を参照（参考のみ）:

デプロイ完了、使用可能、必要に応じてカスタムドメインを設定

📑 目次

• Dockerコマンドラインデプロイ
  • バックエンドDockerデプロイ
  • フロントエンドDockerデプロイ
• Docker Composeワンクリックデプロイ

Dockerコマンドラインデプロイ

バックエンドDockerデプロイ

CloudPasteバックエンドは公式Dockerイメージで迅速にデプロイ可能。

1. データストレージディレクトリを作成

   mkdir -p sql_data
   

2. バックエンドコンテナを実行

   docker run -d --name cloudpaste-backend \
     -p 8787:8787 \
     -v $(pwd)/sql_data:/data \
     -e ENCRYPTION_SECRET=your-encryption-key \
     -e NODE_ENV=production \
     -e RUNTIME_ENV=docker \
     dragon730/cloudpaste-backend:latest
   

   デプロイURL（例: http://your-server-ip:8787）をメモ、フロントエンドデプロイ時に必要。

⚠️ セキュリティヒント: ENCRYPTION_SECRETをカスタマイズし、安全に保管してください。このキーは機密データの暗号化に使用されます。

フロントエンドDockerデプロイ

フロントエンドはNginxを使用してサービスを提供し、起動時にバックエンドAPIアドレスを設定。

docker run -d --name cloudpaste-frontend \
  -p 80:80 \
  -e BACKEND_URL=http://your-server-ip:8787 \
  dragon730/cloudpaste-frontend:latest

⚠️ 注意: BACKEND_URLには完全なURL（プロトコルhttp://またはhttps://を含む）を含める必要があります ⚠️ セキュリティリマインダー: システム初期化後、すぐにデフォルト管理者パスワードを変更してください（ユーザー名: admin、パスワード: admin123）。

Dockerイメージ更新

プロジェクトの新しいバージョンがリリースされた場合、以下の手順でDockerデプロイを更新:

1. 最新イメージをプル

   docker pull dragon730/cloudpaste-backend:latest
   docker pull dragon730/cloudpaste-frontend:latest
   

2. 古いコンテナを停止して削除

   docker stop cloudpaste-backend cloudpaste-frontend
   docker rm cloudpaste-backend cloudpaste-frontend
   

3. 上記と同じrunコマンドで新しいコンテナを起動（データディレクトリと設定を保持）

Docker Composeワンクリックデプロイ

Docker Composeを使用すると、フロントエンドとバックエンドサービスをワンクリックでデプロイ可能。最も簡単な推奨方法。

1. docker-compose.ymlファイルを作成

version: "3.8"

services:
  frontend:
    image: dragon730/cloudpaste-frontend:latest
    environment:
      - BACKEND_URL=https://xxx.com # Fill in the backend service address
    ports:
      - "8080:80" #"127.0.0.1:8080:80"
    depends_on:
      - backend # Depends on backend service
    networks:
      - cloudpaste-network
    restart: unless-stopped

  backend:
    image: dragon730/cloudpaste-backend:latest
    environment:
      - NODE_ENV=production
      - RUNTIME_ENV=docker
      - PORT=8787
      - ENCRYPTION_SECRET=custom-key # Please modify this to your own security key
    volumes:
      - ./sql_data:/data # Data persistence
    ports:
      - "8787:8787" #"127.0.0.1:8787:8787"
    networks:
      - cloudpaste-network
    restart: unless-stopped

networks:
  cloudpaste-network:
    driver: bridge

2. サービスを開始

docker-compose up -d

⚠️ セキュリティリマインダー: システム初期化後、すぐにデフォルト管理者パスワードを変更してください（ユーザー名: admin、パスワード: admin123）。

3. サービスにアクセス

フロントエンド: http://your-server-ip:80 バックエンド: http://your-server-ip:8787

Docker Compose更新

新しいバージョンに更新する必要がある場合:

1. 最新イメージをプル

   docker-compose pull
   

2. 新しいイメージを使用してコンテナを再作成（データボリュームを保持）

   docker-compose up -d --force-recreate
   

💡 ヒント: 設定変更がある場合、データをバックアップし、docker-compose.ymlファイルを修正する必要があるかもしれません

Nginxリバースプロキシ例

server {
    listen 443 ssl;
    server_name paste.yourdomain.com;  # Replace with your domain name

    # SSL certificate configuration
    ssl_certificate     /path/to/cert.pem;  # Replace with certificate path
    ssl_certificate_key /path/to/key.pem;   # Replace with key path

    # Frontend proxy configuration
    location / {
        proxy_pass http://localhost:80;  # Docker frontend service address
        proxy_set_header Host $host;
        proxy_set_header X-Real-IP $remote_addr;
    }

    # Backend API proxy configuration
    location /api {
        proxy_pass http://localhost:8787;  # Docker backend service address
        proxy_set_header Host $host;
        proxy_set_header X-Real-IP $remote_addr;
        client_max_body_size 0;

        # WebSocket support (if needed)
        proxy_http_version 1.1;
        proxy_set_header Upgrade $http_upgrade;
        proxy_set_header Connection "upgrade";
    }

    # WebDAV Configuration
    location /dav {
        proxy_pass http://localhost:8787/dav;  # Points to your backend service

        # WebDAV necessary headers
        proxy_set_header Host $host;
        proxy_set_header X-Real-IP $remote_addr;
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;

        # WebDAV method support
        proxy_pass_request_headers on;

        # Support all WebDAV methods
        proxy_method $request_method;

        # Necessary header processing
        proxy_set_header Destination $http_destination;
        proxy_set_header Overwrite $http_overwrite;

        # Handle large files
        client_max_body_size 0;

        # Timeout settings
        proxy_connect_timeout 3600s;
        proxy_send_timeout 3600s;
        proxy_read_timeout 3600s;
    }
}

⚠️ セキュリティヒント: セキュリティ強化のため、HTTPSとリバースプロキシ（Nginxなど）の設定を推奨。

R2 APIの取得とクロスオリジン設定

1. Cloudflareダッシュボードにログイン

2. R2ストレージをクリックし、バケットを作成

3. APIトークンを作成

4. 作成後、すべてのデータを保存（後で必要になります）

5. クロスオリジンルールを設定：対応するバケットをクリックし、設定→CORSポリシーを以下のように編集

[
  {
    "AllowedOrigins": ["http://localhost:3000", "https://replace-with-your-frontend-domain"],
    "AllowedMethods": ["GET", "PUT", "POST", "DELETE", "HEAD"],
    "AllowedHeaders": ["*"],
    "ExposeHeaders": ["ETag"],
    "MaxAgeSeconds": 3600
  }
]

B2 APIの取得とクロスオリジン設定

1. B2アカウントをお持ちでない場合、まず登録してからバケットを作成

2. サイドバーでApplication Keyをクリック、Create Keyをクリックし、図示に従って設定

3. B2クロスオリジンを設定（B2のクロスオリジン設定は複雑なので注意）

4. まずオプション1または2を試し、アップロードページでアップロード可能か確認。F12コンソールにクロスオリジンエラーが表示される場合はオプション3を使用。恒久的な解決策として直接オプション3を使用することも可能

   

オプション3の設定について、パネルでは設定できないため、B2 CLIツールをダウンロードして手動で設定する必要があります。詳細は「https://docs.cloudreve.org/zh/usage/storage/b2」を参照してください。

ダウンロード後、対応するダウンロードディレクトリでCMDを開き、以下のコマンドを入力：

b2-windows.exe account authorize   //Log in to your account, following prompts to enter your keyID and applicationKey
b2-windows.exe bucket get <bucketName> //You can execute to get bucket information, replace <bucketName> with your bucket name

Windows設定では「.\b2-windows.exe xxx」を使用、 Python CLIも同様：

b2-windows.exe bucket update <bucketName> allPrivate --cors-rules "[{\"corsRuleName\":\"CloudPaste\",\"allowedOrigins\":[\"*\"],\"allowedHeaders\":[\"*\"],\"allowedOperations\":[\"b2_upload_file\",\"b2_download_file_by_name\",\"b2_download_file_by_id\",\"s3_head\",\"s3_get\",\"s3_put\",\"s3_post\",\"s3_delete\"],\"exposeHeaders\":[\"Etag\",\"content-length\",\"content-type\",\"x-bz-content-sha1\"],\"maxAgeSeconds\":3600}]"

をバケット名に置き換えてください。クロスオリジン許可のallowedOriginsは必要に応じて設定可能（ここではすべてを許可しています）。

5. クロスオリジン設定完了

MinIO APIアクセスとクロスオリジン設定

1. MinIOサーバーのデプロイ

   以下のDocker Compose設定（参考）を使用してMinIOを迅速にデプロイ：

   version: "3"
   
   services:
     minio:
       image: minio/minio:RELEASE.2025-02-18T16-25-55Z
       container_name: minio-server
       command: server /data --console-address :9001 --address :9000
       environment:
         - MINIO_ROOT_USER=minioadmin # 管理者ユーザー名
         - MINIO_ROOT_PASSWORD=minioadmin # 管理者パスワード
         - MINIO_BROWSER=on
         - MINIO_SERVER_URL=https://minio.example.com # S3 APIアクセスURL
         - MINIO_BROWSER_REDIRECT_URL=https://console.example.com # コンソールアクセスURL
       ports:
         - "9000:9000" # S3 APIポート
         - "9001:9001" # コンソールポート
       volumes:
         - ./data:/data
         - ./certs:/root/.minio/certs # SSL証明書（必要な場合）
       restart: always
   

   docker-compose up -dを実行してサービスを開始。

2. リバースプロキシ設定（参考）

   MinIOが正常に機能するため、特にファイルプレビューについては、リバースプロキシを適切に設定する必要があります。推奨されるOpenResty/Nginx設定：

   MinIO S3 APIリバースプロキシ（minio.example.com）:

   location / {
       proxy_pass http://127.0.0.1:9000;
       proxy_set_header Host $host;
       proxy_set_header X-Real-IP $remote_addr;
       proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
       proxy_set_header X-Forwarded-Proto $scheme;
   
       # HTTP最適化
       proxy_http_version 1.1;
       proxy_set_header Connection "";  # HTTP/1.1 keepaliveを有効化
   
       # 重要：403エラー＆プレビュー問題の解決
       proxy_cache off;
       proxy_buffering off;
       proxy_request_buffering off;
   
       # ファイルサイズ制限なし
       client_max_body_size 0;
   }
   

   MinIOコンソールリバースプロキシ（console.example.com）:

   location / {
       proxy_pass http://127.0.0.1:9001;
       proxy_set_header Host $host;
       proxy_set_header X-Real-IP $remote_addr;
       proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
       proxy_set_header X-Forwarded-Proto $scheme;
   
       # WebSocketサポート
       proxy_http_version 1.1;
       proxy_set_header Upgrade $http_upgrade;
       proxy_set_header Connection "upgrade";
   
       # 重要設定
       proxy_cache off;
       proxy_buffering off;
   
       # ファイルサイズ制限なし
       client_max_body_size 0;
   }
   

3. コンソールにアクセスしてバケット＆アクセスキーを作成

   詳細設定については公式ドキュメントを参照：
   https://min.io/docs/minio/container/index.html
   CN: https://min-io.cn/docs/minio/container/index.html

   

4. 追加設定（オプション）

   許可されたオリジンにはフロントエンドドメインを含める必要があります。
   

5. CloudPasteでMinIOを設定

   • CloudPaste管理パネルにログイン
   • 「S3ストレージ設定」→「ストレージ設定を追加」に移動
   • プロバイダーとして「その他のS3互換サービス」を選択
   • 詳細を入力：
     • 名前：カスタム名
     • エンドポイントURL：MinIOサービスURL（例：https://minio.example.com）
     • バケット名：事前に作成したバケット
     • アクセスキーID：アクセスキー
     • シークレットキー：シークレットキー
     • リージョン：空のまま
     • パススタイルアクセス：必ず有効化！
   • 「接続テスト」をクリックして確認
   • 設定を保存

6. トラブルシューティング

   • 注意：CloudflareのCDNを使用している場合、proxy_set_header Accept-Encoding "identity"を追加する必要がある場合があり、キャッシュ問題も考慮する必要があります。DNS解決のみを使用することを推奨します。
   • 403エラー：リバースプロキシにproxy_cache offとproxy_buffering offが含まれていることを確認
   • プレビュー問題：MINIO_SERVER_URLとMINIO_BROWSER_REDIRECT_URLが正しく設定されていることを確認
   • アップロード失敗：CORS設定を確認。許可されたオリジンにフロントエンドドメインを含める必要があります
   • コンソールにアクセス不可：WebSocket設定、特にConnection "upgrade"を確認

その他のS3関連設定は近日公開......

WebDAV設定と使用ガイド

CloudPasteはシンプルなWebDAVプロトコルサポートを提供し、ストレージスペースをネットワークドライブとしてマウントし、ファイルマネージャーを通じて直接ファイルにアクセス・管理できます。

WebDAVサービス基本情報

• WebDAVベースURL: https://your-backend-domain/dav
• サポート認証方法:
  • 基本認証（ユーザー名+パスワード）
• サポート権限タイプ:
  • 管理者アカウント - 完全操作権限
  • APIキー - マウント権限（mount_permission）が有効である必要があります

権限設定

1. 管理者アカウントアクセス

管理者アカウントとパスワードで直接WebDAVサービスにアクセス：

• ユーザー名: 管理者ユーザー名
• パスワード: 管理者パスワード

2. APIキーアクセス（推奨）

より安全なアクセス方法として、専用のAPIキーを作成：

1. 管理インターフェースにログイン
2. 「APIキー管理」に移動
3. 新しいAPIキーを作成、「マウント権限」が有効であることを確認
4. 使用方法：
   • ユーザー名: APIキー値
   • パスワード: ユーザー名と同じAPIキー値

NGINXリバースプロキシ設定

NGINXをリバースプロキシとして使用する場合、すべてのWebDAVメソッドが正しく機能するように特定のWebDAV設定を追加する必要があります：

# WebDAV Configuration
location /dav {
    proxy_pass http://localhost:8787;  # Points to your backend service

    # WebDAV necessary headers
    proxy_set_header Host $host;
    proxy_set_header X-Real-IP $remote_addr;
    proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;

    # WebDAV method support
    proxy_pass_request_headers on;

    # Support all WebDAV methods
    proxy_method $request_method;

    # Necessary header processing
    proxy_set_header Destination $http_destination;
    proxy_set_header Overwrite $http_overwrite;

    # Handle large files
    client_max_body_size 0;

    # Timeout settings
    proxy_connect_timeout 3600s;
    proxy_send_timeout 3600s;
    proxy_read_timeout 3600s;
}

よくある問題と解決策

1. 接続問題:

   • WebDAV URL形式が正しいことを確認
   • 認証情報が有効であることを確認
   • APIキーにマウント権限があるか確認

2. 権限エラー:

   • アカウントに必要な権限があることを確認
   • 管理者アカウントは完全な権限を持つ必要があります
   • APIキーはマウント権限が明示的に有効である必要があります

3. ⚠️⚠️ WebDAVアップロード問題:

   • 署名付きアップロードモードでは、対応するS3ストレージのクロスオリジン設定に注意が必要
   • WebDAVの自動推奨モードでは、10MB未満のファイルは直接アップロードモード、10-50MBのファイルはマルチパートアップロードモード、50MB以上のファイルは署名付きアップロードモードを使用
   • Cloudflare Workerのアップロード制限については、署名付きまたは直接アップロードモードを使用し、マルチパートアップロードは避けることを推奨
   • Dockerデプロイでは、nginxプロキシ設定に注意すれば、どのアップロードモードも問題ありません
   • Windows、Raidriveなどのクライアントはまだドラッグ＆ドロップアップロードをサポートしていませんが、それ以外はすべて機能します