Last translated: 26 Jun 2025

Translation Not Available Yet

This repository's README hasn't been translated yet. Once translated, it will be easier to read and understand in your native language (中文).

After translating, add the links to README so others can view it directly.

CloudPaste - 온라인 클립보드 📋

中文 | English

paste

Markdown 편집 및 파일 업로드를 지원하는 Cloudflare 기반 온라인 클립보드 및 파일 공유 서비스

Ask DeepWiki License GitHub Stars Powered by Cloudflare Docker Pulls

📸 데모✨ 기능🚀 배포 가이드🔧 기술 스택💻 개발📄 라이선스

📸 데모

✨ 기능

📝 Markdown 편집 및 공유

  • 강력한 편집기: Vditor 통합, GitHub 스타일 Markdown, 수학 공식, 플로우차트, 마인드맵 등 지원
  • 보안 공유: 접근 비밀번호로 콘텐츠 보호 가능
  • 유연한 만료 설정: 콘텐츠 만료 시간 설정 지원
  • 접근 제어: 최대 조회수 제한 기능
  • 사용자 정의: 개인화된 공유 링크 및 메모
  • Raw 텍스트 직접 링크 지원: GitHub의 Raw 직접 링크와 유사, YAML 구성 파일을 통해 시작된 서비스에 사용
  • 다양한 형식 내보내기: PDF, Markdown, HTML, PNG 이미지, Word 문서로 내보내기 지원
  • 쉬운 공유: 한 번의 클릭으로 링크 복사 및 QR 코드 생성
  • 자동 저장: 자동 초안 저장 지원

📤 파일 업로드 및 관리

  • 다중 저장소 지원: 다양한 S3 저장소 서비스와 호환 (Cloudflare R2, Backblaze B2, AWS S3 등)
  • 저장소 구성: 여러 저장 공간을 위한 시각적 인터페이스, 기본 저장소 유연한 전환
  • 효율적인 업로드: 사전 서명된 URL을 통해 S3 저장소에 직접 업로드
  • 실시간 피드백: 실시간 업로드 진행률 표시
  • 사용자 정의 제한: 단일 업로드 제한 및 최대 용량 제한
  • 메타데이터 관리: 파일 메모, 비밀번호, 만료 시간, 접근 제한
  • 데이터 분석: 파일 접근 통계 및 추세 분석
  • 직접 서버 전송: 파일 업로드, 다운로드 및 기타 작업을 위한 API 호출 지원.

🛠 편리한 파일/텍스트 작업

  • 통합 관리: 파일/텍스트 생성, 삭제 및 속성 수정 지원
  • 온라인 미리보기: 일반 문서, 이미지 및 미디어 파일에 대한 온라인 미리보기 및 직접 링크 생성
  • 공유 도구: 크로스 플랫폼 공유를 위한 짧은 링크 및 QR 코드 생성
  • 일괄 관리: 파일/텍스트에 대한 일괄 작업 및 표시

🔄 WebDAV 및 마운트 포인트 관리

  • WebDAV 프로토콜 지원: 표준 WebDAV 프로토콜을 통해 파일 시스템 접근 및 관리
  • 네트워크 드라이브 마운팅: 일부 타사 클라이언트에 의한 마운팅 지원
  • 유연한 마운트 포인트: 다른 저장소 서비스에 연결된 여러 마운트 포인트 생성 지원
  • 권한 제어: 세분화된 마운트 포인트 접근 권한 관리
  • API 키 통합: API 키를 통한 WebDAV 접근 권한 부여
  • 대용량 파일 지원: 대용량 파일에 대해 자동으로 멀티파트 업로드 메커니즘 사용
  • 디렉토리 작업: 디렉토리 생성, 업로드, 삭제, 이름 변경 등 완전 지원

🔐 경량 권한 관리

관리자 권한 제어

  • 시스템 관리: 전역 시스템 설정 구성
  • 콘텐츠 검토: 모든 사용자 콘텐츠 관리
  • 저장소 관리: S3 저장소 서비스 추가, 편집 및 삭제
  • 권한 할당: API 키 생성 및 권한 관리
  • 데이터 분석: 통계 데이터 완전 접근

