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

AI 던전 게임

모듈 1: 모노레포 설정

먼저 새로운 모노레포를 생성합니다. 원하는 디렉토리 내에서 다음 명령어를 실행하세요:

Terminal window
npx create-nx-workspace@~20.6.3 dungeon-adventure --pm=pnpm --preset=ts --ci=skip --formatter=prettier

이 명령어는 dungeon-adventure 디렉토리 내에 NX 모노레포를 설정하며, 이후 vscode에서 열 수 있습니다. 파일 구조는 다음과 같아야 합니다:

  • 디렉터리.nx/
    • …
  • 디렉터리.vscode/
    • …
  • 디렉터리node_modules/
    • …
  • 디렉터리packages/ 하위 프로젝트가 위치할 디렉토리
    • …
  • .gitignore
  • .npmrc
  • .prettierignore
  • .prettierrc
  • nx.json Nx CLI 및 모노레포 기본값 구성
  • package.json 모든 node 종속성 정의
  • pnpm-lock.yaml 또는 bun.lock, yarn.lock, package-lock.json (패키지 매니저에 따라 다름)
  • pnpm-workspace.yaml (pnpm 사용 시)
  • README.md
  • tsconfig.base.json 모든 node 기반 하위 프로젝트가 상속할 기본 설정
  • tsconfig.json

@aws/nx-plugin의 컴포넌트를 모노레포에 추가하려면, dungeon-adventure 모노레포 루트에서 다음 명령어로 개발 의존성으로 설치해야 합니다:

Terminal window
pnpm add -Dw @aws/nx-plugin

이제 @aws/nx-plugin을 사용하여 다양한 하위 프로젝트를 생성할 준비가 되었습니다.

게임 API

먼저 Game API를 생성합니다. 다음 단계에 따라 GameApi라는 tRPC API를 생성하세요:

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

파일 트리에 몇 가지 새 파일이 생성된 것을 확인할 수 있습니다.

자세한 내용을 확인하려면 여기를 클릭하세요.

스토리 API

이제 Story API를 생성합니다. 다음 단계에 따라 StoryApi라는 Fast API를 생성하세요:

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

파일 트리에 몇 가지 새 파일이 생성된 것을 확인할 수 있습니다.

자세한 내용을 확인하려면 여기를 클릭하세요.

게임 UI: 웹사이트

이제 게임과 상호작용할 수 있는 UI를 생성합니다. 다음 단계에 따라 GameUI라는 웹사이트를 생성하세요:

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

파일 트리에 몇 가지 새 파일이 생성된 것을 확인할 수 있습니다.

자세한 내용을 확인하려면 여기를 클릭하세요.

게임 UI: 인증

이제 Amazon Cognito를 통해 인증된 액세스가 필요한 Game UI를 구성합니다:

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

파일 트리에 몇 가지 새 파일이 생성/변경된 것을 확인할 수 있습니다.

자세한 내용을 확인하려면 여기를 클릭하세요.

게임 UI: Story API 연결

이전에 생성한 Story API에 Game UI를 연결합니다:

  1. 설치 Nx Console VSCode Plugin 아직 설치하지 않았다면
  2. VSCode에서 Nx 콘솔 열기
  3. 클릭 Generate (UI) "Common Nx Commands" 섹션에서
  4. 검색 @aws/nx-plugin - api-connection
  5. 필수 매개변수 입력
    • sourceProject: @dungeon-adventure/game-ui
    • targetProject: dungeon_adventure.story_api
  6. 클릭 Generate

파일 트리에 몇 가지 새 파일이 생성/변경된 것을 확인할 수 있습니다.

자세한 내용을 확인하려면 여기를 클릭하세요.

게임 UI: Game API 연결

이전에 생성한 Game API에 Game UI를 연결합니다:

  1. 설치 Nx Console VSCode Plugin 아직 설치하지 않았다면
  2. VSCode에서 Nx 콘솔 열기
  3. 클릭 Generate (UI) "Common Nx Commands" 섹션에서
  4. 검색 @aws/nx-plugin - api-connection
  5. 필수 매개변수 입력
    • sourceProject: @dungeon-adventure/game-ui
    • targetProject: @dungeon-adventure/game-api-backend
  6. 클릭 Generate

파일 트리에 몇 가지 새 파일이 생성/변경된 것을 확인할 수 있습니다.

자세한 내용을 확인하려면 여기를 클릭하세요.

게임 UI: 인프라

마지막으로 생성할 하위 프로젝트는 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

파일 트리에 몇 가지 새 파일이 생성/변경된 것을 확인할 수 있습니다.

자세한 내용을 확인하려면 여기를 클릭하세요.

인프라 업데이트

packages/infra/src/stacks/application-stack.ts를 업데이트하여 이미 생성된 구성요소를 인스턴스화합니다:

import {
  GameApi,
  GameUI,
  StoryApi,
  UserIdentity,
} from ':dungeon-adventure/common-constructs';
import * as cdk from 'aws-cdk-lib';
import { Construct } from 'constructs';


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


    // 스택을 정의하는 코드
    const userIdentity = new UserIdentity(this, 'UserIdentity');


    const gameApi = new GameApi(this, 'GameApi');
    const storyApi = new StoryApi(this, 'StoryApi');


    // 인증된 역할에 API 호출 권한 부여
    [storyApi, gameApi].forEach((api) =>
      api.grantInvokeAccess(userIdentity.identityPool.authenticatedRole),
    );


    // runtime-config.json 자동 구성 위해 마지막에 인스턴스화
    new GameUI(this, 'GameUI');
  }
}

코드 빌드

이제 처음으로 코드를 빌드할 시간입니다
Terminal window
pnpm nx run-many --target build --all

다음과 같은 프롬프트가 표시됩니다:

Terminal window
 NX   The workspace is out of sync


[@nx/js:typescript-sync]: Some TypeScript configuration files are missing project references to the projects they depend on or contain outdated project references.


This will result in an error in CI.


? Would you like to sync the identified changes to get your workspace up to date? …
Yes, sync the changes and run the tasks
No, run the tasks without syncing the changes

이 메시지는 NX가 자동으로 업데이트할 수 있는 파일을 감지했음을 나타냅니다. 이 경우 타입스크립트 참조가 설정되지 않은 tsconfig.json 파일을 가리킵니다. Yes, sync the changes and run the tasks 옵션을 선택하여 진행합니다. 동기화 제너레이터가 누락된 타입스크립트 참조를 자동으로 추가하므로 모든 IDE 가져오기 오류가 해결됩니다!

모든 빌드 아티팩트는 모노레포 루트의 dist/ 폴더 내에서 사용 가능합니다. 생성된 파일을 정리하려면 dist/ 폴더를 삭제하면 됩니다.

축하합니다! 던전 어드벤처 게임의 핵심을 구현하기 위한 모든 하위 프로젝트를 성공적으로 생성했습니다. 🎉🎉🎉