Claude Code로 바이브코딩

이 문서는 Claude 데스크톱 앱 → Code → "+ SSH 호스트 추가" 로 이 서버에 연결해서, Claude Code 와 함께 작업하는 방법입니다.

• 내 사이트 주소: https://ppcube.golab.acego.net
• 작업 폴더(서버): ~/webapp/ ← 만든 결과물이 여기 있으면 즉시 웹 반영
• 연결 방식: 전달받은 개인키(id_ed25519) 로 SSH 접속

좋은 점: 서버에 따로 설치할 게 없습니다. 데스크톱 앱이 첫 연결 때 원격 서버에 Claude Code 를 자동으로 설치합니다. (서버는 Linux + SSH만 되면 됨)

🗺️ 한눈에 보기

작업공간 하나에서 정적 사이트 · 파이썬 동적 앱 · 공용 DB 를 모두 쓸 수 있고, 전부 같은 주소 https://ppcube.golab.acego.net 로 공개됩니다.

   인터넷
     │  https://ppcube.golab.acego.net   (HTTPS 자동 발급)
     ▼
  ┌──────────────┐
  │ Caddy (공용)  │   요청을 내 작업공간으로 전달
  └──────┬───────┘
         ▼
  ┌────────────────────┐   아래 둘 중 하나로 동작 (~/nginx 설정으로 전환)
  │ 내 nginx 컨테이너    │──(A) ~/webapp 정적 파일을 그대로 서빙
  │ (자동 실행)          │──(B) 내 백엔드 앱으로 프록시
  └────────────────────┘            │
                                     ▼
                      파이썬 앱(uv, ~/run-app.sh) ──▶ 공용 MariaDB
                      127.0.0.1:포트($PORT)            127.0.0.1:3306

💡 Claude 에게 이 구조(정적/백엔드 택1 · 포트는 환경변수 $PORT · 공용 DB는 127.0.0.1:3306)를 알려주면 알아서 맞춰 만들어 줍니다.

1. 전달받은 개인키 준비 (본인 PC, 최초 1회)

전달받은 id_ed25519 파일을 본인 PC의 안전한 위치에 두고 권한을 잠급니다.

macOS / Linux

mkdir -p ~/.ssh
mv ~/Downloads/id_ed25519 ~/.ssh/golab_ed25519
chmod 600 ~/.ssh/golab_ed25519

Windows (PowerShell)

move $HOME\Downloads\id_ed25519 $HOME\.ssh\golab_ed25519
icacls $HOME\.ssh\golab_ed25519 /inheritance:r /grant:r "$($env:USERNAME):(R)"

키 파일은 비밀번호처럼 다루세요. 남에게 공유 금지.

(권장) ~/.ssh/config 에 등록

한 번 등록해두면 호스트 별칭만으로 연결됩니다.

Host golab
    HostName golab.acego.net
    User ppcube
    IdentityFile ~/.ssh/golab_ed25519

등록 후 터미널에서 ssh golab 으로 접속되는지 먼저 확인해보면 좋습니다. (Claude Code 연결도 동일한 SSH 설정/키를 사용합니다.)

2. Claude 데스크톱에 SSH 호스트 추가

1. Claude 데스크톱 앱 → Code 탭 → + SSH 호스트 추가 (Add SSH host)
2. 입력값:

3. 추가 후 그 호스트를 선택해 연결합니다.
4. 첫 연결 시 데스크톱이 원격 서버에 Claude Code 를 자동 설치합니다 (잠깐 걸릴 수 있음). 이후 연결은 빠릅니다.

참고: Identity File 경로는 내 PC(데스크톱이 도는 컴퓨터) 기준 경로이고, 키 내용을 붙여넣는 게 아니라 파일 경로만 지정합니다. ssh -i ~/.ssh/golab_ed25519 ppcube@golab.acego.net 와 같은 원리입니다.

3. 작업 디렉토리 정하기

연결되면 Claude Code 가 원격 서버에서 동작합니다. 작업 폴더를 /home/ppcube/webapp 로 잡으세요. 이 폴더의 내용이 곧 웹사이트입니다.

Claude 에게 처음에 이렇게 알려주면 깔끔합니다:

"작업 폴더는 ~/webapp 이야. 여기에 만든 정적 파일이 곧 https://ppcube.golab.acego.net 으로 서비스돼."

4. Claude Code 와 바이브코딩하기

그냥 만들고 싶은 걸 자연어로 부탁하면 됩니다. 예:

