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

AI 던전 게임

모듈 1: 모노레포 설정

섹션 제목: “모듈 1: 모노레포 설정”

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

Terminal window
npx create-nx-workspace@~21.4.1 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

섹션 제목: “게임 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

섹션 제목: “스토리 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
    • moduleName: story_api
  6. 클릭 Generate

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

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

게임 UI: 웹사이트

섹션 제목: “게임 UI: 웹사이트”

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

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

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

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

게임 UI: 인증

섹션 제목: “게임 UI: 인증”

이제 Game UI가 Amazon Cognito를 통해 인증된 접근을 요구하도록 설정해 보겠습니다:

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

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

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

게임 UI: Story API 연결

섹션 제목: “게임 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 연결

섹션 제목: “게임 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: 인프라

섹션 제목: “게임 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 { Stack, StackProps } from 'aws-cdk-lib';
import { Construct } from 'constructs';


export class ApplicationStack extends Stack {
  constructor(scope: Construct, id: string, props?: 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에 기본 통합을 제공합니다. 기본적으로 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 옵션을 선택하여 진행합니다. 동기화 생성기가 누락된 TypeScript 참조를 자동으로 추가하므로 모든 IDE 가져오기 오류가 해결됩니다.

모든 빌드 아티팩트는 모노레포 루트의 dist/ 폴더 내에서 사용할 수 있습니다. 파일 트리를 정리하려면 dist/ 폴더를 삭제하면 됩니다.

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