Skip to content
SaaS ERP SaaS ERP Docs

Cloudflare에서 /images/en/ 로고 파일 직접 올리는 방법

목적: https://x.pregoi.com/images/en/logo-black.png, https://x.pregoi.com/images/en/logo-white.png 가 이미지로 정상 열리도록, Cloudflare에서 해당 경로에 파일을 직접 서빙하는 방법을 정리합니다.

방법 1: 빌드 출력에 포함되어 배포되게 하기 (권장)

이미지 파일이 저장소에 있으면, 빌드 시 정적 자산으로 포함되고 Cloudflare Pages가 해당 경로를 정적 파일로 서빙할 수 있습니다.

1.1 파일 위치 확인

  • 다음 파일이 있어야 합니다:
    • apps/client-web/public/images/en/logo-black.png
    • apps/client-web/public/images/en/logo-white.png
  • 없으면 public/images/en/ 폴더를 만들고 두 PNG 파일을 넣은 뒤 커밋합니다.

1.2 next-on-pages 빌드 후 출력 확인

client-web은 Cloudflare Pages + next-on-pages 로 배포됩니다. 정적 출력 디렉터리는 pages_build_output_dir = ".vercel/output/static" 입니다.

  1. 로컬에서 빌드:
    Terminal window
    cd apps/client-web
    pnpm run pages:build
  2. 빌드 후 다음 경로에 파일이 있는지 확인:
    • .vercel/output/static/images/en/logo-black.png
    • .vercel/output/static/images/en/logo-white.png
  3. 있으면: 배포 시 이 정적 파일들이 함께 올라가므로, Cloudflare Pages가 정적 자산을 먼저 서빙하도록 설정되어 있다면 https://x.pregoi.com/images/en/logo-*.png 가 이미지로 열립니다.
  4. 없으면: next-on-pages가 public/ 내용을 static 출력으로 복사하는 방식이 버전마다 다를 수 있으므로, 방법 2(R2) 를 사용하는 것이 확실합니다.

1.3 Cloudflare Pages 빌드 설정

  • Build output directory: apps/client-web 를 루트로 빌드한다면, next-on-pages 기준으로는 .vercel/output/static 이 정적 루트가 됩니다. Cloudflare Pages 대시보드에서 Output directory 가 이 경로(또는 사용 중인 next-on-pages 출력 경로)와 일치하는지 확인합니다.
  • 정적 파일이 우선 서빙되려면, 같은 경로에 대한 요청은 정적 자산이 있으면 그대로 내려주고, 없을 때만 Worker로 넘기는 동작이어야 합니다. (일반적으로 Pages는 빌드 결과의 정적 자산을 먼저 서빙합니다.)

방법 2: R2 버킷에 올리고 Worker로 서빙 (직접 올리기)

Cloudflare R2 에 이미지 파일을 올리고, Worker 또는 Pages Functions 에서 /images/en/logo-*.png 요청을 R2에서 꺼내 응답하도록 합니다. 이렇게 하면 “해당 경로에 파일을 직접 올렸다”고 볼 수 있습니다.

2.1 R2 버킷 만들기

  1. Cloudflare Dashboard → R2 → Create bucket.
  2. 버킷 이름 예: prego-static-assets (팀 규칙에 맞게 지정).
  3. 생성 후 버킷 안에 폴더 구조를 맞춥니다:
    • images/en/logo-black.png
    • images/en/logo-white.png

2.2 R2에 파일 업로드

  1. 버킷 선택 → Upload.
  2. 폴더 업로드 또는 파일 업로드로 다음을 올립니다:
    • 로컬 apps/client-web/public/images/en/logo-black.png → R2 경로 images/en/logo-black.png
    • 로컬 apps/client-web/public/images/en/logo-white.png → R2 경로 images/en/logo-white.png
  3. 또는 터미널에서 Wrangler CLI 사용:
    Terminal window
    cd apps/client-web
    npx wrangler r2 object put prego-static-assets/images/en/logo-black.png --file=public/images/en/logo-black.png
    npx wrangler r2 object put prego-static-assets/images/en/logo-white.png --file=public/images/en/logo-white.png
    (버킷 이름은 위에서 만든 이름으로 바꿉니다.)

2.3 Worker에서 R2 서빙

