📑 Tabla de Contenidos

• Despliegue Automatizado con Actions
  • Despliegue Automatizado del Backend
  • Despliegue Automatizado del Frontend
• Despliegue Manual
  • Despliegue Manual del Backend
  • Despliegue Manual del Frontend
• Tutorial de Despliegue en ClawCloud CloudPaste

Despliegue Automatizado con Actions

Usando GitHub Actions se habilita el despliegue automático de la aplicación después de enviar código.

Configurar Repositorio GitHub

1. Haz fork o clona el repositorio https://github.com/ling-drag0n/CloudPaste
2. Ve a la configuración de tu repositorio GitHub
3. Navega a Settings → Secrets and variables → Actions → New Repository secrets
4. Añade los siguientes Secrets:

Obtener Token API de Cloudflare

1. Visita Cloudflare Dashboard

2. Crea un nuevo token API

3. Selecciona la plantilla "Edit Cloudflare Workers", y añade permiso de edición para base de datos D1

   

Despliegue Automatizado del Backend

Haz fork del repositorio, rellena los secrets, y luego ejecuta el workflow!!! El despliegue se activa automáticamente cuando se cambian archivos en el directorio backend y se envían a la rama main o master. El workflow procede así:

1. Crear automáticamente base de datos D1 (si no existe)
2. Inicializar base de datos con schema.sql (crear tablas y datos iniciales)
3. Establecer variable de entorno ENCRYPTION_SECRET (obtenida de GitHub Secrets o generada automáticamente)
4. Desplegar automáticamente Worker en Cloudflare
5. Se recomienda configurar un dominio personalizado para reemplazar el dominio original de Cloudflare (de lo contrario puede no ser accesible en ciertas regiones)

⚠️ Recuerda tu nombre de dominio del backend

Despliegue Automatizado del Frontend

Cloudflare Pages (Recomendado)

Haz fork del repositorio, rellena los secrets, y luego ejecuta el workflow. El despliegue se activa automáticamente cuando se cambian archivos en el directorio frontend y se envían a la rama main o master. Después del despliegue, necesitas configurar variables de entorno en el panel de control de Cloudflare Pages:

1. Inicia sesión en Cloudflare Dashboard

2. Navega a Pages → Tu proyecto (ej. "cloudpaste-frontend")

3. Haz clic en "Settings" → "Environment variables"

