📑 Table des matières

• Déploiement automatisé par Actions
  • Déploiement backend automatisé
  • Déploiement frontend automatisé
• Déploiement manuel
  • Déploiement backend manuel
  • Déploiement frontend manuel
• Tutoriel de déploiement ClawCloud CloudPaste

Déploiement automatisé par Actions

Utilisez GitHub Actions pour déployer automatiquement l'application après un push de code.

Configurer le dépôt GitHub

1. Forker ou cloner le dépôt https://github.com/ling-drag0n/CloudPaste
2. Aller dans les paramètres de votre dépôt GitHub
3. Naviguer vers Settings → Secrets and variables → Actions → New Repository secrets
4. Ajouter les Secrets suivants :

Obtenir le token API Cloudflare

1. Visiter Cloudflare Dashboard

2. Créer un nouveau token API

3. Sélectionner le template "Edit Cloudflare Workers" et ajouter la permission d'édition de base de données D1

   

Déploiement backend automatisé

Forker le dépôt, remplir les secrets, puis exécuter le workflow !!! Le déploiement se déclenche automatiquement lors des modifications dans le dossier backend poussées sur les branches main ou master. Étapes :

1. Création automatique de la base D1 (si inexistante)
2. Initialisation avec schema.sql (création tables et données initiales)
3. Définition de ENCRYPTION_SECRET (depuis GitHub Secrets ou génération automatique)
4. Déploiement automatique du Worker sur Cloudflare
5. Recommandé : configurer un domaine personnalisé pour remplacer le domaine Cloudflare (inaccessible dans certaines régions)

⚠️ Notez votre nom de domaine backend

Déploiement frontend automatisé

Cloudflare Pages (Recommandé)

Forker le dépôt, remplir les secrets, puis exécuter le workflow. Le déploiement se déclenche automatiquement lors des modifications dans le dossier frontend. Après déploiement, configurer les variables d'environnement dans le panneau Cloudflare Pages :

1. Se connecter à Cloudflare Dashboard

2. Naviguer vers Pages → Votre projet (ex: "cloudpaste-frontend")

3. Cliquer "Settings" → "Environment variables"

