Analog on AWS with SST

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

AWS에서 SST를 사용하여 Analog 앱 만들기

Analog 앱을 생성하고, 파일 업로드를 위한 S3 버킷을 추가한 후, SST를 사용하여 AWS에 배포해 보겠습니다.

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

1. 프로젝트 생성

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

npm create analog@latest
cd aws-analog

풀스택 애플리케이션 옵션을 선택하고 Tailwind는 추가하지 않습니다.

SST 초기화

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

npx sst@latest init
npm install

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

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

plugins: [analog({
  nitro: {
    preset: "aws-lambda",
  }
})],

개발 모드 시작

개발 모드를 시작하려면 다음 명령어를 실행하세요. 이 명령어는 SST와 여러분의 Analog 앱을 시작합니다.

npx sst dev

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

2. S3 버킷 추가하기

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

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

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

버킷 연결하기

이제 버킷을 Analog 앱에 연결해 보겠습니다.

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

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

앱이 로드될 때 서버에서 파일 업로드를 위한 미리 서명된 URL을 생성합니다. 다음 내용으로 src/pages/index.server.ts 파일을 새로 만듭니다.

import { Resource } from 'sst';
import { PageServerLoad } from '@analogjs/router';
import { getSignedUrl } from '@aws-sdk/s3-request-presigner';
import { S3Client, PutObjectCommand } from '@aws-sdk/client-s3';

export const load = async ({ }: PageServerLoad) => {
  const command = new PutObjectCommand({
    Key: crypto.randomUUID(),
    // @ts-ignore: 배포 시 생성됨
    Bucket: Resource.MyBucket.name,
  });

  const url = await getSignedUrl(new S3Client({}), command);

  return {
    url
  };
};

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

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

4. 업로드 폼 만들기

src/pages/index.page.ts에 업로드 폼 클라이언트를 추가합니다. 다음 코드로 교체하세요.

import { Component } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { injectLoad } from '@analogjs/router';
import { toSignal } from '@angular/core/rxjs-interop';

import { load } from './index.server';

@Component({
  selector: 'app-home',
  standalone: true,
  imports: [FormsModule],
  template: `
    <form (ngSubmit)="onSubmit($event)">
      <input type="file" name="file">
      <button type="submit">Upload</button>
    </form>
  `,
})
export default class HomeComponent {
  data = toSignal(injectLoad<typeof load>(), { requireSync: true });

  async onSubmit(event: Event): Promise<void> {
    const file = (event.target as HTMLFormElement)['file'].files?.[0]!;

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

    window.location.href = image.url.split('?')[0];
  }
}

여기서는 서버에서 미리 서명된 URL을 컴포넌트에 주입합니다.

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

5. 앱 배포하기

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

npx sst deploy --stage production

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

콘솔 연결하기

다음 단계로 SST 콘솔을 설정하여 앱을 _git push로 배포_하고 문제를 모니터링할 수 있습니다.

SST 콘솔 자동 배포

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