바이브코더를 위한 Cloudflare막히는 순간을
푸는 1시간

손 들어 주세요

1. AI로 뭔가 만들어서 내 컴퓨터에서 돌려본 분?
2. 그걸 친구에게 링크로 보내 본 분?
3. 그러다 API 요금이나 에러 때문에 멈춘 분?

오늘 고칠 앱: AI 메모장

메모를 쓰면 AI가 요약해 주는 HTML 페이지 하나. AI가 만들어 준 그대로입니다.

파트 1. 원리

배포 = 24시간 켜진
남의 컴퓨터에 올려 두기

• Cloudflare는 그 컴퓨터를 전 세계 수백 곳에 두고, 인터넷 경로상 가까운 곳에서 응답합니다.
• HTML, CSS, 이미지 요청은 무료이고 요청 수에도 세지 않습니다.
• 새 프로젝트는 Pages 대신 Workers로. 공식 문서의 권장입니다.

파트 1. 시연

{
  "name": "ai-memo",
  "compatibility_date": "2026-09-30",
  "main": "./src/worker.ts",
  "assets": {
    "directory": "./dist",
    "not_found_handling": "single-page-application",
    "run_worker_first": ["/api/*"]
  },
  "observability": { "enabled": true }
}

npx wrangler login
npx wrangler deploy

파트 1. 여기서 많이 막힙니다

한국에서 느리다면 내주소/cdn-cgi/trace의 colo 값부터 확인. 자세한 내용은 자료 페이지 파트 1.

파트 2. 원리

파트 2. 시연

npx wrangler secret put AI_API_KEY

.dev.vars*
.env*

"ratelimits": [{
  "name": "LIMITER",
  "namespace_id": "1001",
  "simple": { "limit": 10, "period": 60 }
}]

const { success } = await env.LIMITER
  .limit({ key: ip });
if (!success) return new Response('잠시 후에',
  { status: 429 });

파트 2. 돈은 어디서 새는가

레이트 리밋은 계량기가 아니라 폭주 차단기입니다. 데이터센터마다 따로 세고, 기간은 10초나 60초뿐입니다.

파트 2. AI가 자주 틀리는 것

• "환경 변수로 옮겼어요": VITE_, NEXT_PUBLIC_이 붙은 변수는 브라우저 코드에 그대로 박힙니다.
• 키를 vars에: 평문이고 저장소에 같이 올라갑니다.
• 메모리 Map 카운터: Worker 인스턴스마다 따로 세서 제한이 안 먹습니다.
• KV 카운터: 같은 키는 1초에 한 번만 쓸 수 있고, 무료 쓰기는 하루 1,000회.

그래서 마지막에 F12와 빌드 결과 폴더를 직접 확인합니다.

파트 3. 데이터마다 서랍이 다르다

KV에 사용자 데이터를 넣지 마세요. 다른 지역에 보이기까지 60초 넘게 걸릴 수 있습니다. "저장이 됐다 안 됐다 해요"의 정체입니다.

파트 3. 시연

npx wrangler d1 create memo-db

npx wrangler d1 migrations create \
  memo-db create_notes

npx wrangler d1 migrations apply \
  memo-db --remote

await env.DB
  .prepare('INSERT INTO notes
    (content, summary, created_at)
    VALUES (?1, ?2, ?3)')
  .bind(content, summary, now)
  .run();

이미 적용한 마이그레이션 파일은 고치지 않는다. 바꿀 게 생기면 새 파일을 만듭니다.

파트 3. 기억할 세 가지

파트 4. 원리: 문지기를 세운다

파트 4. 시연

1. Workers & Pages → 내 Worker → Access 탭 → Protect this Worker behind Access
2. All traffic을 고른다. Previews only는 미리보기만 잠그고 실제 서비스는 열어 둡니다.
3. 정책: Cloudflare account 또는 Email domain. Email domain에 gmail.com을 넣으면 전 세계 Gmail 사용자가 통과합니다.
4. 시크릿 창 → 이메일 → 메일로 온 코드 → 입장
5. 메모 테이블에 user_email 컬럼, 레이트 리밋 키도 이메일로

파트 4. 함정

정적 자산을 함께 서빙하는 Worker에는
ctx.access가 오지 않는다

공식 문서에 명시된 제약입니다. 대신 Cf-Access-Jwt-Assertion 헤더의 토큰을 검증합니다.

• 검증 없이 헤더 값을 믿지 않는다
• 공개키는 코드에 박지 않는다. 6주마다 바뀐다
• iss(팀 도메인)와 aud(AUD 태그)를 둘 다 확인한다

파트 4. 검증 코드 (jose)

let jwks: ReturnType<typeof createRemoteJWKSet> | null = null;

export async function userEmail(request: Request, env: Env) {
  const token = request.headers.get('cf-access-jwt-assertion');
  if (!token) return null;
  jwks ??= createRemoteJWKSet(new URL(`${env.TEAM_DOMAIN}/cdn-cgi/access/certs`));
  try {
    const { payload } = await jwtVerify(token, jwks, {
      issuer: env.TEAM_DOMAIN, audience: env.POLICY_AUD,
    });
    return typeof payload.email === 'string' ? payload.email.toLowerCase() : null;
  } catch { return null; }
}

파트 4. Access가 맞는 경우

어느 쪽이든 인증 코드는 직접 짜지 않습니다.

파트 5. 습관 세 가지

파트 5. 시간이 남으면

한 시간 동안 바뀐 것