localhost에서 도는 앱을 어떻게 남들이 보게 하나요?

빌드 결과물을 무료 호스팅에 올리면 됩니다. 정적·SPA면 Cloudflare Pages(wrangler pages deploy dist), 구글 시트·계정에 붙는 도구면 Apps Script 웹앱(clasp)으로 배포합니다. 둘 다 무료 링크와 HTTPS가 나옵니다.

Cloudflare랑 GAS 중 뭘 골라야 하나요?

정적 사이트나 SPA(React·Vite·Astro·Next 정적 빌드)면 Cloudflare Pages, 구글 시트·Gmail·Drive 데이터를 다루는 도구면 GAS입니다.

로컬에선 잘 되는데 배포하면 깨지는 이유는?

보통 셋 중 하나입니다. API 주소를 localhost로 하드코딩, 환경변수가 빌드에 안 들어감(Vite는 VITE_ 접두사 필요), SPA 새로고침 시 404(서버에 _redirects로 index.html 폴백 필요). 키를 프론트에서 직접 부르는 것도 흔한 실수입니다.

배포가 정말 무료인가요?

소규모는 0원에 가깝습니다. Cloudflare Pages 무료 한도와 구글 무료 실행 한도 안에서 돌기 때문입니다. 트래픽이 크거나 외부 유료 API를 부르면 그만큼 비용이 생깁니다.

예쁜 프론트 만들었는데 localhost에서만 돌아요... 이제 어떻게 배포함?

결론 먼저: AI가 예쁜 프론트를 만들어줬다. 근데 localhost:3000. 그건 세상에서 너 혼자 보는 화면이다. 배포 안 하면 안 만든 거나 같다. 무료로 띄우는 길은 둘 — Cloudflare(정적·SPA) 아니면 GAS(구글 시트·계정 연동). 5분이면 남들이 링크로 연다.

핵심

localhost는 “내 컴퓨터에서만”. 배포 = “인터넷 어디서나 링크로”. 로컬 빌드 결과물을 무료 호스팅에 올리면 끝이다. 핵심은 빌드 → 그 결과 폴더를 업로드, 두 단계뿐이다.

먼저: 내 빌드 결과물은 어디 나오나

npm run build를 치면 정적 파일이 한 폴더에 모인다. 프레임워크마다 폴더 이름이 다르다. 이 폴더를 통째로 올리는 게 배포다.

프레임워크	빌드 명령	결과 폴더
Vite (React·Vue·Svelte)	`npm run build`	`dist`
Create React App	`npm run build`	`build`
Astro	`npm run build`	`dist`
Next.js (정적 export)	`next build` (`output: 'export'`)	`out`

뭘 만들었는지로 갈린다

정적·SPA (Vite·React·Astro·Next 정적 빌드) → Cloudflare Pages.
구글 시트·Gmail·Drive에 붙는 도구 → Apps Script 웹앱(GAS).

경로 A: Cloudflare Pages (정적·SPA)

npm run build                    # dist/ (또는 build/·out/) 생성
npm i -D wrangler
npx wrangler login
npx wrangler pages deploy dist --project-name=my-app --branch=main

→ https://my-app.pages.dev 링크가 바로 나온다. HTTPS 자동, 무료.

대시보드(깃 연동) 방식도 있다: Cloudflare Pages에 GitHub 레포를 연결하면, 빌드 명령(npm run build)과 출력 폴더(dist)만 적어두고 push할 때마다 자동 배포된다. 명령어가 싫으면 이쪽.

환경변수는 코드에 박지 말고 Pages 설정(또는 wrangler의 변수)에 넣는다. 단, 프론트에 들어가는 값은 결국 브라우저에 노출되니 비밀은 넣지 마라.

경로 B: GAS 웹앱 (시트 연동)

npm i -g @google/clasp
clasp login
clasp create --type webapp --title "my-app"
clasp push
clasp deploy                     # /exec 링크 발급

코드 골격은 이 정도다 — doGet이 화면을 띄우고, google.script.run으로 프론트가 백엔드 함수를 부른다:

// Code.gs
function doGet() {
  return HtmlService.createHtmlOutputFromFile("index");
}
function getData() {
  return SpreadsheetApp.openById("시트_ID").getSheets()[0].getDataRange().getValues();
}

<!-- index.html -->
<script>
  google.script.run.withSuccessHandler((rows) => console.log(rows)).getData();
</script>

→ 구글 계정 안에서 돌고, 시트가 DB. 서버비 0원.

”로컬은 되는데 배포하면 깨짐” — 범인 5개

배포 첫날 거의 다 여기서 막힌다. 순서대로 의심하라.

어느 쪽이든 공통

빌드 → 업로드. 로컬에서 build하고, 결과물만 올린다.
커스텀 도메인·HTTPS는 둘 다 무료다. Cloudflare는 Pages 설정에서 도메인을 추가(DNS가 Cloudflare면 클릭 몇 번), GAS는 워크스페이스/프록시로 붙인다. 인증서는 자동.
자동 배포로 묶으려면 → 바이브 코딩 101의 npm run deploy + cron.

한 줄 요약

localhost:3000은 너만 보는 비밀 일기장이다. 정적이면 Cloudflare, 시트 연동이면 GAS — 빌드 결과물을 무료로 올리면 5분 만에 남들이 링크로 연다. 깨지면 API 주소·환경변수·SPA 폴백부터 의심하라.

더 궁금하면

네가 만든 게 어느 쪽인지 헷갈리면 편하게 물어보세요. 만들 도구부터 궁금하면 → 그래서 바이브 코딩 어떻게 함?. 전체 그림은 → 바이브 코딩 101.