Claude Code와 같은 coding agent에게 정적 사이트(Static Site)를 만들게 하고, 그대로 spush를 사용하여 Xserver Static에 업로드하는 핸즈온(Hands-on)입니다.

"카페 홈페이지를 만들어서 웹에 배포해줘"라는 지시로 HTML, CSS, JS를 생성하고, FTP로 공개하는 것까지 agent에게 맡깁니다.

spush는 AI로부터 렌탈 서버로 배포하기 위한 CLI입니다.

할 일

• 빈 워크스페이스(Workspace) 만들기
• Claude Code 또는 Codex 실행하기
• 카페 사이트 제작 요청하기
• Xserver Static 콘솔에서 FTP 활성화하기
• .env에 FTP 비밀번호 설정하기
• /spush skill에 해당하는 지시로 spush init, check, push, verify까지 실행하기

워크스페이스 만들기

먼저 빈 폴더를 만듭니다.

mkdir xserver-static
cd xserver-static

이 폴더에서 Claude Code나 Codex와 같은 coding agent를 실행합니다.

사이트 제작 요청하기

agent에게 다음과 같이 의뢰했습니다.

카페 홈페이지를 만들어줘.

이번에 생성된 파일은 다음 3개입니다.

index.html
styles.css
script.js

Xserver Static에서 FTP 활성화하기

이 부분만은 Xserver Static의 콘솔에서 사람이 직접 작업합니다.

Xserver Static 관리 화면을 열고, 대상 사이트 설정으로 들어갑니다.

• 사이트 설정 열기
• FTP 이용을 이용함으로 변경
• 표시된 FTP 서버(호스트)명을 복사해 두기
• 사용자명을 복사해 두기
• FTP 비밀번호를 설정하고 저장

여기서 기록해 둔 FTP 서버(호스트)명과 사용자명은 나중에 agent가 만드는 spush.yaml에 들어갑니다. 설정한 FTP 비밀번호는 .env에 넣습니다.

FTP 비밀번호를 .env에 넣기

FTP 비밀번호는 .env에 넣습니다. 기사에서는 반드시 플레이스홀더(Placeholder)로 작성해 주세요.

FTP_PASSWORD=your-ftp-password

agent에게 spush로 배포 요청하기

agent에게 다음과 같이 의뢰했습니다.

/spush skill로 사이트 설정을 하고, 업로드해줘

이후부터는 사람이 명령어를 순서대로 입력하는 작업이 아닙니다.

이 한마디를 듣고, agent가 spush skill을 읽어 필요한 설정 파일을 만들고, 접속 확인, dry-run, 본 서버 업로드, verify까지 진행합니다.

spush skill은 agent를 위해 표준적인 작업 순서를 제공합니다. agent는 이 가이드를 읽고 다음에 무엇을 실행해야 할지 판단합니다.

1. Inspect the project and identify the source directory
2. If spush.yaml is missing, create it with spush init
3. Validate configuration and credentials with spush check --env-file .env
...

agent의 작업 로그: spush init

agent는 먼저 spush.yaml이 없는 것을 확인하고 init을 실행했습니다.

agent가 실행한 명령어:

spush init --provider xserver --template static

출력:

ok | 0ms

agent의 작업 로그: spush.yaml 조정

agent는 생성된 설정을 보고 이번 사이트 구성에 맞게 spush.yaml을 조정했습니다.

이번 사이트는 빌드(Build) 과정 없이 워크스페이스 직하의 index.html, styles.css, script.js를 그대로 공개합니다.

agent가 최종적으로 만든 spush.yaml은 다음과 같은 형태입니다.

source: .
include: ["index.html", "styles.css", "script.js"]
exclude: [".DS_Store", ".env", ".gitignore", ".spush/**", "spush.yaml"]
...

Xserver Static의 FTP 로그인 직후 위치를 공개 루트 (public root)로 사용할 경우, remote_dir는 /.로 설정합니다.

agent의 작업 로그: check

설정 후, agent는 FTP 인증과 원격 디렉토리 (remote directory)를 검증했습니다.

agent가 실행한 명령:

spush check --env-file .env --json

실행 로그:

{"ok":true,"command":"check","durationMs":231,"remoteDir":"/."}

여기서 FTP 인증과 원격 디렉토리의 존재 확인을 완료했습니다.

agent의 작업 로그: dry-run

실제 업로드 (production upload)를 하기 전에, agent는 dry-run을 실행했습니다.

spush push --dry-run --env-file .env --json

실행 로그:

{
"ok": true,
"command": "push",
...

uploaded: 3이므로, 예상대로 index.html, styles.css, script.js 3개의 파일만이 대상입니다.

agent는 dry-run 결과를 통해 업로드 대상이 예상대로 3개의 파일뿐이며, 삭제나 경고도 없음을 확인했습니다. 이번에는 요청문에 "업로드해줘"라는 내용이 포함되어 있으므로, 그대로 실제 업로드로 진행했습니다.

agent의 작업 로그: push 및 verify

dry-run 결과에 문제가 없었기 때문에, agent는 실제 업로드와 verify를 실행했습니다.

spush push --env-file .env --verify --json

실행 로그:

{
"ok": true,
"command": "push",
...

이로써 FTP 업로드와 HTTP 상태 코드 (HTTP status) 확인까지 완료되었습니다.

제작한 사이트는 여기 있습니다.

등록 직후 URL 반영을 기다리는 중인 경우

Xserver Static을 등록한 직후에는, 공개 URL에 접속해도 다음과 같은 표시가 나타날 수 있습니다.

무효한 URL입니다.
프로그램 설정 반영을 기다리는 중일 수 있습니다.
잠시 후 다시 접속을 시도해 주세요.

기다리면 해결됩니다.

요약

AI로 사이트를 만들었다면 spush와 Xserver Static으로 웹에 공개해 보세요.

Discussion