4. Ajouter variable :

   • Nom : VITE_BACKEND_URL

   • Valeur : URL de votre Worker backend (ex: https://cloudpaste-backend.your-username.workers.dev) sans "/" final. Recommandé : utiliser un domaine personnalisé.

   • Entrer le domaine backend complet au format "https://xxxx.com"

5. Étape cruciale : Relancer le workflow frontend pour charger le domaine backend !!!

   

Suivez strictement les étapes, sinon le chargement du domaine backend échouera

Vercel

Pour Vercel, procéder comme suit :

1. Importer votre projet GitHub après forking
2. Configurer les paramètres :

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

3. Configurer les variables : Entrer VITE_BACKEND_URL et votre domaine backend
4. Cliquer "Deploy" pour déployer

☝️ Choisir une des méthodes ci-dessus

Déploiement manuel

Déploiement backend manuel

1. Cloner le dépôt

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

2. Installer les dépendances

   npm install
   

3. Se connecter à Cloudflare

   npx wrangler login
   

4. Créer base D1

   npx wrangler d1 create cloudpaste-db
   

   Noter l'ID de base de données.

5. Modifier wrangler.toml

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

6. Déployer Worker

   npx wrangler deploy
   

   Noter l'URL de sortie ; c'est l'adresse API backend.

7. Initialiser la base (automatique) Visiter l'URL du Worker pour déclencher l'initialisation :

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

⚠️ Sécurité : Changer immédiatement le mot de passe administrateur par défaut après initialisation (Identifiant : admin, Mot de passe : admin123).

Déploiement frontend manuel

Cloudflare Pages

1. Préparer le code frontend

   cd CloudPaste/frontend
   npm install
   

2. Configurer variables d'environnement Créer/modifier .env.production :

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

3. Builder le projet frontend

   npm run build
   

   Attention lors du build ! !

4. Déployer sur Cloudflare Pages

   Méthode 1 : Via CLI Wrangler

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

   Méthode 2 : Via Dashboard Cloudflare

   1. Se connecter à Cloudflare Dashboard
   2. Sélectionner "Pages"
   3. Cliquer "Create a project" → "Direct Upload"
   4. Uploader les fichiers du dossier dist
   5. Définir nom du projet (ex: "cloudpaste-frontend")
   6. Cliquer "Save and Deploy"

Vercel

1. Préparer le code frontend

   cd CloudPaste/frontend
   npm install
   

2. Installer et se connecter à Vercel CLI

   npm install -g vercel
   vercel login
   

3. Configurer variables, identique à Cloudflare Pages

4. Builder et déployer

   vercel --prod
   

   Suivre les instructions pour configurer le projet.

Tutoriel de déploiement ClawCloud CloudPaste

10GB de trafic gratuit par mois, adapté à une utilisation légère

Étape 1 :

Lien d'inscription : Claw Cloud (sans #AFF) Aucune carte de crédit requise, si votre compte GitHub a plus de 180 jours, vous obtenez $5 de crédit mensuel.

Étape 2 :

Après inscription, cliquer APP Launchpad sur la page d'accueil, puis créer une app en haut à droite

Étape 3 :

D'abord déployer le backend, comme montré (exemple seulement) :

Stockage des données backend ici :

Étape 4 :

Puis le frontend, comme montré (exemple seulement) :

Déploiement terminé, prêt à l'emploi, domaines personnalisables si besoin

📑 Table des matières

• Déploiement par ligne de commande Docker
  • Déploiement backend Docker
  • Déploiement frontend Docker
• Déploiement en un clic avec Docker Compose

Déploiement par ligne de commande Docker

Déploiement backend Docker

Le backend CloudPaste peut être déployé rapidement via l'image Docker officielle.

1. Créer répertoire de données

   mkdir -p sql_data
   

2. Lancer le conteneur backend

   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
   

   Noter l'URL (ex: http://your-server-ip:8787), nécessaire pour le frontend.

⚠️ Sécurité : Personnaliser ENCRYPTION_SECRET et le garder secret, utilisé pour chiffrer les données sensibles.

Déploiement frontend Docker

Le frontend utilise Nginx et configure l'URL de l'API backend au démarrage.

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

⚠️ Note : BACKEND_URL doit inclure l'URL complète (protocole http:// ou https://) ⚠️ Sécurité : Changer immédiatement le mot de passe administrateur par défaut (Identifiant : admin, Mot de passe : admin123).

Mise à jour des images Docker

Pour mettre à jour vers une nouvelle version :

1. Télécharger les dernières images

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

2. Arrêter et supprimer les anciens conteneurs

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

3. Relancer avec les mêmes commandes (en conservant données et configuration)

Déploiement en un clic avec Docker Compose

La méthode la plus simple recommandée pour déployer frontend et backend ensemble.

1. Créer un fichier 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. Démarrer les services

docker-compose up -d

⚠️ Sécurité : Changer immédiatement le mot de passe administrateur par défaut (Identifiant : admin, Mot de passe : admin123).

3. Accéder aux services

Frontend : http://your-server-ip:80 Backend : http://your-server-ip:8787

Mise à jour Docker Compose

Pour mettre à jour :

1. Télécharger les dernières images

   docker-compose pull
   

2. Recréer les conteneurs (en conservant les volumes)

   docker-compose up -d --force-recreate
   

💡 Astuce : En cas de changements de configuration, sauvegarder les données et modifier docker-compose.yml

Exemple de proxy inverse 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;
    }
}

⚠️ Sécurité : Configurer HTTPS et un proxy inverse (comme Nginx) pour renforcer la sécurité.

Récupération de l'API R2 et Configuration Cross-Origin

1. Connectez-vous au tableau de bord Cloudflare

2. Cliquez sur R2 Storage et créez un bucket.

3. Créez un jeton API

4. Sauvegardez toutes les données après création ; vous en aurez besoin plus tard

5. Configurez les règles cross-origin : cliquez sur le bucket correspondant, puis sur Settings, éditez la politique CORS comme indiqué ci-dessous :

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