"~/webapp 에 간단한 할 일 목록(투두) 웹앱을 HTML/CSS/JS 로 만들어줘."

Claude 가 ~/webapp 에 파일을 만들고 나면, 브라우저에서 https://ppcube.golab.acego.net 새로고침으로 바로 확인할 수 있습니다. (정적 파일은 컨테이너 재시작 불필요)

Claude 에게 알려주면 좋은 이 환경의 규칙

• 결과물은 ~/webapp/ 안에 둬야 웹에 노출됨 (index.html 이 시작점)
• nginx 설정 파일은 ~/nginx/default.conf. 설정을 바꾼 뒤에는 컨테이너 재시작 필요: bash ~/golab restart
• 컨테이너 제어 명령(필요 시 Claude 가 실행하게 해도 됨): bash ~/golab start | stop | restart | status | logs | url | rebuild
• 기본은 nginx 정적 서빙 + SPA 폴백(React/Vue 빌드 결과물 OK).

빌드가 필요한 프레임워크(React/Vite 등)를 쓸 때

빌드 산출물(dist/, build/)을 ~/webapp 으로 내보내면 됩니다. 예시로 Claude 에게:

"Vite 로 만들고, 빌드 결과(dist)가 ~/webapp 에 들어가게 설정해줘. 빌드 후 내가 새로고침하면 사이트에 반영되도록."

내가 띄운 백엔드(API)에 연결하려면

서버에서 직접 백엔드(예: localhost:3000)를 돌린다면, ~/nginx/default.conf 에 프록시를 추가하라고 Claude 에게 요청하세요. 컨테이너 → 호스트 앱은 host.containers.internal 로 닿습니다:

location /api/ {
    proxy_pass http://host.containers.internal:3000;
    proxy_set_header Host $host;
    proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
}

수정 후 ~/golab restart.

5. 공용 데이터베이스 (MariaDB)

당신 전용 DB와 계정이 중앙 MariaDB 서버에 준비돼 있습니다. Claude 에게 아래 정보를 알려주면 연결 코드를 알아서 만들어 줍니다.

Claude 에게 이렇게 부탁하면 됩니다:

"공용 MariaDB 를 쓸 거야. DB는 ppcube_db, 사용자 ppcube, 비번 ppcube_pw, 호스트 127.0.0.1, 포트 3306. 이걸로 연결해서 방명록 기능을 만들어줘. 내부 전용이라 SSL 은 꺼줘."

💡 접속 정보는 서버의 ~/golab-db.txt 에도 있습니다. 비밀번호 같은 민감정보는 코드에 직접 박지 말고 .env(환경변수)로 빼라고 Claude 에게 함께 요청하세요.

6. 파이썬 앱 만들기

파이썬 웹앱(FastAPI/Flask/Django)도 됩니다. 이 환경 규칙을 Claude 에게 알려주면 알아서 맞춰 만들어 줍니다:

"이 서버에서 파이썬은 uv 로 관리해. FastAPI 앱을 만들고 127.0.0.1:$PORT(환경변수 PORT)에 바인딩해줘. 실행은 ~/run-app.sh 에 exec uv run uvicorn main:app --host 127.0.0.1 --port \"$PORT\" 로 넣고, ~/nginx/default.conf 는 파이썬 백엔드로 프록시하게 바꿔줘. DB는 공용 MariaDB(127.0.0.1:3306, 5번 정보)를 쓰고 비번은 .env 로 빼줘."

그런 다음 실행(직접 또는 Claude 에게 시키기):

~/golab app start      # 백엔드 시작 (로그아웃해도 유지)
~/golab restart        # nginx 프록시 반영
~/golab app logs       # 문제 시 로그

💡 uv 자주 쓰는 명령: uv add <패키지>, uv run <명령>, uv sync. 코드/패키지 변경 후에는 ~/golab app restart.

7. 확인 & 문제 해결

• 사이트 확인: 브라우저에서 https://ppcube.golab.acego.net
• 안 뜨면 Claude 에게: "~/golab status 랑 ~/golab logs 확인해줘"
• 수정이 반영 안 되면: 브라우저 강력 새로고침(Ctrl/Cmd+Shift+R)
• HTTPS 인증서는 자동입니다. 따로 할 일 없습니다.

추가 디테일(SSH 설정, scp 업로드, nginx 옵션 등)은 같은 폴더의 README.md 도 참고하세요.

문제가 계속되면 관리자에게 아이디와 ~/golab logs 출력 일부를 함께 전달해 주세요.