컨텐츠로 건너뛰기
@aws/nx-plugin
Blog

빠른 시작 가이드

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

필수 조건

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

1단계: 새로운 Nx 작업 공간 초기화

원하는 패키지 매니저로 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단계: 제너레이터를 사용하여 프로젝트 구조 생성

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

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 웹사이트 추가

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

이 명령은 packages/demo-website에 새로운 React 웹사이트 구조를 생성합니다.

Cognito 인증 추가

  1. 설치 Nx Console VSCode Plugin 아직 설치하지 않았다면
  2. VSCode에서 Nx 콘솔 열기
  3. 클릭 Generate (UI) "Common Nx Commands" 섹션에서
  4. 검색 @aws/nx-plugin - ts#cloudscape-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-backend
  6. 클릭 Generate

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

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단계: 클라우드 리소스 정의 및 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

4단계: 프론트엔드 로컬 실행

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

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

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

    Terminal window
    pnpm nx run @demo/demo-website:serve

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

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