Skip to content
SST
Blog Docs Console Examples
22K

SvelteKit on AWS with SST

SST를 사용하여 AWS에 SvelteKit 앱을 생성하고 배포합니다.

SvelteKit을 AWS에 SST로 배포하기

SvelteKit 앱을 AWS에 SST로 배포하는 방법은 두 가지가 있습니다.

  1. 서버리스
  2. 컨테이너

아래에서 두 가지 방법을 모두 사용해 간단한 앱을 만들어 보겠습니다.

예제

SvelteKit의 다른 예제도 참고할 수 있습니다.

서버리스

SvelteKit 앱을 만들고, 파일 업로드를 위한 S3 버킷을 추가한 다음, SvelteKit 컴포넌트를 사용해 배포할 예정입니다.

시작하기 전에 AWS 자격 증명을 설정했는지 확인하세요.

1. 프로젝트 생성

앱을 만들어 보겠습니다.

Terminal window
npx sv create aws-svelte-kit
cd aws-svelte-kit

여기서 SvelteKit minimal과 Yes, using TypeScript syntax 옵션을 선택합니다.

SST 초기화

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

Terminal window
npx sst@latest init
npm install

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

또한 svelte.config.mjs 파일을 다음과 같이 업데이트하라는 메시지가 표시됩니다.

svelte.config.mjs
import adapter from '@sveltejs/adapter-auto';
import adapter from "svelte-kit-sst";
개발 모드 시작

개발 모드를 시작하려면 다음 명령어를 실행하세요. 이 명령어는 SST와 SvelteKit 앱을 동시에 실행합니다.

Terminal window
npx sst dev

실행이 완료되면 사이드바에서 MyWeb을 클릭하고 브라우저에서 SvelteKit 앱을 열어보세요.

2. S3 버킷 추가하기

파일 업로드를 위해 S3 버킷에 공개 access를 허용해 보겠습니다. sst.config.ts 파일을 업데이트하세요.

sst.config.ts
const bucket = new sst.aws.Bucket("MyBucket", {
  access: "public"
});

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

버킷 연결하기

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

sst.config.ts
new sst.aws.SvelteKit("MyWeb", {
  link: [bucket]
});

3. 파일 업로드 폼 만들기

파일 업로드 폼을 추가해 보겠습니다. src/routes/+page.svelte 파일을 아래 코드로 교체하세요. 이 폼은 미리 서명된 업로드 URL로 파일을 업로드합니다.

src/routes/+page.svelte
<script>
  /** @type {import('./$types').PageData} */
  export let data;


  const handleSubmit = async (e) => {
    const formData = new FormData(e.target);
    const file = formData.get("file");


    const image = await fetch(data.url, {
      body: file,
      method: "PUT",
      headers: {
        "Content-Type": file.type,
        "Content-Disposition": `attachment; filename="${file.name}"`,
      },
    });


    window.location.href = image.url.split("?")[0];
  };
</script>


<section>
  <form on:submit|preventDefault={handleSubmit}>
    <input name="file" type="file" accept="image/png, image/jpeg" />
    <button type="submit">Upload</button>
  </form>
</section>

스타일을 추가합니다.

src/routes/+page.svelte
<style>
  section {
    flex: 0.6;
    display: flex;
    padding-top: 4rem;
    align-items: center;
    flex-direction: column;
    justify-content: center;
  }
</style>

4. 사전 서명된 URL 생성하기

라우트가 로드될 때 S3를 위한 사전 서명된 URL을 생성하고, 폼이 이를 통해 업로드하도록 설정합니다. 새로운 src/routes/+page.server.ts 파일을 생성하고 다음 코드를 추가합니다.

src/routes/+page.server.ts
/** @type {import('./$types').PageServerLoad} */
export async function load() {
  const command = new PutObjectCommand({
    Key: crypto.randomUUID(),
    Bucket: Resource.MyBucket.name,
  });
  const url = await getSignedUrl(new S3Client({}), command);


  return { url };
}

필요한 임포트를 추가합니다.

src/routes/+page.server.ts
import { Resource } from "sst";
import { getSignedUrl } from "@aws-sdk/s3-request-presigner";
import { S3Client, PutObjectCommand } from "@aws-sdk/client-s3";

그리고 npm 패키지를 설치합니다.

Terminal window
npm install @aws-sdk/client-s3 @aws-sdk/s3-request-presigner