4. Añade variable de entorno:

   • Nombre: VITE_BACKEND_URL

   • Valor: Tu URL del Worker backend (ej. https://cloudpaste-backend.your-username.workers.dev) sin "/" al final. Se recomienda usar un dominio personalizado para el worker backend.

   • Asegúrate de ingresar el nombre de dominio completo del backend en formato "https://xxxx.com"

5. Paso importante: Luego ejecuta el workflow del frontend nuevamente para completar la carga del dominio del backend!!!

   

Sigue los pasos estrictamente, de lo contrario fallará la carga del dominio del backend

Vercel

Para Vercel, se recomienda desplegar así:

1. Importa tu proyecto GitHub después de hacer fork
2. Configura parámetros de despliegue:

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

3. Configura las variables de entorno: Ingresa: VITE_BACKEND_URL y tu dominio backend
4. Haz clic en el botón "Deploy" para desplegar

☝️ Elige uno de los métodos anteriores

Despliegue Manual

Despliegue Manual del Backend

1. Clona el repositorio

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

2. Instala dependencias

   npm install
   

3. Inicia sesión en Cloudflare

   npx wrangler login
   

4. Crea base de datos D1

   npx wrangler d1 create cloudpaste-db
   

   Anota el ID de la base de datos de la salida.

5. Modifica configuración wrangler.toml

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

6. Despliega Worker

   npx wrangler deploy
   

   Anota la URL de la salida; esta es la dirección API de tu backend.

7. Inicializa base de datos (automático) Visita tu URL del Worker para activar inicialización:

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

⚠️ Recordatorio de seguridad: Cambia la contraseña predeterminada del administrador inmediatamente después de la inicialización del sistema (Usuario: admin, Contraseña: admin123).

Despliegue Manual del Frontend

Cloudflare Pages

1. Prepara código frontend

   cd CloudPaste/frontend
   npm install
   

2. Configura variables de entorno Crea o modifica el archivo .env.production:

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

3. Construye proyecto frontend

   npm run build
   

   ¡Ten cuidado al construir! !

4. Despliega en Cloudflare Pages

   Método 1: Mediante CLI Wrangler

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

   Método 2: Mediante Cloudflare Dashboard

   1. Inicia sesión en Cloudflare Dashboard
   2. Selecciona "Pages"
   3. Haz clic en "Create a project" → "Direct Upload"
   4. Sube archivos del directorio dist
   5. Establece nombre del proyecto (ej. "cloudpaste-frontend")
   6. Haz clic en "Save and Deploy"

Vercel

1. Prepara código frontend

   cd CloudPaste/frontend
   npm install
   

2. Instala e inicia sesión en CLI Vercel

   npm install -g vercel
   vercel login
   

3. Configura variables de entorno, igual que para Cloudflare Pages

4. Construye y despliega

   vercel --prod
   

   Sigue las instrucciones para configurar el proyecto.

Tutorial de Despliegue en ClawCloud CloudPaste

10GB de tráfico gratis al mes, solo adecuado para uso ligero

Paso 1:

Enlace de registro: Claw Cloud (sin #AFF) No requiere tarjeta de crédito, si tu registro en GitHub tiene más de 180 días, obtienes $5 de crédito cada mes.

Paso 2:

Después de registrarte, haz clic en APP Launchpad en la página principal, luego haz clic en crear app en la esquina superior derecha

Paso 3:

Primero despliega el backend, como se muestra en la figura (solo como referencia):

El almacenamiento de datos del backend está aquí:

Paso 4:

Luego el frontend, como se muestra en la figura (solo como referencia):

El despliegue está completo y listo para usar, se pueden configurar dominios personalizados según sea necesario

📑 Tabla de Contenidos

• Despliegue con Línea de Comandos Docker
  • Despliegue Docker del Backend
  • Despliegue Docker del Frontend
• Despliegue con un Solo Comando usando Docker Compose

Despliegue con Línea de Comandos Docker

Despliegue Docker del Backend

El backend de CloudPaste puede desplegarse rápidamente usando la imagen Docker oficial.

1. Crea directorio de almacenamiento de datos

   mkdir -p sql_data
   

2. Ejecuta el contenedor 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
   

   Anota la URL de despliegue (ej. http://your-server-ip:8787), que se necesitará para el despliegue del frontend.

⚠️ Consejo de seguridad: Asegúrate de personalizar ENCRYPTION_SECRET y mantenerlo seguro, ya que esta clave se usa para encriptar datos sensibles.

Despliegue Docker del Frontend

El frontend usa Nginx para servir y configura la dirección API del backend al iniciar.

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

⚠️ Nota: BACKEND_URL debe incluir la URL completa (incluyendo protocolo http:// o https://) ⚠️ Recordatorio de seguridad: Cambia la contraseña predeterminada del administrador inmediatamente después de la inicialización del sistema (Usuario: admin, Contraseña: admin123).

Actualización de Imágenes Docker

Cuando se lance una nueva versión del proyecto, puedes actualizar tu despliegue Docker siguiendo estos pasos:

1. Descarga las imágenes más recientes

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

2. Detén y elimina los contenedores antiguos

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

3. Inicia nuevos contenedores usando los mismos comandos run que arriba (preservando directorio de datos y configuración)

Despliegue con un Solo Comando usando Docker Compose

Usando Docker Compose puedes desplegar tanto los servicios frontend como backend con un solo comando, que es el método más simple recomendado.

1. Crea un archivo 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. Inicia los servicios

docker-compose up -d

⚠️ Recordatorio de seguridad: Cambia la contraseña predeterminada del administrador inmediatamente después de la inicialización del sistema (Usuario: admin, Contraseña: admin123).

3. Accede a los servicios

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

Actualización con Docker Compose

Cuando necesites actualizar a una nueva versión:

1. Descarga las imágenes más recientes

   docker-compose pull
   

2. Recrea los contenedores usando las nuevas imágenes (preservando volúmenes de datos)

   docker-compose up -d --force-recreate
   

💡 Consejo: Si hay cambios de configuración, puede que necesites hacer backup de datos y modificar el archivo docker-compose.yml

Ejemplo de Proxy Inverso con 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;
    }
}

⚠️ Consejo de seguridad: Se recomienda configurar HTTPS y un proxy inverso (como Nginx) para mejorar la seguridad.

Obtención de la API R2 y Configuración de Cross-Origin

1. Inicia sesión en el panel de control de Cloudflare

2. Haz clic en R2 Storage y crea un bucket.

3. Crea un token de API

4. Guarda todos los datos después de la creación; los necesitarás más tarde

5. Configura las reglas de cross-origin: haz clic en el bucket correspondiente, haz clic en Configuración, edita la política CORS como se muestra a continuación:

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

Obtención de la API B2 y Configuración de Cross-Origin

1. Si no tienes una cuenta B2, regístrate primero, luego crea un bucket.

2. Haz clic en Application Key en la barra lateral, haz clic en Create Key y sigue la ilustración.

3. Configura el cross-origin de B2; la configuración de cross-origin de B2 es más compleja, tenlo en cuenta

4. Puedes probar primero las opciones 1 o 2, ve a la página de carga y comprueba si puedes subir archivos. Si la consola F12 muestra errores de cross-origin, usa la opción 3. Para una solución permanente, usa directamente la opción 3.

   

En cuanto a la configuración de la opción 3, dado que el panel no puede configurarla, debes hacerlo manualmente descargando la herramienta B2 CLI. Para más detalles, consulta: "https://docs.cloudreve.org/zh/usage/storage/b2".

Después de descargar, en el directorio de descarga correspondiente CMD, introduce los siguientes comandos:

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

Configuración en Windows, usa ".\b2-windows.exe xxx", La CLI de Python sería similar:

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

Reemplaza con el nombre de tu bucket. Para allowedOrigins en la configuración de cross-origin, puedes configurarlo según tus necesidades; aquí permite todos.

5. Configuración de cross-origin completada

Acceso a la API MinIO y Configuración de Cross-Origin

1. Despliegue del Servidor MinIO

   Usa la siguiente configuración de Docker Compose (referencia) para desplegar MinIO rápidamente:

   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 # Nombre de usuario del administrador
         - MINIO_ROOT_PASSWORD=minioadmin # Contraseña del administrador
         - MINIO_BROWSER=on
         - MINIO_SERVER_URL=https://minio.example.com # URL de acceso a la API S3
         - MINIO_BROWSER_REDIRECT_URL=https://console.example.com # URL de acceso a la consola
       ports:
         - "9000:9000" # Puerto de la API S3
         - "9001:9001" # Puerto de la consola
       volumes:
         - ./data:/data
         - ./certs:/root/.minio/certs # Certificados SSL (si es necesario)
       restart: always
   

   Ejecuta docker-compose up -d para iniciar el servicio.

2. Configuración del Proxy Inverso (Referencia)

   Para asegurar que MinIO funcione correctamente, especialmente las vistas previas de archivos, configura el proxy inverso adecuadamente. Configuraciones recomendadas para OpenResty/Nginx:

   Proxy Inverso para la API S3 de 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;
   
       # Optimización HTTP
       proxy_http_version 1.1;
       proxy_set_header Connection "";  # Habilita keepalive HTTP/1.1
   
       # Crítico: Resuelve errores 403 y problemas de vista previa
       proxy_cache off;
       proxy_buffering off;
       proxy_request_buffering off;
   
       # Sin límite de tamaño de archivo
       client_max_body_size 0;
   }
   

   Proxy Inverso para la Consola de 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;
   
       # Soporte para WebSocket
       proxy_http_version 1.1;
       proxy_set_header Upgrade $http_upgrade;
       proxy_set_header Connection "upgrade";
   
       # Configuraciones críticas
       proxy_cache off;
       proxy_buffering off;
   
       # Sin límite de tamaño de archivo
       client_max_body_size 0;
   }
   

