Skip to content
SST
Blog Docs Console Examples
22K

Astro on AWS with SST

SST를 사용하여 AWS에 Astro 사이트를 생성하고 배포합니다.

SST를 사용하여 AWS에 Astro 배포하기

SST를 사용하여 Astro 사이트를 AWS에 배포하는 방법은 두 가지가 있습니다.

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

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

예제

여러분이 참고할 수 있는 다른 Astro 예제도 몇 가지 있습니다.

서버리스

여러분은 Astro 사이트를 만들고, 파일 업로드를 위한 S3 버킷을 추가한 다음, Astro 컴포넌트를 사용해 배포할 것입니다.

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

1. 프로젝트 생성

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

Terminal window
npm create astro@latest aws-astro
cd aws-astro

기본 옵션을 모두 선택합니다.

SST 초기화

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

Terminal window
npx sst@latest init
npm install

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

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

astro.config.mjs
 import aws from "astro-sst";


export default defineConfig({
  output: "server",
  adapter: aws()
});
개발 모드 시작

다음 명령어를 실행하여 개발 모드를 시작합니다. 이 명령어는 SST와 여러분의 Astro 사이트를 실행합니다.

Terminal window
npx sst dev

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

2. S3 버킷 추가하기

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

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

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

버킷 연결하기

이제 버킷을 우리의 Astro 사이트에 연결해 보겠습니다.

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

3. 업로드 폼 만들기

src/pages/index.astro에 업로드 폼 클라이언트를 추가하세요. <Layout /> 컴포넌트를 다음 코드로 교체하세요:

src/pages/index.astro
<Layout title="Astro x SST">
  <main>
    <form action={url}>
      <input name="file" type="file" accept="image/png, image/jpeg" />
      <button type="submit">Upload</button>
    </form>
    <script>
      const form = document.querySelector("form");
      form!.addEventListener("submit", async (e) => {
        e.preventDefault();


        const file = form!.file.files?.[0]!;


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


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

스타일을 추가하려면 src/pages/index.astro에 다음 코드를 추가하세요.

src/pages/index.astro
<style>
  main {
    margin: auto;
    padding: 1.5rem;
    max-width: 60ch;
  }
  form {
    color: white;
    padding: 2rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    background-color: #23262d;
    background-image: none;
    background-size: 400%;
    border-radius: 0.6rem;
    background-position: 100%;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1);
  }
  button {
    appearance: none;
    border: 0;
    font-weight: 500;
    border-radius: 5px;
    font-size: 0.875rem;
    padding: 0.5rem 0.75rem;
    background-color: white;
    color: #111827;
  }
  button:active:enabled {
    background-color: #EEE;
  }
</style>

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

앱이 로드될 때 파일 업로드를 위한 사전 서명된 URL을 생성하고 폼에서 사용합니다. 이를 src/pages/index.astro 파일의 헤더에 추가하세요.

src/pages/index.astro
---
import { Resource } from "sst";
import { getSignedUrl } from "@aws-sdk/s3-request-presigner";
import { S3Client, PutObjectCommand } from "@aws-sdk/client-s3";


const command = new PutObjectCommand({
  Key: crypto.randomUUID(),
  Bucket: Resource.MyBucket.name,
});
const url = await getSignedUrl(new S3Client({}), command);
---

그리고 npm 패키지를 설치하세요.

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

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

SST Astro 앱 로컬

5. 앱 배포하기

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

Terminal window
npx sst deploy --stage production

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

컨테이너

우리는 Astro 사이트를 만들고, 파일 업로드를 위한 S3 버킷을 추가한 다음, Cluster 컴포넌트를 사용해 컨테이너에 배포할 것입니다.

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

1. 프로젝트 생성하기

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

Terminal window
npm create astro@latest aws-astro-container
cd aws-astro-container

모든 기본 옵션을 선택합니다.

Init SST_HPWLoAqfFCMJN527kapvD5

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

Terminal window
npx sst@latest init
npm install

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

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

Terminal window
npx astro add node

2. 서비스 추가하기

Astro 사이트를 컨테이너에 배포하기 위해 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: "4321/http" }],
    },
    dev: {
      command: "npm run dev",
    },
  });
}

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

dev.command는 SST에게 개발 모드에서 Astro 사이트를 로컬에서 실행하도록 지시합니다.

개발 모드 시작

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

Terminal window
npx sst dev

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

3. S3 버킷 추가하기

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

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

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

버킷_Wa6x4V3B3m3fDGnVJ9cym2 연결하기

이제 버킷을 컨테이너에 연결해 보겠습니다.

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

이렇게 하면 Astro 사이트에서 버킷을 참조할 수 있습니다.

4. 업로드 폼 만들기

src/pages/index.astro에 업로드 폼 클라이언트를 추가하세요. <Layout /> 컴포넌트를 다음 코드로 교체하세요:

src/pages/index.astro
<Layout title="Astro x SST">
  <main>
    <form action={url}>
      <input name="file" type="file" accept="image/png, image/jpeg" />
      <button type="submit">Upload</button>
    </form>
    <script>
      const form = document.querySelector("form");
      form!.addEventListener("submit", async (e) => {
        e.preventDefault();


        const file = form!.file.files?.[0]!;


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


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

스타일을 추가하려면 src/pages/index.astro에 다음 코드를 추가하세요.

src/pages/index.astro
<style>
  main {
    margin: auto;
    padding: 1.5rem;
    max-width: 60ch;
  }
  form {
    color: white;
    padding: 2rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    background-color: #23262d;
    background-image: none;
    background-size: 400%;
    border-radius: 0.6rem;
    background-position: 100%;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1);
  }
  button {
    appearance: none;
    border: 0;
    font-weight: 500;
    border-radius: 5px;
    font-size: 0.875rem;
    padding: 0.5rem 0.75rem;
    background-color: white;
    color: #111827;
  }
  button:active:enabled {
    background-color: #EEE;
  }
</style>

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

앱이 로드될 때 파일 업로드를 위한 미리 서명된 URL을 생성하고 폼에서 사용합니다. 이를 src/pages/index.astro 파일의 헤더에 추가합니다.

src/pages/index.astro
---
import { Resource } from "sst";
import { getSignedUrl } from "@aws-sdk/s3-request-presigner";
import { S3Client, PutObjectCommand } from "@aws-sdk/client-s3";


const command = new PutObjectCommand({
  Key: crypto.randomUUID(),
  Bucket: Resource.MyBucket.name,
});
const url = await getSignedUrl(new S3Client({}), command);
---

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

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

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

SST Astro 앱 로컬

6. 앱 배포하기

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

Dockerfile
FROM node:lts AS base
WORKDIR /app


COPY package.json package-lock.json ./


FROM base AS prod-deps
RUN npm install --omit=dev


FROM base AS build-deps
RUN npm install


FROM build-deps AS build
COPY . .
RUN npm run build


FROM base AS runtime
COPY --from=prod-deps /app/node_modules ./node_modules
COPY --from=build /app/dist ./dist


ENV HOST=0.0.0.0
ENV PORT=4321
EXPOSE 4321
CMD node ./dist/server/entry.mjs

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

.dockerignore
.DS_Store
node_modules
dist

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

Terminal window
npx sst deploy --stage production

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

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

콘솔 연결하기

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

SST 콘솔 자동 배포

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