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

AI 던전 게임

모듈 1: 모노레포 설정

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

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

Terminal window
npx create-nx-workspace@~21.4.1 dungeon-adventure --pm=pnpm --preset=@aws/nx-plugin --iacProvider=CDK --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.config.mts AWS용 Nx 플러그인 구성

이제 @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: 인증”

이제 Amazon Cognito를 통해 인증된 접근을 요구하도록 Game UI를 구성해 보겠습니다. 다음 단계를 따르세요:

  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 연결”

이제 이전에 생성한 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 연결

섹션 제목: “게임 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
  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가 자동으로 업데이트할 수 있는 일부 파일을 감지했음을 나타냅니다. 이 경우 참조 프로젝트에 대한 TypeScript 참조가 설정되지 않은 tsconfig.json 파일을 가리킵니다. Yes, sync the changes and run the tasks 옵션을 선택하여 진행하세요. 동기화 제너레이터가 누락된 TypeScript 참조를 자동으로 추가하므로 모든 IDE 관련 가져오기 오류가 자동으로 해결됩니다!

모든 빌드 아티팩트는 이제 모노레포 루트의 dist/ 폴더 내에서 사용할 수 있습니다. 이는 @aws/nx-plugin에서 생성된 프로젝트의 표준 관행으로, 생성된 파일이 파일 트리 전체에 흩어지지 않도록 합니다. 파일을 정리하려면 dist/ 폴더를 삭제하면 됩니다.

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