Récupération de l'API B2 et Configuration Cross-Origin

1. Si vous n'avez pas de compte B2, inscrivez-vous d'abord, puis créez un bucket.

2. Cliquez sur Application Key dans la barre latérale, puis sur Create Key, et suivez les instructions.

3. Configurez le cross-origin B2 ; cette configuration est plus complexe, prenez-en note

4. Vous pouvez d'abord essayer les options 1 ou 2, allez sur la page de téléchargement et vérifiez si vous pouvez uploader. Si la console F12 affiche des erreurs cross-origin, utilisez l'option 3. Pour une solution permanente, utilisez directement l'option 3.

   

Concernant la configuration de l'option 3, comme le panneau ne peut pas la configurer, vous devez le faire manuellement en téléchargeant l'outil B2 CLI. Pour plus de détails, référez-vous à : "https://docs.cloudreve.org/zh/usage/storage/b2".

Après le téléchargement, dans le répertoire de téléchargement correspondant CMD, entrez les commandes suivantes :

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

Configuration Windows, utilisez ".\b2-windows.exe xxx", Python CLI serait similaire :

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}]"

Remplacez par le nom de votre bucket. Pour allowedOrigins dans l'autorisation cross-origin, vous pouvez configurer selon vos besoins ; ici, tout est autorisé.

5. Configuration cross-origin terminée

Accès à l'API MinIO et Configuration Cross-Origin

1. Déployer le serveur MinIO

   Utilisez la configuration Docker Compose suivante (référence) pour déployer rapidement 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 # Nom d'utilisateur admin
         - MINIO_ROOT_PASSWORD=minioadmin # Mot de passe admin
         - MINIO_BROWSER=on
         - MINIO_SERVER_URL=https://minio.example.com # URL d'accès API S3
         - MINIO_BROWSER_REDIRECT_URL=https://console.example.com # URL d'accès console
       ports:
         - "9000:9000" # Port API S3
         - "9001:9001" # Port console
       volumes:
         - ./data:/data
         - ./certs:/root/.minio/certs # Certificats SSL (si nécessaire)
       restart: always
   

   Exécutez docker-compose up -d pour démarrer le service.

2. Configurer le reverse proxy (Référence)

   Pour garantir le bon fonctionnement de MinIO, en particulier les prévisualisations de fichiers, configurez correctement le reverse proxy. Paramètres recommandés pour OpenResty/Nginx :

   Reverse proxy API S3 MinIO (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;
   
       # Optimisation HTTP
       proxy_http_version 1.1;
       proxy_set_header Connection "";  # Activer keepalive HTTP/1.1
   
       # Critique : Résoudre les erreurs 403 & problèmes de prévisualisation
       proxy_cache off;
       proxy_buffering off;
       proxy_request_buffering off;
   
       # Pas de limite de taille de fichier
       client_max_body_size 0;
   }
   

   Reverse proxy console 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;
   
       # Support WebSocket
       proxy_http_version 1.1;
       proxy_set_header Upgrade $http_upgrade;
       proxy_set_header Connection "upgrade";
   
       # Paramètres critiques
       proxy_cache off;
       proxy_buffering off;
   
       # Pas de limite de taille de fichier
       client_max_body_size 0;
   }
   

3. Accéder à la console pour créer des buckets & clés d'accès

   Pour une configuration détaillée, référez-vous à la documentation officielle :
   https://min.io/docs/minio/container/index.html
   CN: https://min-io.cn/docs/minio/container/index.html

   

4. Configuration supplémentaire (Optionnelle)

   Les origines autorisées doivent inclure votre domaine frontend.
   

