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

AI 던전 게임

모듈 1: 모노레포 설정

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

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

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

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

이제 @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. 필수 매개변수 입력
    • name: 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 연결

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

  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 UI를 이전에 생성한 Game API에 연결합니다:

  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
  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);


    // The code that defines your stack goes here
    const userIdentity = new UserIdentity(this, 'UserIdentity');


    const gameApi = new GameApi(this, 'GameApi', {
      integrations: GameApi.defaultIntegrations(this).build(),
    });
    const storyApi = new StoryApi(this, 'StoryApi', {
      integrations: StoryApi.defaultIntegrations(this).build(),
    });


    // grant our authenticated role access to invoke our APIs
    [storyApi, gameApi].forEach((api) =>
      api.grantInvokeAccess(userIdentity.identityPool.authenticatedRole),
    );


    // Ensure this is instantiated last so our runtime-config.json can be automatically configured
    new GameUI(this, 'GameUI');
  }
}

기본적으로 각 API 작업은 개별 람다 함수에 매핑됩니다.

코드 빌드

이제 처음으로 코드를 빌드할 시간입니다
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가 자동 업데이트 가능한 파일을 감지했습니다. Yes, sync the changes and run the tasks를 선택하여 진행하세요. IDE 임포트 오류가 자동 해결됩니다.

모든 빌드 아티팩트는 루트의 dist/ 폴더에 생성됩니다. 정리 시 폴더 삭제로 모든 생성 파일을 제거할 수 있습니다.

축하합니다! 던전 어드벤처 게임 구현을 위한 모든 하위 프로젝트 생성이 완료되었습니다. 🎉🎉🎉