Set up a Monorepo

앱을 위한 TypeScript 모노레포 설정

모노레포 설정하기

드롭인 모드는 간단한 프로젝트에 적합하지만, 여러 패키지를 갖는 프로젝트에는 모노레포를 사용하는 것을 권장합니다.

하지만 필요한 모든 것을 갖춘 모노레포를 설정하는 것은 생각보다 까다로울 수 있습니다. 이를 해결하기 위해 npm 워크스페이스를 사용하는 TypeScript 모노레포 템플릿을 만들었습니다.

사용 방법

이 템플릿을 사용하려면 다음 단계를 따르세요.

github.com/sst/monorepo-template로 이동하세요.
Use this template을 클릭하고 새로운 저장소를 생성하세요.
저장소를 클론하세요.
프로젝트 루트에서 다음 명령어를 실행하여 앱 이름을 변경하세요.
Terminal window
```
npx replace-in-file /monorepo-template/g MY_APP **/*.* --verbose
```
의존성을 설치하세요.
Terminal window
```
npm install
```

이제 프로젝트 루트에서 npx sst dev를 실행하면 됩니다.

프로젝트 구조

앱은 별도의 packages/ 디렉토리와 infra/ 디렉토리로 나뉩니다.

my-sst-app
├─ sst.config.ts
├─ package.json
├─ packages
│  ├─ functions
│  ├─ scripts
│  └─ core
└─ infra

packages/ 디렉토리에는 여러분의 워크스페이스가 있으며, 이는 루트 package.json에 있습니다.

"workspaces": [
  "packages/*"
]

자세히 살펴보겠습니다.

패키지

packages/ 디렉토리는 다음과 같은 내용을 포함합니다:

core/

이 디렉토리는 다른 패키지에서 사용할 수 있는 공유 코드를 포함합니다. 이 코드는 모듈로 정의됩니다. 예를 들어, Example 모듈이 있습니다.
packages/core/src/example/index.ts
```
export module Example {
  export function hello() {
    return "Hello, world!";
  }
}
```
이 모듈은 package.json에서 다음과 같이 내보냅니다:
packages/core/package.json
```
"exports": {
  "./*": [
    "./src/*\/index.ts",
    "./src/*.ts"
  ]
}
```
이렇게 하면 Example 모듈을 다음과 같이 가져올 수 있습니다:
```
import { Example } from "@monorepo-template/core/example";

Example.hello();
```
프로젝트의 다양한 도메인에 대해 새로운 모듈을 만드는 것을 권장합니다. 이는 도메인 주도 설계(Domain Driven Design)를 대략적으로 따릅니다.

또한 이 패키지를 테스트하기 위해 Vitest를 설정했습니다. sst shell CLI를 사용하여 테스트를 실행할 수 있습니다.
Terminal window
```
npm test
```
functions/

이 디렉토리에는 Lambda 함수가 포함되어 있습니다. core/ 패키지를 로컬 의존성으로 사용하여 가져옵니다.
scripts/

이 디렉토리에는 sst shell CLI와 tsx를 사용하여 SST 앱에서 실행할 수 있는 스크립트가 포함되어 있습니다. 예를 들어, scripts/src/example.ts를 실행하려면 packages/scripts/에서 다음 명령을 실행합니다.
Terminal window
```
npm run shell src/example.ts
```

packages/ 디렉토리에 추가 패키지를 추가할 수 있습니다. 예를 들어, frontend/와 backend/ 패키지를 추가할 수 있습니다.

인프라

infra/ 디렉토리는 앱의 인프라를 논리적으로 분리하여 별도의 파일로 관리할 수 있게 해줍니다. 앱이 커질수록 이 방식이 유용할 수 있습니다.

템플릿에는 api.ts와 storage.ts가 있습니다. 이 파일들은 다른 인프라 파일에서 사용할 수 있는 리소스를 내보냅니다.

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

그런 다음 sst.config.ts에서 이 파일들을 동적으로 불러옵니다.

async run() {
  const storage = await import("./infra/storage");
  await import("./infra/api");

  return {
    MyBucket: storage.bucket.name
  };
}

마지막으로, 컴포넌트의 일부 출력값이 앱의 출력값으로 설정됩니다.