API 키 권한 제어

  • 텍스트 권한: 텍스트 콘텐츠 생성/편집/삭제
  • 파일 권한: 파일 업로드/관리/삭제
  • 저장소 권한: 특정 저장소 구성 선택 가능
  • 읽기/쓰기 분리: 읽기 전용 또는 읽기/쓰기 권한 설정 가능
  • 시간 제어: 사용자 정의 유효 기간 (시간부터 월까지)
  • 보안 메커니즘: 자동 만료 및 수동 취소 기능

💫 시스템 기능

  • 높은 적응성: 반응형 디자인, 모바일 장치 및 데스크톱에 적응
  • 다국어: 중국어/영어 이중 언어 인터페이스 지원
  • 시각적 모드: 밝은/어두운 테마 전환
  • 보안 인증: JWT 기반 관리자 인증 시스템
  • 오프라인 경험: PWA 지원, 오프라인 사용 및 데스크톱 설치 가능

🚀 배포 가이드

필수 조건

배포를 시작하기 전에 다음을 준비했는지 확인하세요:

  • Cloudflare 계정 (필수)
  • R2 사용 시: Cloudflare R2 서비스 활성화 및 버킷 생성 (결제 방법 필요)
  • Vercel 사용 시: Vercel 계정 등록
  • 기타 S3 저장소 서비스 구성 정보:
    • S3_ACCESS_KEY_ID
    • S3_SECRET_ACCESS_KEY
    • S3_BUCKET_NAME
    • S3_ENDPOINT
👉 전체 배포 가이드 보기

📑 목차


Action 자동 배포

GitHub Actions를 사용하면 코드 푸시 후 애플리케이션 자동 배포가 가능합니다.

GitHub 저장소 구성

  1. 저장소 포크 또는 클론 https://github.com/ling-drag0n/CloudPaste
  2. GitHub 저장소 설정으로 이동
  3. Settings → Secrets and variables → Actions → New Repository secrets로 이동
  4. 다음 Secrets 추가:
Secret 이름필수용도
CLOUDFLARE_API_TOKENCloudflare API 토큰 (Workers, D1 및 Pages 권한 필요)
CLOUDFLARE_ACCOUNT_IDCloudflare 계정 ID
ENCRYPTION_SECRET민감 데이터 암호화 키 (제공되지 않으면 자동 생성됨)

Cloudflare API 토큰 획득

  1. Cloudflare 대시보드 방문

  2. 새 API 토큰 생성

  3. "Edit Cloudflare Workers" 템플릿 선택, D1 데이터베이스 편집 권한 추가

    D1

백엔드 자동 배포

저장소 포크, 시크릿 입력 후 워크플로우 실행!!! backend 디렉토리 파일 변경 및 main 또는 master 브랜치에 푸시될 때마다 자동으로 배포 트리거됩니다. 워크플로우는 다음과 같이 진행됩니다:

  1. 자동 D1 데이터베이스 생성 (존재하지 않는 경우)
  2. schema.sql로 데이터베이스 초기화 (테이블 및 초기 데이터 생성)
  3. ENCRYPTION_SECRET 환경 변수 설정 (GitHub Secrets에서 가져오거나 자동 생성)
  4. Cloudflare에 Worker 자동 배포
  5. 원본 Cloudflare 도메인 대신 사용자 정의 도메인 설정 권장 (특정 지역에서 접근 불가능할 수 있음)

⚠️ 백엔드 도메인 이름 기억 필수

프론트엔드 자동 배포

Cloudflare Pages (권장)

저장소 포크, 시크릿 입력 후 워크플로우 실행. 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. 중요한 단계: 백엔드 도메인 로딩 완료를 위해 프론트엔드 워크플로우 다시 실행!!!

    test-1

단계를 엄격히 따르지 않으면 백엔드 도메인 로딩 실패

Vercel

Vercel의 경우 다음과 같이 배포 권장:

  1. 포크 후 GitHub 프로젝트 가져오기
  2. 배포 매개변수 구성:
Framework Preset: Vite
Build Command: npm run build
Output Directory: dist
Install Command: npm install
  1. 아래 환경 변수 구성: VITE_BACKEND_URL 및 백엔드 도메인 입력
  2. "Deploy" 버튼 클릭하여 배포

☝️ 위 방법 중 하나 선택


