이미지 다운 링크 데이터 넣기 (feat. cloudflare)

 

cloudflare로 이미지 다운받기

목차

1. cloudflare 계정 생성 및 버킷 추가

2. data 추가

3. 다운로드 링크

 

---

1. cloudflare 계정 생성 및 버킷 추가

이미지 공유 링크를 만들기에 cloudflare가 무료로 내가 필요한 범위를 제공하기에 가장 적절하다고 생각해서 cloudflare로 선택했다.

내가 필요한 건 클릭을 통해서 이미지 파일을 다운받는 것이 전부고, 다운로드양이 유료플랜만큼 많아지지 않을 거라 생각했다.

https://www.cloudflare.com/ko-kr/

모든 곳에서 연결하고, 보호하고, 구축하기

 

1. domain 추가

아직 도메인 구매를 안해서 일단 임시로 버셀 배포링크를 추가했다.

 

2. 버킷 추가

 

create bucket으로 버킷을 생성한다.

버킷에 파일을 끌어다 추가하기만 하면 해당 파일의 url이 생성된다.

 

여기서 중요한 건 Settings에서 꼭 아래 Public Development URL 항목을 able처리 해줘야 하는 것이다.

 

 

---

2. data 추가

일단 백엔드가 당장 필요하지 않기 때문에 src/data/cards.ts 위치로 카드 데이터들을 작성해서 넣었다.

export const CardDatas = [
  {
    id: 1,
    title: '마크',
    tags: ['우니'],
    tmi: '광운대학교 마크에 포함되어있는 말 아이콘이다.',
    fileUrls: [
      'https://pub-c055a1822d244b0aaba0dc63c00dcba2.r2.dev/mark.ai',
      'https://pub-c055a1822d244b0aaba0dc63c00dcba2.r2.dev/mark.pdf',
      'https://pub-c055a1822d244b0aaba0dc63c00dcba2.r2.dev/mark.png',
    ],
    thumbnail: 'https://pub-c055a1822d244b0aaba0dc63c00dcba2.r2.dev/mark.png',
    createdAt: '2022-06-29',
  },
  ...
]

이런식이다.

저 url들은 위에서 생성된 링크들이다.

 

 

---

3. 다운로드 링크

처음에는 위의 링크를 <a href="https://r2.xxx.com/file.pdf" download>와 같이 넣었으나, CORS 정책으로 인해 외부 도메인의 파일은 download 속성이 무시하고, 새 탭에서 열어버린다고 한다.

 

따라서 Next.js API Route를 사용했다.

• SSRF 방지: 허용된 R2 호스트만 요청이 가능하게 하여 공격을 방지한다.
• 파일 가져오기: 서버에서 R2로 fetch해서 파일을 받아온다.
• 스트리밍 전달: 파일을 다운받는 즉시 사용자에게 보내서 서버 메모리를 적게 사용한다.

API Route를 거쳐서 download.ts 유틸 함수를 사용하여 다운을 받는다.

 

1. Next.js API Route

import { NextRequest, NextResponse } from 'next/server';

// 보안을 위해 허용된 호스트 화이트리스트
const ALLOWED_R2_HOST = process.env.NEXT_PUBLIC_R2_DOMAIN;

R2는 어차피 다운로드 링크에 포함되어 있어서 노출되어도 상관없는 주소이지만 일단 통일감있게 관리하는 느낌으로 env에 넣었다.

 

export async function GET(request: NextRequest) {
  if (!ALLOWED_R2_HOST) {
    return NextResponse.json({ error: 'Server configuration error' }, { status: 500 });
  }
  try {
    const { searchParams } = new URL(request.url);
    const url = searchParams.get('url');
    const filename = searchParams.get('filename') || 'download';

    if (!url) {
      return NextResponse.json({ error: 'URL is required' }, { status: 400 });
    }

호스트 링크에 문제가 발생할 경우에 대비한 코드를 넣었다.

 

// SSRF 방지: 허용된 호스트인지 확인
let targetUrl: URL;
try {
  targetUrl = new URL(url);
  if (targetUrl.host !== ALLOWED_R2_HOST) {
    return NextResponse.json({ error: 'Forbidden' }, { status: 403 });
  }
} catch {
  return NextResponse.json({ error: 'Invalid URL' }, { status: 400 });
}

 

 

요청을 했을 때 허용된 호스트인지 확인한다.

 

// Cloudflare에서 파일 스트리밍
const response = await fetch(url, { signal: AbortSignal.timeout(30_000) }); // 15초 타임아웃
if (!response.ok) throw new Error('Failed to fetch file');

// 스트리밍 처리를 위해 body가 없을 경우 예외 처리
if (!response.body) {
  throw new Error('No content body found');
}

// body 스트림을 직접 사용하여 메모리 절약
const contentType = response.headers.get('Content-Type') || 'application/octet-stream';

const safeFilename = filename.replace(/[\r\n"]/g, '').trim();
// ASCII fallback: 비 ASCII 문자를 제거
const asciiFilename = safeFilename.replace(/[^\x20-\x7E]/g, '_');
const encodedFilename = encodeURIComponent(safeFilename)
  .replace(/['()]/g, c => `%${c.charCodeAt(0).toString(16).toUpperCase()}`)
  .replace(/\*/g, '%2A');

GET 요청시 받은 링크(cloudflare)에서 파일 스트리밍을 한다.

파일을 업로드할 때 파일명에 한글을 포함시키지 않도록 했으나, 혹시나 하는 상황에 대비해 아스키코드 처리 코드를 넣어뒀다.

 

    return new NextResponse(response.body, {
      headers: {
        'Content-Type': contentType,
        // attachment 설정으로 브라우저에서 파일을 열지 않고 바로 다운로드
        'Content-Disposition': `attachment; filename="${asciiFilename}"; filename*=UTF-8''${encodedFilename}`,
        'Cache-Control': 'no-cache, no-store, must-revalidate',
      },
    });
  } catch (error) {
    console.error('Download error:', error);
    return NextResponse.json({ error: 'Download failed' }, { status: 500 });
  }
}

 

2. download.ts

export function download(url: string, title: string, extension: string) {
  if (typeof window === 'undefined') return; // 서버 컴포넌트 임포트 방지

  const filename = `${title}.${extension.toLowerCase()}`;
  const downloadUrl = `/api/download?url=${encodeURIComponent(url)}&filename=${encodeURIComponent(filename)}`;
  const link = document.createElement('a');

  link.href = downloadUrl;

  // 다운로드 속성 명시
  link.setAttribute('download', filename);

  document.body.appendChild(link);
  link.click();

  // 가비지 컬렉션 유도
  setTimeout(() => {
    document.body.removeChild(link);
  }, 100);
}

url: 다운로드 링크

title: 다운로드 파일명

extension: 다운형식 (.ai, .png, .pdf 등등)

 

3. 다운버튼

<button
  key={`${id}-file-${index}`}
  role="menuitem"
  onClick={() => {
    download(url, title, extension);
    close();
  }}
  className="text-gray700 hover:bg-gray50 block w-full px-4 py-2 text-left text-sm transition-colors duration-150"
>
  {extension} 다운로드
</button>

onClick으로 download 함수를 전달해서 사용하면 파일다운이 된다.

 

 

 

 

 

참고

https://velog.io/@sozign/cloudflare-R2-bucket-%EC%82%AC%EC%9A%A9%ED%95%98%EA%B8%B0

[cloudflare] R2 bucket 사용하기