콘텐츠로 이동
@aws/nx-plugin
Blog

빠른 시작 가이드

이 가이드에서는 @aws/nx-plugin을 설치하고 사용하여 AWS에서 프로젝트를 빠르게 구축하는 기본 사항을 설명합니다.

필수 조건

섹션 제목: “필수 조건”

진행 전 다음 전역 종속성이 필요합니다:

  • Git
  • Node >= 22 (버전 관리를 위해 NVM과 같은 도구 사용을 권장합니다)
    • node --version 실행으로 버전 확인
  • PNPM >= 10 (Yarn >= 4, Bun >= 1, 또는 NPM >= 10 사용도 가능)
    • pnpm --version, yarn --version, bun --version 또는 npm --version 실행으로 버전 확인
  • UV >= 0.5.29
    1. 다음 명령어로 Python 3.12 설치: uv python install 3.12.0
    2. uv python list --only-installed 실행으로 설치 확인
  • 애플리케이션이 배포될 AWS Credentials이 대상 AWS 계정에 구성되어 있어야 함
  • VSCode 사용 시 Nx Console VSCode Plugin 설치 권장

1단계: 새 Nx Workspace 초기화

섹션 제목: “1단계: 새 Nx Workspace 초기화”

원하는 패키지 매니저로 Nx 워크스페이스를 생성하려면 다음 명령어를 실행하세요:

Terminal window
npx create-nx-workspace@~21.0.3 my-project --pm=pnpm --preset=@aws/nx-plugin --ci=skip

완료 후 프로젝트 디렉토리로 이동합니다:

Terminal window
cd my-project

2단계: 제너레이터로 프로젝트 스캐폴딩

섹션 제목: “2단계: 제너레이터로 프로젝트 스캐폴딩”

이 빠른 시작 가이드에서는 tRPC API, React 웹사이트, Cognito 인증 및 CDK 인프라를 추가합니다. 프로젝트 유형에 따라 원하는 제너레이터 조합을 선택하여 프로젝트를 빠르게 부트스트랩할 수 있습니다. 왼쪽 탐색 바의 가이드 에서 전체 옵션 목록을 확인하세요.

tRPC API 추가

섹션 제목: “tRPC API 추가”
  1. 설치 Nx Console VSCode Plugin 아직 설치하지 않았다면
  2. VSCode에서 Nx 콘솔 열기
  3. 클릭 Generate (UI) "Common Nx Commands" 섹션에서
  4. 검색 @aws/nx-plugin - ts#trpc-api
  5. 필수 매개변수 입력
    • name: demo-api
    • auth: IAM
  6. 클릭 Generate

이 명령은 packages/demo-api 폴더 내에 API를 생성합니다.

React 웹사이트 추가

섹션 제목: “React 웹사이트 추가”
  1. 설치 Nx Console VSCode Plugin 아직 설치하지 않았다면
  2. VSCode에서 Nx 콘솔 열기
  3. 클릭 Generate (UI) "Common Nx Commands" 섹션에서
  4. 검색 @aws/nx-plugin - ts#react-website
  5. 필수 매개변수 입력
    • name: demo-website
  6. 클릭 Generate

이 명령은 packages/demo-website에 새 React 웹사이트를 스캐폴딩합니다.

Cognito 인증 추가

섹션 제목: “Cognito 인증 추가”
  1. 설치 Nx Console VSCode Plugin 아직 설치하지 않았다면
  2. VSCode에서 Nx 콘솔 열기
  3. 클릭 Generate (UI) "Common Nx Commands" 섹션에서
  4. 검색 @aws/nx-plugin - ts#react-website#auth
  5. 필수 매개변수 입력
    • project: @my-project/demo-website
    • cognitoDomain: my-demo
  6. 클릭 Generate

이 명령은 웹사이트에 Cognito 인증을 추가하기 위한 필요한 인프라와 React 코드를 설정합니다.

프론트엔드-백엔드 연결

섹션 제목: “프론트엔드-백엔드 연결”
  1. 설치 Nx Console VSCode Plugin 아직 설치하지 않았다면
  2. VSCode에서 Nx 콘솔 열기
  3. 클릭 Generate (UI) "Common Nx Commands" 섹션에서
  4. 검색 @aws/nx-plugin - api-connection
  5. 필수 매개변수 입력
    • sourceProject: @my-project/demo-website
    • targetProject: @my-project/demo-api
  6. 클릭 Generate

이 명령은 웹사이트가 tRPC API를 호출할 수 있도록 필요한 프로바이더를 구성합니다.

CDK 인프라 추가

섹션 제목: “CDK 인프라 추가”
  1. 설치 Nx Console VSCode Plugin 아직 설치하지 않았다면
  2. VSCode에서 Nx 콘솔 열기
  3. 클릭 Generate (UI) "Common Nx Commands" 섹션에서
  4. 검색 @aws/nx-plugin - ts#infra
  5. 필수 매개변수 입력
    • name: infra
  6. 클릭 Generate

이 명령은 AWS에 인프라를 배포할 수 있는 CDK 앱을 구성합니다.

3단계: 로컬에서 웹사이트 및 API 실행

섹션 제목: “3단계: 로컬에서 웹사이트 및 API 실행”

다음 명령으로 웹사이트와 연결된 API의 로컬 개발 서버를 시작하세요:

Terminal window
pnpm nx run demo-website:serve-local

웹사이트는 http://localhost:4200에서 확인할 수 있습니다.

웹사이트와 API 모두 변경 사항이 실시간으로 반영되며 핫 리로드됩니다.

4단계: 클라우드 리소스 정의 및 AWS 배포

섹션 제목: “4단계: 클라우드 리소스 정의 및 AWS 배포”

packages/infra/src/stacks/application-stack.ts 파일을 열고 다음 코드를 추가하세요:

import * as cdk from 'aws-cdk-lib';
import { DemoApi, DemoWebsite, UserIdentity } from ':my-project/common-constructs';
import { Construct } from 'constructs';


export class ApplicationStack extends cdk.Stack {
  constructor(scope: Construct, id: string, props?: cdk.StackProps) {
    super(scope, id, props);


    const identity = new UserIdentity(this, 'identity');
    const api = new DemoApi(this, 'api', {
      integrations: DemoApi.defaultIntegrations(this).build(),
    });
    api.grantInvokeAccess(identity.identityPool.authenticatedRole);


    new DemoWebsite(this, 'website');
  }
}

이 코드는 전체 스택 애플리케이션 배포에 필요한 모든 CDK 구성입니다.

인프라 빌드 및 배포

섹션 제목: “인프라 빌드 및 배포”

프로젝트를 빌드하려면 다음 명령을 실행하세요:

Terminal window
pnpm nx run-many --target build --all

프로젝트 배포를 위해 다음 명령을 실행하세요:

Terminal window
pnpm nx run infra:deploy --all

5단계: 배포된 클라우드 리소스로 웹사이트 테스트

섹션 제목: “5단계: 배포된 클라우드 리소스로 웹사이트 테스트”

  1. runtime-config.json 파일 가져오기:

    Terminal window
    pnpm nx run demo-website:load:runtime-config

  2. 로컬 웹사이트 서버 시작

    Terminal window
    pnpm nx run demo-website:serve

웹사이트는 http://localhost:4200에서 확인할 수 있으며, 배포된 API 및 인증 리소스를 가리키게 됩니다.

축하합니다! 🎉 @aws/nx-plugin을 사용하여 전체 스택 애플리케이션을 성공적으로 구축하고 배포했습니다!