수동 배포

백엔드 수동 배포

  1. 저장소 클론
git clone https://github.com/ling-drag0n/CloudPaste.git
cd CloudPaste/backend
  1. 종속성 설치

    npm install
    
  2. Cloudflare 로그인

    npx wrangler login
    
  3. D1 데이터베이스 생성

    npx wrangler d1 create cloudpaste-db
    

    출력에서 데이터베이스 ID 기록.

  4. wrangler.toml 구성 수정

    [[d1_databases]]
    binding = "DB"
    database_name = "cloudpaste-db"
    database_id = "YOUR_DATABASE_ID"
    
  5. Worker 배포

    npx wrangler deploy
    

    출력에서 URL 기록; 이는 백엔드 API 주소입니다.

  6. 데이터베이스 초기화 (자동) 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 클릭, 우측 상단에서 앱 생성 클릭

image.png

3단계:

먼저 백엔드 배포, 그림 참조 (참고용): image.png

백엔드 데이터 저장소 위치: image.png

4단계:

그 다음 프론트엔드, 그림 참조 (참고용): image.png

배포 완료 및 사용 준비, 필요에 따라 사용자 정의 도메인 구성 가능
👉 Docker 배포 가이드

📑 목차


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. 위와 동일한 실행 명령으로 새 컨테이너 시작 (데이터 디렉토리 및 구성 보존)

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
  1. 서비스 시작
docker-compose up -d

⚠️ 보안 알림: 시스템 초기화 후 즉시 기본 관리자 비밀번호 변경 필수 (사용자 이름: admin, 비밀번호: admin123).

  1. 서비스 접근

프론트엔드: 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) 구성 권장.

👉 S3 CORS 구성 가이드

R2 API 획득 및 크로스 오리진 설정

  1. Cloudflare 대시보드에 로그인

  2. R2 Storage를 클릭하고 버킷을 생성합니다.

  3. API 토큰 생성 R2api R2rw

  4. 생성 후 모든 데이터를 저장해두세요. 나중에 필요합니다.

  5. 크로스 오리진 규칙 설정: 해당 버킷을 클릭하고 Settings를 클릭한 후 아래와 같이 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 계정이 없는 경우 먼저 가입한 후 버킷을 생성하세요. B2账号注册

  2. 사이드바에서 Application Key를 클릭하고 Create Key를 클릭한 후 설명에 따라 진행합니다. B2key

  3. B2 크로스 오리진 설정; B2 크로스 오리진 설정은 더 복잡하니 주의하세요. B2cors

  4. 먼저 옵션 1 또는 2를 시도해보고 업로드 페이지로 이동하여 업로드가 가능한지 확인하세요. F12 콘솔에 크로스 오리진 오류가 표시되면 옵션 3을 사용하세요. 영구적인 해결책을 원한다면 바로 옵션 3을 사용하세요.

    B21

옵션 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는 필요에 따라 구성할 수 있으며, 여기서는 모두 허용합니다.

  1. 크로스 오리진 설정 완료

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

    minio-1

  4. 추가 설정 (선택 사항)

    허용된 오리진에는 프론트엔드 도메인이 포함되어야 합니다.
    minio-2

  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 offproxy_buffering off가 포함되어 있는지 확인
    • 미리보기 문제: MINIO_SERVER_URLMINIO_BROWSER_REDIRECT_URL이 올바르게 설정되었는지 확인
    • 업로드 실패: CORS 설정 확인; 허용된 오리진에 프론트엔드 도메인이 포함되어야 함
    • 콘솔 접근 불가: WebSocket 구성, 특히 Connection "upgrade" 확인

더 많은 S3 관련 구성이 곧 제공될 예정입니다......

👉 WebDAV 구성 가이드

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 등의 클라이언트는 아직 드래그 앤 드롭 업로드를 지원하지 않으며, 그 외 모든 기능은 작동함

🔧 기술 스택

프론트엔드

  • 프레임워크: Vue.js 3 + Vite
  • 스타일링: TailwindCSS
  • 에디터: Vditor
  • 국제화: Vue-i18n
  • 차트: Chart.js + Vue-chartjs