3. Accede a la Consola para Crear Buckets y Claves de Acceso

   Para una configuración detallada, consulta la documentación oficial:
   https://min.io/docs/minio/container/index.html
   CN: https://min-io.cn/docs/minio/container/index.html

   

4. Configuración Adicional (Opcional)

   Los orígenes permitidos deben incluir tu dominio frontend.
   

5. Configura MinIO en CloudPaste

   • Inicia sesión en el panel de administración de CloudPaste
   • Ve a "Configuración de Almacenamiento S3" → "Añadir Configuración de Almacenamiento"
   • Selecciona "Otro servicio compatible con S3" como proveedor
   • Introduce los detalles:
     • Nombre: Nombre personalizado
     • URL del Endpoint: URL del servicio MinIO (ej., https://minio.example.com)
     • Nombre del Bucket: Bucket previamente creado
     • ID de Clave de Acceso: Tu Clave de Acceso
     • Clave Secreta: Tu Clave Secreta
     • Región: Déjalo vacío
     • Acceso por Estilo de Ruta: ¡DEBE ESTAR HABILITADO!
   • Haz clic en "Probar Conexión" para verificar
   • Guarda la configuración

6. Solución de Problemas

   • Nota: Si usas el CDN de Cloudflare, puede que necesites añadir proxy_set_header Accept-Encoding "identity", y hay problemas de caché a considerar. Se recomienda usar solo resolución DNS.
   • Error 403: Asegúrate de que el proxy inverso incluya proxy_cache off y proxy_buffering off
   • Problemas de Vista Previa: Verifica que MINIO_SERVER_URL y MINIO_BROWSER_REDIRECT_URL estén configurados correctamente
   • Fallos en la Carga: Revisa la configuración CORS; los orígenes permitidos deben incluir el dominio frontend
   • Consola Inaccesible: Verifica la configuración de WebSocket, especialmente Connection "upgrade"

Más configuraciones relacionadas con S3 próximamente......

Guía de Configuración y Uso de WebDAV

CloudPaste proporciona soporte simple para el protocolo WebDAV, permitiéndote montar espacios de almacenamiento como unidades de red para acceder y gestionar archivos directamente a través de gestores de archivos.

Información Básica del Servicio WebDAV

• URL Base de WebDAV: https://your-backend-domain/dav
• Métodos de Autenticación Soportados:
  • Autenticación Básica (usuario+contraseña)
• Tipos de Permisos Soportados:
  • Cuentas de administrador - Permisos completos de operación
  • Claves API - Requiere permiso de montaje habilitado (mount_permission)

Configuración de Permisos

1. Acceso con Cuenta de Administrador

Usa el nombre de usuario y contraseña del administrador para acceder directamente al servicio WebDAV:

• Nombre de usuario: Nombre de usuario del administrador
• Contraseña: Contraseña del administrador

2. Acceso con Clave API (Recomendado)

Para un método de acceso más seguro, se recomienda crear una clave API dedicada:

1. Inicia sesión en la interfaz de administración
2. Navega a "Gestión de Claves API"
3. Crea una nueva clave API, asegúrate de que "Permiso de Montaje" esté habilitado
4. Método de uso:
   • Nombre de usuario: Valor de la clave API
   • Contraseña: El mismo valor de la clave API que el nombre de usuario

Configuración del Proxy Inverso NGINX

Si usas NGINX como proxy inverso, se necesita una configuración específica de WebDAV para asegurar que todos los métodos WebDAV funcionen correctamente:

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

Problemas Comunes y Soluciones

1. Problemas de Conexión:

   • Confirma que el formato de la URL WebDAV es correcto
   • Verifica que las credenciales de autenticación sean válidas
   • Comprueba si la clave API tiene permiso de montaje

2. Errores de Permisos:

   • Confirma que la cuenta tiene los permisos necesarios
   • Las cuentas de administrador deben tener permisos completos
   • Las claves API necesitan tener el permiso de montaje específicamente habilitado

3. ⚠️⚠️ Problemas de Carga en WebDAV:

   • En modo de carga presignada, hay que prestar atención a la configuración cross-origin del almacenamiento S3 correspondiente
   • En el modo de recomendación automática de WebDAV, archivos menores a 10MB usan modo de carga directa, archivos entre 10-50MB usan modo de carga multiparte, y archivos mayores a 50MB usan modo de carga presignada
   • Respecto a las limitaciones de carga de Cloudflare Worker, se recomienda usar modo de carga presignada o directa, y evitar cargas multiparte
   • Para despliegues en Docker, solo hay que prestar atención a la configuración del proxy nginx, cualquier modo de carga es aceptable
   • Clientes como Windows, Raidrive y otros aún no soportan arrastrar y soltar para cargar, todo lo demás funciona