클로드 코드로 앱 만들고 VPS 배포 + 커스텀 도메인·SSL 연결

01핵심 개요

02핵심 내용 구조

AI 코딩 도구로 MVP를 몇 시간 만에 만들 수 있게 됐지만, 비개발자에게 혼란스러운 부분은 '그다음'이다. 코드를 실제 인터넷에 배포하고 커스텀 도메인을 연결해야 남들이 쓸 수 있다. 이 영상은 빌드 → 배포 → 도메인·SSL → E2E 테스트의 완결 흐름을 다룬다. (0:00 딥링크)

03기술적 맥락 — 로컬 개발과 실제 서비스의 차이

앱을 만들면 코드는 내 컴퓨터에서만 돈다. 배포하지 않으면 아무도 접근할 수 없다. 예제에서는 인증·DB 없이 로컬 스토리지로 시작해 워크플로우 자체에 집중하고, 환경변수(AssemblyAI·OpenAI API 키)를 .env에 넣어 로컬에서 먼저 구동 확인한다. (2:52 딥링크)

04전략적 의미 — 배포 자동화

GitHub 저장소와 호스팅을 연결하면 '자동 배포(auto-deploy)'가 켜진다. 이후 코드를 수정해 GitHub에 푸시하기만 하면 호스팅이 변경을 자동 감지해 재배포한다(예: 테마 색상을 보라 → 빨강으로 바꾸고 푸시하면 자동 반영). (13:20 딥링크)

05핵심 워크플로우 — 빌드부터 라이브까지

1. 앱 빌드: 터미널에서 클로드 코드 실행, 상세 프롬프트로 Next.js 풀스택 앱 생성. API 키를 .env에 넣고 npm run dev로 localhost 확인.
2. GitHub 푸시: "비공개 레포 만들어 이 프로젝트 푸시해줘"라고 요청 → 클로드가 인증·명령 실행 후 레포 생성·푸시.
3. VPS 배포: 호스팅(예: Hostinger 웹앱 호스팅)에서 'deploy web app' → GitHub 연결 → 레포 선택 → 환경변수 입력 → 배포.
4. 도메인·SSL: 커스텀 도메인 연결 후 DNS 전파·SSL 자동 구성. 도메인이 외부(예: Cloudflare)에 있으면 A레코드에 서버 IP를 지정.
5. E2E 테스트: TestSprite CLI를 클로드 코드에 붙여 "프론트엔드 테스트 2~3개 실행" 프롬프트 → AI가 테스트 케이스 생성·실행·녹화, 실패 시 후속 프롬프트로 자동 수정.

06활용 시나리오

• 비개발자 SaaS 런칭: 아이디어를 프롬프트로 앱화한 뒤 원클릭 배포로 실제 서비스 오픈.
• 지속 개선 파이프라인: 기능 추가 → GitHub 푸시 → 자동 재배포로 무중단 업데이트.
• 품질 게이트: TestSprite의 GitHub 앱 연동으로 푸시 시 자동 테스트, 실패하면 main 머지 차단.

07현황 및 전망

클로드 코드·커서·코덱스 등 AI 코딩 도구와 원클릭 호스팅, AI 테스트 에이전트가 결합되며 '앱 생성 → 배포 → 테스트'의 전 과정이 비개발자에게도 15~30분 수준으로 압축됐다. 진입장벽이 코딩에서 '아이디어와 배포 워크플로우 이해'로 이동하고 있다.

08용어 사전