Cloudflare Workers with SST

SST를 사용하여 Cloudflare Worker를 API로 생성하고 배포합니다.

Cloudflare Workers와 SST

Cloudflare Worker로 API를 구축하고, 파일 업로드를 위한 R2 버킷을 추가한 다음 SST를 사용해 배포해 보겠습니다.

1. 프로젝트 생성

앱을 만들어 보겠습니다.

mkdir my-worker && cd my-worker
npm init -y

SST 초기화

이제 앱에서 SST를 초기화해 보겠습니다.

npx sst@latest init
npm install

기본값을 선택하고 Cloudflare를 선택합니다. 이렇게 하면 프로젝트 루트에 sst.config.ts 파일이 생성됩니다.

Cloudflare API 토큰 설정하기

Cloudflare API 토큰은 .env 파일에 저장하거나 직접 설정할 수 있습니다.

export CLOUDFLARE_API_TOKEN=aaaaaaaa_aaaaaaaaaaaa_aaaaaaaa
export CLOUDFLARE_DEFAULT_ACCOUNT_ID=aaaaaaaa_aaaaaaaaaaaa_aaaaaaaa

2. Worker 추가하기

Worker를 추가해 보겠습니다. sst.config.ts 파일을 업데이트하세요.

async run() {
  const worker = new sst.cloudflare.Worker("MyWorker", {
    handler: "./index.ts",
    url: true,
  });

  return {
    api: worker.url,
  };
}

Worker URL을 활성화하여 API로 사용할 수 있도록 설정했습니다.

3. R2 버킷 추가하기

파일 업로드를 위해 R2 버킷을 추가해 보겠습니다. sst.config.ts 파일을 업데이트하세요.

const bucket = new sst.cloudflare.Bucket("MyBucket");

이 코드를 Worker 컴포넌트 위에 추가하세요.

버킷 연결하기

이제 버킷을 Worker에 연결합니다.

const worker = new sst.cloudflare.Worker("MyWorker", {
  handler: "./index.ts",
  link: [bucket],
  url: true,
});

4. 파일 업로드

PUT 요청을 보내면 API가 R2 버킷에 파일을 업로드하도록 만들겠습니다. index.ts 파일을 생성하고 다음 코드를 추가하세요.

export default {
  async fetch(req: Request) {
    if (req.method == "PUT") {
      const key = crypto.randomUUID();
      await Resource.MyBucket.put(key, req.body, {
        httpMetadata: {
          contentType: req.headers.get("content-type"),
        },
      });
      return new Response(`Object created with key: ${key}`);
    }
  },
};

SDK를 임포트하세요.

import { Resource } from "sst";

5. 파일 다운로드

API에 GET 요청을 보내면 마지막으로 업로드된 파일을 다운로드할 수 있습니다. index.ts 파일의 fetch 함수에 다음 코드를 추가하세요.

if (req.method == "GET") {
  const first = await Resource.MyBucket.list().then(
    (res) =>
      res.objects.toSorted(
        (a, b) => a.uploaded.getTime() - b.uploaded.getTime(),
      )[0],
  );
  const result = await Resource.MyBucket.get(first.key);
  return new Response(result.body, {
    headers: {
      "content-type": result.httpMetadata.contentType,
    },
  });
}

Resource.MyBucket.list()를 사용해 버킷에 있는 파일 목록을 가져오고, Resource.MyBucket.get()을 사용해 주어진 키에 해당하는 파일을 가져옵니다.

개발 모드 시작

여러분의 앱을 개발 모드로 실행합니다.

npx sst dev

이 명령어는 API의 URL을 제공합니다.

+  Complete
   api: https://start-cloudflare-jayair-myworkerscript.sst-15d.workers.dev

앱 테스트하기

프로젝트 루트에서 파일을 업로드해 보겠습니다. 여러분의 API URL을 사용해야 합니다.

curl --upload-file package.json https://start-cloudflare-jayair-myworkerscript.sst-15d.workers.dev

이제 브라우저에서 https://start-cloudflare-jayair-myworkerscript.sst-15d.workers.dev로 이동하면 방금 업로드한 파일이 로드됩니다.

6. 앱 배포하기

마지막으로 앱을 배포해 보겠습니다!

npx sst deploy --stage production

여기서는 어떤 스테이지 이름을 사용해도 되지만, 프로덕션을 위해 새로운 스테이지를 만드는 것이 좋습니다.