콘텐츠로 이동

AI 던전 게임

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

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을 사용하여 다양한 서브 프로젝트를 생성할 준비가 되었습니다.

먼저 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

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

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

이제 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를 생성합니다. 다음 단계에 따라 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

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

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

이제 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

파일 트리에 몇 가지 새로운 파일/변경 사항이 나타납니다.

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

이제 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

파일 트리에 몇 가지 새로운 파일/변경 사항이 나타납니다.

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

이제 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

파일 트리에 몇 가지 새로운 파일/변경 사항이 나타납니다.

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

마지막으로 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를 선택하여 진행합니다.

모든 빌드 아티팩트는 모노레포 루트의 dist/ 폴더에 생성됩니다. 정리 시 dist/ 폴더 삭제 가능합니다.

축하합니다! 던전 어드벤처 게임의 핵심 구현을 시작할 준비가 완료되었습니다. 🎉🎉🎉