ChatGPT Web Midjourney Proxy: 통합 AI 플랫폼 완전 가이드
⏱️ 예상 읽기 시간: 15분
서론
현대의 AI 환경에서는 다양한 AI 서비스들을 효율적으로 통합하고 운영하는 것이 중요합니다. ChatGPT Web Midjourney Proxy는 ChatGPT, Midjourney, GPTs, Suno, Luma, Runway 등 주요 AI 서비스들을 하나의 통합된 웹 인터페이스로 제공하는 AgentOps 플랫폼입니다.
이 가이드에서는 macOS 환경에서 Docker를 활용하여 통합 AI 플랫폼을 구축하고 운영하는 방법을 단계별로 설명합니다.
프로젝트 개요
주요 특징
🤖 AI 서비스 통합
- ChatGPT (GPT-3.5, GPT-4, GPT-4o)
- Midjourney 이미지 생성
- GPT Store 통합
- Suno 음악 생성
- Luma, Runway, Pika 비디오 생성
- Realtime API 지원
🌐 플랫폼 지원
- Web / PWA
- Linux / Windows / macOS
- Docker 컨테이너
- Kubernetes 배포
🎨 고급 기능
- 음성 인식 (Whisper)
- 텍스트 음성 변환 (TTS)
- 이미지 업로드 및 분석
- 파일 업로드 (Cloudflare R2)
- 다국어 지원
기술 스택 분석
프론트엔드
{
"framework": "Vue.js 3.5.18",
"ui_library": "Naive UI 2.42.0",
"styling": "Tailwind CSS 3.4.17",
"state_management": "Pinia 2.3.1",
"build_tool": "Vite 4.5.14",
"typescript": "4.9.5"
}
백엔드 & 통합
dependencies:
- OpenAI API (ChatGPT, Whisper, TTS)
- Midjourney Proxy API
- Suno API
- Luma API
- Runway API
- Cloudflare R2 Storage
개발환경 요구사항
- Docker: 28.2.2+
- Node.js: 22.17.1+
- pnpm: 10.13.1+
- macOS: Monterey 이상
macOS 환경 설정
1. 개발환경 확인
# 개발환경 버전 확인
docker --version
# Docker version 28.2.2, build e6534b4
node --version
# v22.17.1
npm --version
# 10.9.2
2. pnpm 설치
# pnpm 전역 설치
npm install -g pnpm
# 버전 확인
pnpm --version
# 10.13.1
프로젝트 설치 및 설정
1. 프로젝트 클론
# 프로젝트 클론
git clone https://github.com/Dooy/chatgpt-web-midjourney-proxy.git
cd chatgpt-web-midjourney-proxy
# 디렉토리 구조 확인
ls -la
2. 의존성 설치
# 프로젝트 의존성 설치
pnpm install
# 설치된 주요 패키지 확인
pnpm list --depth=0
설치 결과 (주요 패키지):
dependencies:
+ @ffmpeg/ffmpeg 0.12.15 (미디어 처리)
+ @vueuse/core 9.13.0 (Vue 유틸리티)
+ gpt-tokenizer 2.9.0 (토큰 계산)
+ highlight.js 11.11.1 (코드 하이라이팅)
+ naive-ui 2.42.0 (UI 컴포넌트)
+ vue 3.5.18 (Vue 프레임워크)
+ vue-router 4.5.1 (라우팅)
3. 환경변수 설정
# 환경변수 파일 생성
cat > .env.local << 'EOF'
# API 기본 설정
VITE_GLOB_API_URL=/api
VITE_APP_API_BASE_URL=http://127.0.0.1:3002
VITE_GLOB_OPEN_LONG_REPLY=false
VITE_GLOB_APP_PWA=false
# OpenAI 설정
OPENAI_API_KEY=sk-your-openai-api-key
OPENAI_API_BASE_URL=https://api.openai.com
OPENAI_API_MODEL=gpt-4o
# Midjourney 설정
MJ_SERVER=https://your-midjourney-server.com
MJ_API_SECRET=your-midjourney-api-secret
# Suno 음악 생성 설정
SUNO_SERVER=https://your-suno-server.com
SUNO_KEY=your-suno-api-key
# Luma 비디오 생성 설정
LUMA_SERVER=https://your-luma-server.com
LUMA_KEY=your-luma-api-key
# 보안 설정
AUTH_SECRET_KEY=your-secret-key
# UI 설정
SYS_THEME=dark
UPLOAD_IMG_SIZE=1
EOF
Docker 배포 설정
1. Docker Compose 설정
# docker-compose.yml
version: '3'
services:
gptweb:
container_name: chatgpt-web-midjourney-proxy
image: ydlhero/chatgpt-web-midjourney-proxy:latest
ports:
- "6050:3002"
environment:
TZ: Asia/Seoul
# OpenAI 설정
OPENAI_API_KEY: ${OPENAI_API_KEY}
OPENAI_API_BASE_URL: ${OPENAI_API_BASE_URL}
OPENAI_API_MODEL: ${OPENAI_API_MODEL}
# Midjourney 설정
MJ_SERVER: ${MJ_SERVER}
MJ_API_SECRET: ${MJ_API_SECRET}
# Suno 설정
SUNO_SERVER: ${SUNO_SERVER}
SUNO_KEY: ${SUNO_KEY}
# Luma 설정
LUMA_SERVER: ${LUMA_SERVER}
LUMA_KEY: ${LUMA_KEY}
# 파일 업로드 설정
API_UPLOADER: 1
UPLOAD_IMG_SIZE: 10
# UI 설정
SYS_THEME: dark
# Cloudflare R2 설정 (선택사항)
R2_DOMAIN: ${R2_DOMAIN}
R2_BUCKET_NAME: ${R2_BUCKET_NAME}
R2_ACCOUNT_ID: ${R2_ACCOUNT_ID}
R2_KEY_ID: ${R2_KEY_ID}
R2_KEY_SECRET: ${R2_KEY_SECRET}
volumes:
- ./uploads:/app/uploads
restart: unless-stopped
2. Docker 컨테이너 실행
# 환경변수 파일 생성
cp .env.local .env
# 컨테이너 실행
docker-compose up -d
# 컨테이너 상태 확인
docker-compose ps
# 로그 확인
docker-compose logs -f gptweb
로컬 개발 환경 실행
1. 개발 서버 시작
# 개발 서버 실행
pnpm dev
# 브라우저에서 접속
open http://localhost:3000
2. 빌드 및 프로덕션 배포
# 프로덕션 빌드
pnpm build
# 빌드 결과 미리보기
pnpm preview
고급 설정 및 최적화
1. Cloudflare R2 파일 저장소 설정
# R2 설정 (월 10GB 무료)
R2_DOMAIN=your-r2-domain.com
R2_BUCKET_NAME=your-bucket-name
R2_ACCOUNT_ID=your-account-id
R2_KEY_ID=your-key-id
R2_KEY_SECRET=your-key-secret
2. 보안 강화 설정
# 브루트포스 방지 설정
AUTH_SECRET_ERROR_COUNT=3 # 최대 시도 횟수
AUTH_SECRET_ERROR_TIME=10 # 잠금 시간(분)
# nginx 프록시 설정 (선택사항)
proxy_set_header X-Forwarded-For $remote_addr;
3. 커스텀 모델 설정
# 모델 숨기기/추가
CUSTOM_MODELS=-gpt-3.5-turbo-0301,custom-model-4.5
# 비전 모델 설정
VISION_MODEL=gpt-4o
CUSTOM_VISION_MODELS=gpt-4o,gpt-4-turbo,claude-3-opus
실전 사용 시나리오
1. 멀티모달 AI 워크플로우
텍스트 → 이미지 → 비디오 파이프라인:
// 1. ChatGPT로 아이디어 생성
const ideaPrompt = "창의적인 SF 단편 스토리 아이디어"
// 2. Midjourney로 컨셉 아트 생성
const imagePrompt = "futuristic cityscape with flying cars, cyberpunk style"
// 3. Luma로 비디오 생성
const videoPrompt = "camera flying through the cyberpunk city"
// 4. Suno로 배경음악 생성
const musicPrompt = "cyberpunk synthwave background music"
2. AI 에이전트 통합 운영
# 에이전트 역할 분담
agents:
content_creator:
- ChatGPT: 스크립트 작성
- Midjourney: 썸네일 생성
- Suno: 배경음악 제작
video_producer:
- Luma: 주요 장면 생성
- Runway: 전환 효과
- Pika: 캐릭터 애니메이션
qa_agent:
- Claude: 내용 검토
- GPT-4: 품질 평가
3. 실시간 상호작용
// Realtime API 설정
const realtimeConfig = {
model: "gpt-4o-realtime-preview",
voice: "alloy",
turn_detection: {
type: "server_vad",
threshold: 0.5
},
input_audio_transcription: {
model: "whisper-1"
}
}
성능 최적화 가이드
1. 메모리 사용량 최적화
// 토큰 계산 최적화
import { encode } from 'gpt-tokenizer'
const optimizeTokens = (text, maxTokens = 4000) => {
const tokens = encode(text)
if (tokens.length > maxTokens) {
return decode(tokens.slice(0, maxTokens))
}
return text
}
2. 캐싱 전략
// 응답 캐싱 설정
const cacheConfig = {
// 이미지 생성 결과 캐싱
midjourney: {
ttl: 86400, // 24시간
storage: 'redis'
},
// API 응답 캐싱
openai: {
ttl: 3600, // 1시간
storage: 'memory'
}
}
3. 로드 밸런싱
# nginx 설정
upstream chatgpt_backend {
server 127.0.0.1:6050 weight=1;
server 127.0.0.1:6051 weight=1;
server 127.0.0.1:6052 weight=1;
}
server {
location / {
proxy_pass http://chatgpt_backend;
proxy_set_header X-Forwarded-For $remote_addr;
}
}
모니터링 및 로깅
1. 시스템 모니터링
# 컨테이너 리소스 모니터링
docker stats chatgpt-web-midjourney-proxy
# 로그 실시간 모니터링
docker logs -f chatgpt-web-midjourney-proxy
# 에러 로그 필터링
docker logs chatgpt-web-midjourney-proxy 2>&1 | grep ERROR
2. API 사용량 추적
// API 사용량 모니터링
const apiMetrics = {
openai: {
requests: 0,
tokens: 0,
cost: 0
},
midjourney: {
generations: 0,
fast_hours: 0
},
suno: {
credits: 0,
songs: 0
}
}
트러블슈팅
1. 일반적인 문제들
Docker 포트 충돌:
# 포트 사용 중인 프로세스 확인
lsof -i :6050
# 포트 변경
docker-compose down
# docker-compose.yml에서 포트 수정 후
docker-compose up -d
API 키 오류:
# 환경변수 확인
docker exec chatgpt-web-midjourney-proxy env | grep API_KEY
# 키 형식 검증
echo $OPENAI_API_KEY | wc -c # 51자여야 함
메모리 부족:
# Docker 메모리 제한 설정
docker-compose.yml:
deploy:
resources:
limits:
memory: 2G
reservations:
memory: 1G
2. 성능 이슈 해결
느린 응답 시간:
// 타임아웃 설정 조정
const apiConfig = {
timeout: 60000, // 60초
retries: 3, // 재시도 횟수
retryDelay: 1000 // 재시도 간격
}
이미지 업로드 실패:
# 업로드 크기 제한 확인
UPLOAD_IMG_SIZE=10 # 10MB로 증가
# 디스크 공간 확인
df -h
보안 고려사항
1. API 키 보안
# 환경변수 암호화
echo "OPENAI_API_KEY=sk-..." | base64
# Docker secrets 사용
docker secret create openai_key openai_key.txt
2. 네트워크 보안
# nginx SSL 설정
server {
listen 443 ssl http2;
server_name your-domain.com;
ssl_certificate /path/to/cert.pem;
ssl_certificate_key /path/to/key.pem;
location / {
proxy_pass http://127.0.0.1:6050;
proxy_set_header Host $host;
proxy_set_header X-Real-IP $remote_addr;
}
}
3. 접근 제어
// 사용자 인증 미들웨어
const authMiddleware = (req, res, next) => {
const token = req.headers.authorization
if (!validateToken(token)) {
return res.status(401).json({ error: 'Unauthorized' })
}
next()
}
Kubernetes 배포
1. Kubernetes 매니페스트
# k8s-deployment.yaml
apiVersion: apps/v1
kind: Deployment
metadata:
name: chatgpt-web-midjourney
spec:
replicas: 3
selector:
matchLabels:
app: chatgpt-web-midjourney
template:
metadata:
labels:
app: chatgpt-web-midjourney
spec:
containers:
- name: chatgpt-web
image: ydlhero/chatgpt-web-midjourney-proxy:latest
ports:
- containerPort: 3002
env:
- name: OPENAI_API_KEY
valueFrom:
secretKeyRef:
name: api-secrets
key: openai-key
resources:
requests:
memory: "512Mi"
cpu: "250m"
limits:
memory: "1Gi"
cpu: "500m"
---
apiVersion: v1
kind: Service
metadata:
name: chatgpt-web-service
spec:
selector:
app: chatgpt-web-midjourney
ports:
- port: 80
targetPort: 3002
type: LoadBalancer
2. 배포 실행
# Secret 생성
kubectl create secret generic api-secrets \
--from-literal=openai-key=sk-your-key
# 배포 실행
kubectl apply -f k8s-deployment.yaml
# 상태 확인
kubectl get pods
kubectl get services
비용 최적화 전략
1. API 비용 관리
// 토큰 사용량 최적화
const costOptimization = {
// 모델별 비용 설정
models: {
'gpt-4o': { input: 0.005, output: 0.015 },
'gpt-3.5-turbo': { input: 0.001, output: 0.002 }
},
// 자동 모델 선택
selectModel: (complexity) => {
return complexity > 0.7 ? 'gpt-4o' : 'gpt-3.5-turbo'
}
}
2. 리소스 관리
# 리소스 제한 설정
resources:
requests:
memory: "256Mi"
cpu: "100m"
limits:
memory: "1Gi"
cpu: "500m"
확장성 고려사항
1. 마이크로서비스 아키텍처
# 서비스 분리
services:
chatgpt-service:
image: chatgpt-service:latest
midjourney-service:
image: midjourney-service:latest
suno-service:
image: suno-service:latest
api-gateway:
image: nginx:latest
2. 이벤트 드리븐 아키텍처
// 이벤트 기반 처리
const eventBus = {
// 이미지 생성 완료 이벤트
'image.generated': (data) => {
// 비디오 생성 트리거
videoService.generate(data.imageUrl)
},
// 음악 생성 완료 이벤트
'music.generated': (data) => {
// 최종 결합 처리
contentService.combine(data)
}
}
테스트 및 자동화
1. 자동화 테스트 스크립트
#!/bin/bash
# test-automation.sh
echo "🧪 ChatGPT Web Midjourney Proxy 자동 테스트 시작..."
# 환경 확인
check_environment() {
echo "📋 환경 확인 중..."
docker --version || exit 1
node --version || exit 1
pnpm --version || exit 1
}
# 의존성 설치 테스트
test_dependencies() {
echo "📦 의존성 설치 테스트..."
pnpm install --frozen-lockfile || exit 1
}
# 빌드 테스트
test_build() {
echo "🔨 빌드 테스트..."
pnpm build || exit 1
}
# API 테스트
test_api() {
echo "🌐 API 테스트..."
pnpm dev &
DEV_PID=$!
sleep 10
curl -f http://localhost:3000 || {
kill $DEV_PID
exit 1
}
kill $DEV_PID
}
# Docker 테스트
test_docker() {
echo "🐳 Docker 테스트..."
docker-compose up -d || exit 1
sleep 15
curl -f http://localhost:6050 || exit 1
docker-compose down
}
# 모든 테스트 실행
main() {
check_environment
test_dependencies
test_build
test_api
test_docker
echo "✅ 모든 테스트 통과!"
}
main "$@"
2. GitHub Actions CI/CD
# .github/workflows/ci.yml
name: CI/CD Pipeline
on:
push:
branches: [ main ]
pull_request:
branches: [ main ]
jobs:
test:
runs-on: ubuntu-latest
steps:
- uses: actions/checkout@v3
- name: Setup Node.js
uses: actions/setup-node@v3
with:
node-version: '22'
- name: Setup pnpm
uses: pnpm/action-setup@v2
with:
version: 10
- name: Install dependencies
run: pnpm install
- name: Run tests
run: pnpm test
- name: Build application
run: pnpm build
- name: Docker build
run: docker build -t chatgpt-web-test .
결론
ChatGPT Web Midjourney Proxy는 다양한 AI 서비스를 통합하여 운영하는 현대적인 AgentOps 플랫폼입니다. 이 가이드를 통해 다음과 같은 내용을 다뤘습니다:
주요 성과
✅ 통합 AI 플랫폼 구축: ChatGPT, Midjourney, Suno, Luma 등 8개 AI 서비스 통합
✅ Docker 기반 배포: 컨테이너 환경에서 안정적인 운영
✅ Vue.js 3 기반 모던 UI: 반응형 웹 인터페이스
✅ 확장 가능한 아키텍처: Kubernetes 지원 및 마이크로서비스
✅ 보안 및 모니터링: 인증, 로깅, 성능 최적화
실제 테스트 결과
# macOS 환경 테스트 (2025-08-19)
Docker version: 28.2.2
Node.js version: v22.17.1
pnpm version: 10.13.1
# 패키지 설치 성공
✅ 907개 패키지 설치 완료
✅ Vue.js 3.5.18 설치
✅ Naive UI 2.42.0 설치
✅ 빌드 도구 설정 완료
AgentOps 관점에서의 가치
이 플랫폼은 다음과 같은 AgentOps 핵심 가치를 제공합니다:
- 통합 운영: 여러 AI 에이전트를 하나의 인터페이스로 관리
- 확장성: 새로운 AI 서비스 쉽게 추가 가능
- 모니터링: 실시간 성능 및 비용 추적
- 자동화: CI/CD 파이프라인을 통한 배포 자동화
- 보안: API 키 관리 및 접근 제어
다음 단계 제안
- 메트릭 대시보드: Grafana 연동 모니터링 구축
- AI 워크플로우 자동화: GitHub Actions와 AI 서비스 연동
- 다중 사용자 지원: 사용자별 리소스 할당 및 관리
- 비용 최적화: AI 모델 자동 선택 및 사용량 기반 스케일링
이 통합 AI 플랫폼을 통해 복잡한 AI 워크플로우를 효율적으로 관리하고, AgentOps의 모범 사례를 구현할 수 있습니다.
추가 리소스
- GitHub: chatgpt-web-midjourney-proxy
- Docker Hub: ydlhero/chatgpt-web-midjourney-proxy
- 공식 문서: 프로젝트 README
- 관련 API: OpenAI, Midjourney, Suno