📸 데모 • ✨ 기능 • 🚀 배포 가이드 • 🔧 기술 스택 • 💻 개발 • 📄 라이선스
![]() | ![]() |
![]() | ![]() |
![]() | ![]() |
![]() | ![]() |
배포를 시작하기 전에 다음을 준비했는지 확인하세요:
S3_ACCESS_KEY_ID
S3_SECRET_ACCESS_KEY
S3_BUCKET_NAME
S3_ENDPOINT
GitHub Actions를 사용하면 코드 푸시 후 애플리케이션 자동 배포가 가능합니다.
Secret 이름 | 필수 | 용도 |
---|---|---|
CLOUDFLARE_API_TOKEN | ✅ | Cloudflare API 토큰 (Workers, D1 및 Pages 권한 필요) |
CLOUDFLARE_ACCOUNT_ID | ✅ | Cloudflare 계정 ID |
ENCRYPTION_SECRET | ❌ | 민감 데이터 암호화 키 (제공되지 않으면 자동 생성됨) |
새 API 토큰 생성
"Edit Cloudflare Workers" 템플릿 선택, D1 데이터베이스 편집 권한 추가
저장소 포크, 시크릿 입력 후 워크플로우 실행!!!
backend
디렉토리 파일 변경 및 main
또는 master
브랜치에 푸시될 때마다 자동으로 배포 트리거됩니다. 워크플로우는 다음과 같이 진행됩니다:
⚠️ 백엔드 도메인 이름 기억 필수
저장소 포크, 시크릿 입력 후 워크플로우 실행.
frontend
디렉토리 파일 변경 및 main
또는 master
브랜치에 푸시될 때마다 자동으로 배포 트리거됩니다. 배포 후 Cloudflare Pages 제어판에서 환경 변수 설정 필요:
Cloudflare 대시보드 로그인
Pages → 프로젝트 (예: "cloudpaste-frontend")로 이동
"Settings" → "Environment variables" 클릭
환경 변수 추가:
이름: VITE_BACKEND_URL
값: 백엔드 Worker URL (예: https://cloudpaste-backend.your-username.workers.dev
), 끝에 "/" 없음. 사용자 정의 Worker 백엔드 도메인 사용 권장.
"https://xxxx.com" 형식으로 완전한 백엔드 도메인 이름 입력 필수
중요한 단계: 백엔드 도메인 로딩 완료를 위해 프론트엔드 워크플로우 다시 실행!!!
단계를 엄격히 따르지 않으면 백엔드 도메인 로딩 실패
Vercel의 경우 다음과 같이 배포 권장:
Framework Preset: Vite
Build Command: npm run build
Output Directory: dist
Install Command: npm install
☝️ 위 방법 중 하나 선택
git clone https://github.com/ling-drag0n/CloudPaste.git
cd CloudPaste/backend
종속성 설치
npm install
Cloudflare 로그인
npx wrangler login
D1 데이터베이스 생성
npx wrangler d1 create cloudpaste-db
출력에서 데이터베이스 ID 기록.
wrangler.toml 구성 수정
[[d1_databases]]
binding = "DB"
database_name = "cloudpaste-db"
database_id = "YOUR_DATABASE_ID"
Worker 배포
npx wrangler deploy
출력에서 URL 기록; 이는 백엔드 API 주소입니다.
데이터베이스 초기화 (자동) Worker URL 방문하여 초기화 트리거:
https://cloudpaste-backend.your-username.workers.dev
⚠️ 보안 알림: 시스템 초기화 후 즉시 기본 관리자 비밀번호 변경 필수 (사용자 이름: admin, 비밀번호: admin123).
프론트엔드 코드 준비
cd CloudPaste/frontend
npm install
환경 변수 구성
.env.production
파일 생성 또는 수정:
VITE_BACKEND_URL=https://cloudpaste-backend.your-username.workers.dev
VITE_APP_ENV=production
VITE_ENABLE_DEVTOOLS=false
프론트엔드 프로젝트 빌드
npm run build
Cloudflare Pages에 배포
방법 1: Wrangler CLI 통해
npx wrangler pages deploy dist --project-name=cloudpaste-frontend
방법 2: Cloudflare 대시보드 통해
dist
디렉토리에서 파일 업로드프론트엔드 코드 준비
cd CloudPaste/frontend
npm install
Vercel CLI 설치 및 로그인
npm install -g vercel
vercel login
환경 변수 구성, Cloudflare Pages와 동일
빌드 및 배포
vercel --prod
프로젝트 구성 프롬프트 따르기.
등록 링크: Claw Cloud (#AFF 없음) 신용카드 불필요, GitHub 등록일이 180일 이상이면 매월 $5 크레딧 제공.
등록 후 홈페이지에서 APP Launchpad 클릭, 우측 상단에서 앱 생성 클릭
먼저 백엔드 배포, 그림 참조 (참고용):
백엔드 데이터 저장소 위치:
그 다음 프론트엔드, 그림 참조 (참고용):
CloudPaste 백엔드는 공식 Docker 이미지를 사용하여 빠르게 배포 가능.
데이터 저장 디렉토리 생성
mkdir -p sql_data
백엔드 컨테이너 실행
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을 사용자 정의하고 안전하게 보관 필수, 이 키는 민감 데이터 암호화에 사용됨.
프론트엔드는 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 pull dragon730/cloudpaste-backend:latest
docker pull dragon730/cloudpaste-frontend:latest
이전 컨테이너 중지 및 제거
docker stop cloudpaste-backend cloudpaste-frontend
docker rm cloudpaste-backend cloudpaste-frontend
위와 동일한 실행 명령으로 새 컨테이너 시작 (데이터 디렉토리 및 구성 보존)
Docker Compose를 사용하면 프론트엔드 및 백엔드 서비스를 한 번의 클릭으로 배포 가능, 가장 간단한 권장 방법.
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
docker-compose up -d
⚠️ 보안 알림: 시스템 초기화 후 즉시 기본 관리자 비밀번호 변경 필수 (사용자 이름: admin, 비밀번호: admin123).
프론트엔드: http://your-server-ip:80
백엔드: http://your-server-ip:8787
새 버전으로 업데이트 필요 시:
최신 이미지 풀
docker-compose pull
새 이미지로 컨테이너 재생성 (데이터 볼륨 보존)
docker-compose up -d --force-recreate
💡 팁: 구성 변경 시 데이터 백업 및 docker-compose.yml 파일 수정 필요할 수 있음
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) 구성 권장.
Cloudflare 대시보드에 로그인
R2 Storage를 클릭하고 버킷을 생성합니다.
API 토큰 생성
생성 후 모든 데이터를 저장해두세요. 나중에 필요합니다.
크로스 오리진 규칙 설정: 해당 버킷을 클릭하고 Settings를 클릭한 후 아래와 같이 CORS 정책을 편집합니다:
[
{
"AllowedOrigins": ["http://localhost:3000", "https://replace-with-your-frontend-domain"],
"AllowedMethods": ["GET", "PUT", "POST", "DELETE", "HEAD"],
"AllowedHeaders": ["*"],
"ExposeHeaders": ["ETag"],
"MaxAgeSeconds": 3600
}
]
B2 계정이 없는 경우 먼저 가입한 후 버킷을 생성하세요.
사이드바에서 Application Key를 클릭하고 Create Key를 클릭한 후 설명에 따라 진행합니다.
B2 크로스 오리진 설정; B2 크로스 오리진 설정은 더 복잡하니 주의하세요.
먼저 옵션 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는 필요에 따라 구성할 수 있으며, 여기서는 모두 허용합니다.
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
를 실행하여 서비스를 시작하세요.
리버스 프록시 설정 (참고)
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;
}
콘솔 접근하여 버킷 및 액세스 키 생성
자세한 구성은 공식 문서 참조:
https://min.io/docs/minio/container/index.html
CN: https://min-io.cn/docs/minio/container/index.html
추가 설정 (선택 사항)
허용된 오리진에는 프론트엔드 도메인이 포함되어야 합니다.
CloudPaste에서 MinIO 구성
https://minio.example.com
)문제 해결
proxy_set_header Accept-Encoding "identity"
를 추가해야 할 수 있으며, 캐싱 문제도 고려해야 합니다. DNS 해결만 사용하는 것이 좋습니다.proxy_cache off
및 proxy_buffering off
가 포함되어 있는지 확인MINIO_SERVER_URL
및 MINIO_BROWSER_REDIRECT_URL
이 올바르게 설정되었는지 확인Connection "upgrade"
확인CloudPaste는 간단한 WebDAV 프로토콜 지원을 제공하여 스토리지 공간을 네트워크 드라이브로 마운트할 수 있게 하여 파일 관리자를 통해 직접 파일에 접근하고 관리할 수 있도록 합니다.
https://your-backend-domain/dav
관리자 계정과 비밀번호를 사용하여 WebDAV 서비스에 직접 접근:
더 안전한 접근 방법을 위해 전용 API 키를 생성하는 것이 좋습니다:
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;
}
연결 문제:
권한 오류:
⚠️⚠️ WebDAV 업로드 문제:
서버 직접 파일 업로드 API 문서 - 서버 직접 파일 업로드 인터페이스에 대한 상세 설명
프로젝트 저장소 복제
git clone https://github.com/ling-drag0n/cloudpaste.git
cd cloudpaste
백엔드 설정
cd backend
npm install
# D1 데이터베이스 초기화
wrangler d1 create cloudpaste-db
wrangler d1 execute cloudpaste-db --file=./schema.sql
프론트엔드 설정
cd frontend
npm install
환경 변수 구성
backend
디렉토리에서 wrangler.toml
파일을 생성하여 개발 환경 변수 설정frontend
디렉토리에서 .env.development
파일을 구성하여 프론트엔드 환경 변수 설정개발 서버 시작
# 백엔드
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 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
프론트엔드 이미지 빌드
# 프로젝트 루트 디렉토리에서 실행
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
개발 환경 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 파일을 참조하세요.
프로젝트가 좋다고 생각하시면 무료 스타✨✨를 주시면 감사하겠습니다!