Skip to content
SST
Blog Docs Console Examples
22K

SolidStart on AWS with SST

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

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

SST를 사용해 SolidStart 앱을 AWS에 배포하는 방법은 두 가지입니다.

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

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

예제

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

서버리스

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

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

1. 프로젝트 생성

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

Terminal window
npm init solid@latest aws-solid-start
cd aws-solid-start

여기서는 SolidStart, basic, 그리고 TypeScript 옵션을 선택합니다.

SST 초기화

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

Terminal window
npx sst@latest init
npm install

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

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

app.config.ts
export default defineConfig({
  server: {
    preset: "aws-lambda",
    awsLambda: {
      streaming: true,
    },
  },
});
개발 모드 시작

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

Terminal window
npx sst dev

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

2. S3 버킷 추가하기

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

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

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

버킷 연결하기

이제 버킷을 우리의 SolidStart 앱에 연결해 보겠습니다.

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

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

앱이 로드될 때 파일 업로드를 위한 사전 서명된 URL을 생성하고 폼에서 사용합니다. src/routes/index.tsx 파일의 import 아래에 다음 코드를 추가하세요.

src/routes/index.tsx
async function presignedUrl() {
  "use server";
  const command = new PutObjectCommand({
    Key: crypto.randomUUID(),
    Bucket: Resource.MyBucket.name,
  });
  return await getSignedUrl(new S3Client({}), command);
}


export const route = {
  load: () => presignedUrl(),
};

필요한 import를 추가하세요.

src/app.tsx
import { Resource } from "sst";
import { createAsync } from "@solidjs/router";
import { getSignedUrl } from "@aws-sdk/s3-request-presigner";
import { S3Client, PutObjectCommand } from "@aws-sdk/client-s3";

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

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

4. 파일 업로드 폼 만들기

미리 서명된 URL로 파일을 업로드할 수 있는 폼을 추가합니다. src/routes/index.tsx의 Home 컴포넌트를 다음 코드로 교체하세요:

src/routes/index.tsx
export default function Home() {
  const url = createAsync(() => presignedUrl());


  return (
    <main>
      <h1>Hello world!</h1>
      <form
        onSubmit={async (e) => {
          e.preventDefault();


          const file = (e.target as HTMLFormElement).file.files?.[0]!;


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


          window.location.href = image.url.split("?")[0];
        }}
      >
        <input name="file" type="file" accept="image/png, image/jpeg" />
        <button type="submit">Upload</button>
      </form>
    </main>
  );
}

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

5. 앱 배포하기

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

Terminal window
npx sst deploy --stage production

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

축하합니다! 이제 여러분의 사이트가 라이브로 배포되었습니다!

SST SolidStart 앱

컨테이너

Redis를 사용하여 히트 카운터 SolidStart 앱을 만들 예정입니다. Cluster 컴포넌트를 사용하여 AWS에 컨테이너로 배포할 것입니다.

시작하기 전에 AWS 자격 증명을 설정하세요.

1. 프로젝트 생성하기_M84JCxURNkmBSavcSaqbMZ

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

Terminal window
npm init solid@latest aws-solid-container
cd aws-solid-container

여기서 SolidStart, basic, 그리고 TypeScript 옵션을 선택합니다.

SST 초기화

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

Terminal window
npx sst@latest init
npm install

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

또한 app.config.ts를 업데이트하라는 메시지가 표시됩니다. 대신 기본 Node 프리셋을 사용하겠습니다.

app.config.ts
import { defineConfig } from "@solidjs/start/config";


export default defineConfig({});

2. 클러스터 추가하기

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

sst.config.ts
async run() {
  const vpc = new sst.aws.Vpc("MyVpc", { bastion: true });
  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와 ECS 클러스터를 생성하고, Fargate 서비스를 추가합니다.

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

3. Redis 추가하기

Amazon ElastiCache Redis 클러스터를 추가해 보겠습니다. sst.config.ts 파일에서 Vpc 컴포넌트 아래에 다음 코드를 추가하세요.

sst.config.ts
const redis = new sst.aws.Redis("MyRedis", { vpc });

이렇게 하면 ECS 클러스터와 동일한 VPC를 공유하게 됩니다.

Redis 연결

이제 Redis 클러스터를 컨테이너에 연결합니다.

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

이렇게 하면 SolidStart 앱에서 Redis 클러스터를 참조할 수 있습니다.

터널 설치하기

Redis 클러스터가 VPC에 있기 때문에, 로컬 머신에서 연결하려면 터널이 필요합니다.

Terminal window
sudo npx sst tunnel install

이 명령은 여러분의 머신에 네트워크 인터페이스를 생성하기 위해 sudo 권한이 필요합니다. 이 작업은 머신당 한 번만 수행하면 됩니다.

개발 모드 시작

앱을 개발 모드로 실행합니다.

Terminal window
npx sst dev

이 명령어는 앱을 배포하고, Tunnel 탭에서 터널을 시작하며, MyServiceDev 탭에서 SolidStart 앱을 로컬로 실행합니다.

4. Redis 연결하기

루트 경로(/)에서 Redis 클러스터의 카운터를 증가시키고 싶습니다. 먼저 필요한 패키지를 설치해 보겠습니다.

Terminal window
npm install ioredis @solidjs/router

라우트가 로드될 때 카운터를 증가시키도록 하겠습니다. src/routes/index.tsx 파일을 다음과 같이 수정합니다.

src/routes/index.tsx
import { Resource } from "sst";
import { Cluster } from "ioredis";
import { createAsync, cache } from "@solidjs/router";


const getCounter = cache(async () => {
  "use server";
  const redis = new Cluster(
    [{ host: Resource.MyRedis.host, port: Resource.MyRedis.port }],
    {
      dnsLookup: (address, callback) => callback(null, address),
      redisOptions: {
        tls: {},
        username: Resource.MyRedis.username,
        password: Resource.MyRedis.password,
      },
    }
  );


  return await redis.incr("counter");
}, "counter");


export const route = {
  load: () => getCounter(),
};

이제 컴포넌트를 업데이트하여 카운터를 표시해 보겠습니다. src/routes/index.tsx에 다음 코드를 추가합니다.

src/routes/index.tsx
export default function Page() {
  const counter = createAsync(() => getCounter());


  return <h1>Hit counter: {counter()}</h1>;
}

앱 테스트하기

브라우저에서 http://localhost:3000로 이동하면 현재의 조회수 카운터를 확인할 수 있습니다.

페이지를 새로고침할 때마다 숫자가 증가하는 것을 볼 수 있습니다.

5. 앱 배포하기_PiJfvfPUPJhagRZGsFme3y

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

Dockerfile 보기
Dockerfile
FROM node:lts AS base


WORKDIR /src


# 빌드
FROM base as build


COPY --link package.json package-lock.json ./
RUN npm install


COPY --link . .


RUN npm run build


# 실행
FROM base


ENV PORT=3000
ENV NODE_ENV=production


COPY --from=build /src/.output /src/.output


CMD [ "node", ".output/server/index.mjs" ]

루트에 .dockerignore 파일도 추가합니다.

.dockerignore
node_modules

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

Terminal window
npx sst deploy --stage production

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

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

SST SolidStart 컨테이너 앱

콘솔 연결하기

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

SST 콘솔 자동 배포

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