x.pregoi.com 이 Cloudflare Pages(Next.js) 로 서빙되고 있다면, 같은 프로젝트의 Worker/미들웨어에서 /images/en/ 요청을 R2로 보내는 방법이 있습니다.

  • 옵션 A – Pages 프로젝트의 _worker.js / Functions
    Pages의 “Functions” 또는 엣지에서 요청 URL이 /images/en/logo-black.png, /images/en/logo-white.png 일 때 R2 버킷에서 해당 키로 객체를 가져와 Response 로 반환하고, Content-Type: image/png 헤더를 붙입니다.
    (next-on-pages 구조에서는 보통 _worker.js 또는 functions 디렉터리에서 라우팅을 추가합니다.)
  • 옵션 B – 별도 Worker + 라우팅
    x.pregoi.com 도메인에 “Route”를 걸어, 경로가 /images/en/* 인 요청만 별도 Worker로 보내고, 그 Worker가 R2에서 읽어서 응답하도록 합니다.
    • Dashboard: Workers & Pages → Worker 생성 → 코드에서 request.url path가 /images/en/logo-black.png 또는 logo-white.png 일 때 해당 R2 객체를 fetch해서 반환.

R2 바인딩 예시 (Worker에서):

  • wrangler.toml 에서: 
    [[r2_buckets]]
    binding = "R2_LOGO"
    bucket_name = "prego-static-assets"
  • Worker 코드에서:
    • env.R2_LOGO.get('images/en/logo-black.png') 등으로 객체를 가져와서 body + Content-Type: image/png 로 응답. (참고: Pages에서는 ASSETS 바인딩 이름이 예약되어 있어 R2_LOGO 사용.)

이렇게 하면 Cloudflare에서 해당 경로에 파일을 직접 올린 것처럼 R2에 올려 두고, Worker가 그 경로로 서빙하게 됩니다.

방법 3: Pages Direct Upload (정적 전용 프로젝트)

“파일만 직접 올려서” 서빙하려면 Pages Direct Upload 로 정적 전용 프로젝트를 만들 수 있습니다. 다만 이 프로젝트는 별도 URL(예: xxx.pages.dev)을 가지므로, x.pregoi.com/images/en/ 에서 쓰려면 메인 도메인 Worker에서 이 프로젝트로 프록시하거나, Custom Domain 을 이 프로젝트에 붙여서 서브경로로 쓰는 식의 추가 설정이 필요합니다.

3.1 Direct Upload 절차

  1. Dashboard → Workers & Pages → Create → Pages → Upload assets.
  2. 로컬에 다음 구조로 폴더/zip을 만듭니다: 
    images/
      en/
        logo-black.png
        logo-white.png
  3. 이 폴더를 zip으로 묶거나, “Upload folder” 로 업로드.
  4. 배포 후 예: https://<project-name>.pages.dev/images/en/logo-black.png 로 접근 가능.

3.2 x.pregoi.com 에서 쓰려면

  • 옵션 A: 이 Pages 프로젝트에 Custom Domain 을 x.pregoi.com 으로 붙이면, 기존 Next 앱과 충돌할 수 있으므로, 보통은 서브도메인 (예: assets.pregoi.com) 만 붙이고, 앱에서는 https://assets.pregoi.com/images/en/logo-black.png 를 쓰도록 변경합니다.
  • 옵션 B: x.pregoi.com 은 기존대로 Next(Worker)가 담당하고, 해당 도메인에 연결된 Worker에서 /images/en/logo-black.png, /images/en/logo-white.png 요청만 위 Direct Upload 프로젝트(예: https://<project-name>.pages.dev/...) 로 fetch해서 프록시 응답하도록 할 수 있습니다.

정리하면, “직접 올리기”만 보면 방법 2 (R2) 가 도메인/경로를 하나로 유지하기 쉽고, 방법 1 (빌드 출력) 이 이미 repo에 파일이 있으면 설정이 가장 단순합니다.

요약

방법설명
1. 빌드 출력public/images/en/ 에 로고 두고 pages:build → .vercel/output/static 에 포함되는지 확인. Cloudflare Pages 출력 경로가 이 static 디렉터리와 맞으면 해당 경로가 정적로 서빙됨.
2. R2R2 버킷에 images/en/logo-black.png, logo-white.png 업로드 후, Worker/Pages Functions에서 /images/en/logo-*.png 요청 시 R2에서 읽어 Content-Type: image/png 로 응답.
3. Direct UploadPages “Upload assets” 로 정적 프로젝트 생성 후, 별도 URL 또는 Custom Domain/프록시로 x.pregoi.com 경로에 연결.

실제로 “Cloudflare에서 해당 경로에 파일을 직접 올린다”에 가장 가까운 것은 방법 2 (R2에 업로드 후 Worker로 해당 경로 서빙) 입니다.

Help