브라우저에서 로컬 SvelteKit 앱(http://localhost:5173)으로 이동하여 이미지를 업로드해 보세요. 이미지가 업로드되고 다운로드되는 것을 확인할 수 있습니다.

SST SvelteKit 앱 로컬

5. 앱 배포하기

이제 여러분의 앱을 AWS에 배포해 보겠습니다.

Terminal window
npx sst deploy --stage production

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

축하합니다! 이제 여러분의 앱이 라이브 상태가 되었습니다!

컨테이너

SvelteKit 앱을 만들고, 파일 업로드를 위한 S3 버킷을 추가한 다음, Cluster 컴포넌트를 사용하여 컨테이너에 배포할 예정입니다.

시작하기 전에 AWS 자격 증명을 설정해야 합니다.

1. 프로젝트 생성_F9sZubWKRuXdpT9timHBQy

프로젝트를 만들어 보겠습니다.

Terminal window
npx sv create aws-svelte-container
cd aws-svelte-container

여기서 SvelteKit minimal과 Yes, using TypeScript syntax 옵션을 선택합니다.

Init SST_RpzoY526vfKjBJE5LtEDA6

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

Terminal window
npx sst@latest init
npm install

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

또한 svelte.config.mjs를 업데이트하라는 메시지가 표시됩니다. 하지만 우리는 컨테이너를 통해 배포할 것이기 때문에 Node.js 어댑터를 사용할 것입니다.

Terminal window
npm i -D @sveltejs/adapter-node

그리고 svelte.config.js를 업데이트합니다.

svelte.config.mjs
import adapter from '@sveltejs/adapter-auto';
import adapter from '@sveltejs/adapter-node';

2. 서비스 추가하기

SvelteKit 앱을 컨테이너에 배포하기 위해 AWS Fargate와 Amazon ECS를 사용합니다. sst.config.ts 파일의 run 함수를 다음과 같이 수정합니다.

sst.config.ts
async run() {
  const vpc = new sst.aws.Vpc("MyVpc");
  const cluster = new sst.aws.Cluster("MyCluster", { vpc });


  cluster.addService("MyService", {
    loadBalancer: {
      ports: [{ listen: "80/http", forward: "3000/http" }],
    },
    dev: {
      command: "npm run dev",
    },
  });
}

이 코드는 VPC와 Fargate 서비스가 포함된 ECS 클러스터를 생성합니다.

dev.command는 SST에게 SvelteKit 앱을 로컬에서 개발 모드로 실행하도록 지시합니다.

개발 모드 시작

개발 모드를 시작하려면 다음 명령어를 실행하세요. 이 명령어는 SST와 SvelteKit 앱을 동시에 실행합니다.

Terminal window
npx sst dev

실행이 완료되면 사이드바에서 MyService를 클릭하고 브라우저에서 SvelteKit 앱을 열어보세요.

3. S3 버킷 추가하기

파일 업로드를 위해 S3 버킷에 공개 access를 허용해 보겠습니다. sst.config.ts 파일을 업데이트하세요.

sst.config.ts
const bucket = new sst.aws.Bucket("MyBucket", {
  access: "public"
});

이 코드를 Vpc 컴포넌트 아래에 추가하세요.

bucket_duMGUcLkG8gQd5hYZVpbUb 연결하기

이제 버킷을 컨테이너에 연결합니다.

sst.config.ts
cluster.addService("MyService", {
  // ...
  link: [bucket],
});

이렇게 하면 SvelteKit 앱에서 버킷을 참조할 수 있습니다.

4. 파일 업로드 폼 만들기

파일 업로드 폼을 추가해 보겠습니다. src/routes/+page.svelte 파일을 아래 코드로 교체하세요. 이 폼은 미리 서명된 업로드 URL로 파일을 업로드합니다.

src/routes/+page.svelte
<script>
  /** @type {import('./$types').PageData} */
  export let data;


  const handleSubmit = async (e) => {
    const formData = new FormData(e.target);
    const file = formData.get("file");


    const image = await fetch(data.url, {
      body: file,
      method: "PUT",
      headers: {
        "Content-Type": file.type,
        "Content-Disposition": `attachment; filename="${file.name}"`,
      },
    });


    window.location.href = image.url.split("?")[0];
  };
</script>


<section>
  <form on:submit|preventDefault={handleSubmit}>
    <input name="file" type="file" accept="image/png, image/jpeg" />
    <button type="submit">Upload</button>
  </form>
</section>

스타일을 추가합니다.

src/routes/+page.svelte
<style>
  section {
    flex: 0.6;
    display: flex;
    padding-top: 4rem;
    align-items: center;
    flex-direction: column;
    justify-content: center;
  }
</style>

5. 미리 서명된 URL 생성하기

라우트가 로드될 때 S3를 위한 미리 서명된 URL을 생성하고, 폼이 이를 통해 업로드하도록 설정합니다. 새로운 src/routes/+page.server.ts 파일을 생성하고 다음 코드를 추가하세요.

src/routes/+page.server.ts
/** @type {import('./$types').PageServerLoad} */
export async function load() {
  const command = new PutObjectCommand({
    Key: crypto.randomUUID(),
    Bucket: Resource.MyBucket.name,
  });
  const url = await getSignedUrl(new S3Client({}), command);


  return { url };
}

필요한 모듈을 임포트합니다.

src/routes/+page.server.ts
import { Resource } from "sst";
import { getSignedUrl } from "@aws-sdk/s3-request-presigner";
import { S3Client, PutObjectCommand } from "@aws-sdk/client-s3";

그리고 npm 패키지를 설치합니다.

Terminal window
npm install @aws-sdk/client-s3 @aws-sdk/s3-request-presigner

브라우저에서 로컬 SvelteKit 앱(http://localhost:5173)으로 이동하여 이미지를 업로드해 보세요. 이미지가 업로드되고 다운로드되는 것을 확인할 수 있습니다.

SST SvelteKit 앱 로컬

6. 앱 배포하기

앱을 배포하기 위해 Dockerfile을 추가합니다.

Dockerfile
FROM node:18.18.0-alpine AS builder


WORKDIR /app
COPY package*.json .
RUN npm install
COPY . .
RUN npm run build
RUN npm prune --prod


FROM builder AS deployer


WORKDIR /app
COPY --from=builder /app/build build/
COPY --from=builder /app/package.json .
EXPOSE 3000
ENV NODE_ENV=production
CMD [ "node", "build" ]

이렇게 하면 SvelteKit 앱을 Docker 이미지로 빌드할 수 있습니다.

또한 루트 디렉토리에 .dockerignore 파일을 추가합니다.

.dockerignore
.DS_Store
node_modules

이제 Docker 이미지를 빌드하고 배포하려면 다음 명령어를 실행합니다.

Terminal window
npx sst deploy --stage production

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

축하합니다! 이제 앱이 배포되었습니다!

콘솔 연결하기

다음 단계로 SST 콘솔을 설정하여 앱을 _git push로 배포_하고 로그를 확인할 수 있습니다.

SST 콘솔 자동 배포

무료 계정을 생성하고 AWS 계정에 연결할 수 있습니다.