백엔드

  • 런타임: Cloudflare Workers
  • 프레임워크: Hono
  • 데이터베이스: Cloudflare D1 (SQLite)
  • 스토리지: 다중 S3 호환 서비스 (R2, B2, AWS S3 지원)
  • 인증: JWT 토큰 + API 키

💻 개발

API 문서

API 문서

서버 직접 파일 업로드 API 문서 - 서버 직접 파일 업로드 인터페이스에 대한 상세 설명

로컬 개발 환경 설정

  1. 프로젝트 저장소 복제

    git clone https://github.com/ling-drag0n/cloudpaste.git
    cd cloudpaste
    
  2. 백엔드 설정

    cd backend
    npm install
    # D1 데이터베이스 초기화
    wrangler d1 create cloudpaste-db
    wrangler d1 execute cloudpaste-db --file=./schema.sql
    
  3. 프론트엔드 설정

    cd frontend
    npm install
    
  4. 환경 변수 구성

    • backend 디렉토리에서 wrangler.toml 파일을 생성하여 개발 환경 변수 설정
    • frontend 디렉토리에서 .env.development 파일을 구성하여 프론트엔드 환경 변수 설정
  5. 개발 서버 시작

    # 백엔드
    cd backend
    npm run dev
    
    # 프론트엔드 (다른 터미널에서)
    cd frontend
    npm run dev
    

프로젝트 구조

CloudPaste/
├── frontend/                # Frontend Vue.js application
│   ├── src/                 # Source code
│   │   ├── components/      # Vue components
│   │   ├── api/             # API clients and services
│   │   ├── i18n/            # Internationalization resource files
│   │   ├── utils/           # Utility functions
│   │   └── assets/          # Static assets
│   └── ...
└── backend/                 # Cloudflare Workers backend
    ├── worker.js            # Main Worker file
    ├── schema.sql           # D1 database schema
    └── ...

사용자 정의 Docker 빌드

Docker 이미지를 사용자 정의하거나 개발 중 디버깅을 원한다면 다음 단계를 따라 수동으로 빌드할 수 있습니다:

  1. 백엔드 이미지 빌드

    # 프로젝트 루트 디렉토리에서 실행
    docker build -t cloudpaste-backend:custom -f docker/backend/Dockerfile .
    
    # 사용자 정의 빌드 이미지 실행
    docker run -d --name cloudpaste-backend \
      -p 8787:8787 \
      -v $(pwd)/sql_data:/data \
      -e ENCRYPTION_SECRET=development-test-key \
      cloudpaste-backend:custom
    
  2. 프론트엔드 이미지 빌드

    # 프로젝트 루트 디렉토리에서 실행
    docker build -t cloudpaste-frontend:custom -f docker/frontend/Dockerfile .
    
    # 사용자 정의 빌드 이미지 실행
    docker run -d --name cloudpaste-frontend \
      -p 80:80 \
      -e BACKEND_URL=http://localhost:8787 \
      cloudpaste-frontend:custom
    
  3. 개발 환경 Docker Compose

    docker-compose.dev.yml 파일 생성:

    version: "3.8"
    
    services:
      frontend:
        build:
          context: .
          dockerfile: docker/frontend/Dockerfile
        environment:
          - BACKEND_URL=http://backend:8787
        ports:
          - "80:80"
        depends_on:
          - backend
    
      backend:
        build:
          context: .
          dockerfile: docker/backend/Dockerfile
        environment:
          - NODE_ENV=development
          - RUNTIME_ENV=docker
          - PORT=8787
          - ENCRYPTION_SECRET=dev_secret_key
        volumes:
          - ./sql_data:/data
        ports:
          - "8787:8787"
    

    개발 환경 시작:

    docker-compose -f docker-compose.yml up --build
    

📄 라이선스

Apache License 2.0

이 프로젝트는 Apache License 2.0으로 라이선스되어 있습니다 - 자세한 내용은 LICENSE 파일을 참조하세요.

❤️ 기여

  • 후원: 프로젝트를 유지하는 것은 쉽지 않습니다. 이 프로젝트가 마음에 든다면 작성자에게 약간의 격려를 해주세요. 여러분의 지원은 제가 계속 나아갈 동력입니다~

스타 히스토리

Star History Chart

프로젝트가 좋다고 생각하시면 무료 스타✨✨를 주시면 감사하겠습니다!