5. Configurer MinIO dans CloudPaste

   • Connectez-vous au panneau admin CloudPaste
   • Allez dans "Paramètres de stockage S3" → "Ajouter une configuration de stockage"
   • Sélectionnez "Autre service compatible S3" comme fournisseur
   • Entrez les détails :
     • Nom : Nom personnalisé
     • URL du endpoint : URL du service MinIO (ex., https://minio.example.com)
     • Nom du bucket : Bucket pré-créé
     • ID de clé d'accès : Votre clé d'accès
     • Clé secrète : Votre clé secrète
     • Région : Laissez vide
     • Accès style-path : DOIT ÊTRE ACTIVÉ !
   • Cliquez sur "Tester la connexion" pour vérifier
   • Sauvegardez les paramètres

6. Dépannage

   • Note : Si vous utilisez le CDN de Cloudflare, vous devrez peut-être ajouter proxy_set_header Accept-Encoding "identity", et il y a des problèmes de cache à considérer. Il est recommandé de n'utiliser que la résolution DNS.
   • Erreur 403 : Assurez-vous que le reverse proxy inclut proxy_cache off & proxy_buffering off
   • Problèmes de prévisualisation : Vérifiez que MINIO_SERVER_URL & MINIO_BROWSER_REDIRECT_URL sont correctement configurés
   • Échecs de téléchargement : Vérifiez les paramètres CORS ; les origines autorisées doivent inclure le domaine frontend
   • Console inaccessible : Vérifiez la config WebSocket, en particulier Connection "upgrade"

Plus de configurations S3 à venir......

Guide de configuration et d'utilisation WebDAV

CloudPaste fournit un support simple du protocole WebDAV, vous permettant de monter des espaces de stockage comme des lecteurs réseau pour un accès et une gestion pratiques des fichiers directement via des gestionnaires de fichiers.

Informations de base sur le service WebDAV

• URL de base WebDAV : https://your-backend-domain/dav
• Méthodes d'authentification supportées :
  • Authentification basique (nom d'utilisateur + mot de passe)
• Types de permissions supportés :
  • Comptes administrateurs - Permissions complètes
  • Clés API - Requiert l'activation de la permission de montage (mount_permission)

Configuration des permissions

1. Accès via compte administrateur

Utilisez le nom d'utilisateur et le mot de passe administrateur pour accéder directement au service WebDAV :

• Nom d'utilisateur : Nom d'utilisateur administrateur
• Mot de passe : Mot de passe administrateur

2. Accès via clé API (Recommandé)

Pour une méthode d'accès plus sécurisée, il est recommandé de créer une clé API dédiée :

1. Connectez-vous à l'interface de gestion
2. Naviguez vers "Gestion des clés API"
3. Créez une nouvelle clé API, assurez-vous que "Permission de montage" est activée
4. Méthode d'utilisation :
   • Nom d'utilisateur : Valeur de la clé API
   • Mot de passe : La même valeur que le nom d'utilisateur

Configuration du reverse proxy NGINX

Si vous utilisez NGINX comme reverse proxy, une configuration WebDAV spécifique doit être ajoutée pour garantir que toutes les méthodes WebDAV fonctionnent correctement :

# 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;
}

Problèmes courants et solutions

1. Problèmes de connexion :

   • Confirmez que le format de l'URL WebDAV est correct
   • Vérifiez que les identifiants d'authentification sont valides
   • Vérifiez si la clé API a la permission de montage

2. Erreurs de permissions :

   • Confirmez que le compte a les permissions requises
   • Les comptes administrateurs devraient avoir toutes les permissions
   • Les clés API doivent avoir la permission de montage spécifiquement activée

3. ⚠️⚠️ Problèmes de téléchargement WebDAV :

   • En mode de téléchargement pré-signé, il faut faire attention à la configuration cross-origin du stockage S3 correspondant
   • En mode de recommandation automatique WebDAV, les fichiers de moins de 10MB utilisent le mode de téléchargement direct, les fichiers entre 10-50MB utilisent le mode multipart, et les fichiers de plus de 50MB utilisent le mode pré-signé
   • Concernant les limitations de téléchargement Cloudflare Worker, il est recommandé d'utiliser le mode pré-signé ou direct, et d'éviter les téléchargements multipart
   • Pour les déploiements Docker, il suffit de faire attention à la configuration du proxy nginx, tous les modes de téléchargement sont acceptables
   • Les clients Windows, Raidrive et autres ne supportent pas encore les téléchargements par glisser-déposer, tout le reste fonctionne