AI 던전 게임
모듈 1: 모노레포 설정
섹션 제목: “모듈 1: 모노레포 설정”먼저 새로운 모노레포를 생성합니다. 원하는 디렉토리에서 다음 명령어를 실행하세요:
npx create-nx-workspace@~21.0.3 dungeon-adventure --pm=pnpm --preset=@aws/nx-plugin --ci=skipnpx create-nx-workspace@~21.0.3 dungeon-adventure --pm=yarn --preset=@aws/nx-plugin --ci=skipnpx create-nx-workspace@~21.0.3 dungeon-adventure --pm=npm --preset=@aws/nx-plugin --ci=skipnpx create-nx-workspace@~21.0.3 dungeon-adventure --pm=bun --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를 생성하세요:
- 설치 Nx Console VSCode Plugin 아직 설치하지 않았다면
- VSCode에서 Nx 콘솔 열기
- 클릭
Generate (UI)"Common Nx Commands" 섹션에서 - 검색
@aws/nx-plugin - ts#trpc-api - 필수 매개변수 입력
- name: GameApi
- 클릭
Generate
pnpm nx g @aws/nx-plugin:ts#trpc-api --name=GameApi --no-interactiveyarn nx g @aws/nx-plugin:ts#trpc-api --name=GameApi --no-interactivenpx nx g @aws/nx-plugin:ts#trpc-api --name=GameApi --no-interactivebunx nx g @aws/nx-plugin:ts#trpc-api --name=GameApi --no-interactive어떤 파일이 변경될지 확인하기 위해 드라이 런을 수행할 수도 있습니다
pnpm nx g @aws/nx-plugin:ts#trpc-api --name=GameApi --no-interactive --dry-runyarn nx g @aws/nx-plugin:ts#trpc-api --name=GameApi --no-interactive --dry-runnpx nx g @aws/nx-plugin:ts#trpc-api --name=GameApi --no-interactive --dry-runbunx nx g @aws/nx-plugin:ts#trpc-api --name=GameApi --no-interactive --dry-run파일 트리에 새로운 파일들이 생성된 것을 확인할 수 있습니다.
자세한 내용을 확인하려면 여기를 클릭하세요. packages/game-api/src/router.ts packages/game-api/src/procedures/echo.ts packages/game-api/src/schema/echo.ts packages/common/constructs/src/app/apis/game-api.ts
ts#trpc-api 업데이트된 파일
ts#trpc-api 제너레이터로 생성된 모든 파일 목록입니다. 파일 트리에서 강조된 주요 파일들을 살펴보겠습니다:
디렉터리packages/
디렉터리common/
디렉터리constructs/
디렉터리src/
디렉터리app/ 앱 특화 CDK 컨스트럭트
디렉터리apis/
- game-api.ts tRPC API 생성용 CDK 컨스트럭트
- index.ts
- …
- index.ts
디렉터리core/ 일반 CDK 컨스트럭트
디렉터리api/
- rest-api.ts API Gateway Rest API 기본 컨스트럭트
- trpc-utils.ts trpc API CDK 유틸리티
- utils.ts API 컨스트럭트 유틸리티
- index.ts
- runtime-config.ts
- index.ts
- project.json
- …
디렉터리types/ 공유 타입
디렉터리src/
- index.ts
- runtime-config.ts CDK와 웹사이트 모두에서 사용되는 인터페이스 정의
- project.json
- …
디렉터리game-api/ tRPC API
디렉터리src/
디렉터리client/ 머신 간 통신용 클라이언트
- index.ts
- sigv4.ts
디렉터리middleware/ Powertools 계측
- error.ts
- index.ts
- logger.ts
- metrics.ts
- tracer.ts
디렉터리schema/ API 입력/출력 정의
- echo.ts
디렉터리procedures/ API 프로시저/라우트 구현
- echo.ts
- index.ts
- init.ts 컨텍스트 및 미들웨어 설정
- local-server.ts 로컬 tRPC 서버 실행용
- router.ts 모든 프로시저를 정의하는 람다 핸들러 진입점
- project.json
- …
- eslint.config.mjs
- vitest.workspace.ts
주요 파일 몇 가지를 살펴보겠습니다:
import { awsLambdaRequestHandler, CreateAWSLambdaContextOptions,} from '@trpc/server/adapters/aws-lambda';import { echo } from './procedures/echo.js';import { t } from './init.js';import { APIGatewayProxyEvent } from 'aws-lambda';
export const router = t.router;
export const appRouter = router({ echo,});
export const handler = awsLambdaRequestHandler({ router: appRouter, createContext: ( ctx: CreateAWSLambdaContextOptions<APIGatewayProxyEvent>, ) => ctx, responseMeta: () => ({ headers: { 'Access-Control-Allow-Origin': '*', 'Access-Control-Allow-Methods': '*', }, }),});
export type AppRouter = typeof appRouter;라우터는 tRPC API의 진입점이며 모든 API 메서드를 선언하는 곳입니다. 위 예시에서는 echo 메서드가 구현되어 있습니다.
import { publicProcedure } from '../init.js';import { EchoInputSchema, EchoOutputSchema,} from '../schema/echo.js';
export const echo = publicProcedure .input(EchoInputSchema) .output(EchoOutputSchema) .query((opts) => ({ result: opts.input.message }));이 파일은 echo 메서드의 구현체로, 입력 및 출력 데이터 구조를 강력하게 타입화합니다.
import { z } from 'zod/v4';
export const EchoInputSchema = z.object({ message: z.string(),});
export type IEchoInput = z.TypeOf<typeof EchoInputSchema>;
export const EchoOutputSchema = z.object({ result: z.string(),});
export type IEchoOutput = z.TypeOf<typeof EchoOutputSchema>;모든 tRPC 스키마 정의는 Zod를 사용하며 z.TypeOf 구문을 통해 타입스크립트 타입으로 내보내집니다.
import { Construct } from 'constructs';import * as url from 'url';import { Code, Runtime, Function, FunctionProps, Tracing,} from 'aws-cdk-lib/aws-lambda';import { AuthorizationType, Cors, LambdaIntegration,} from 'aws-cdk-lib/aws-apigateway';import { Duration, Stack } from 'aws-cdk-lib';import { PolicyDocument, PolicyStatement, Effect, AccountPrincipal, AnyPrincipal,} from 'aws-cdk-lib/aws-iam';import { IntegrationBuilder, RestApiIntegration,} from '../../core/api/utils.js';import { RestApi } from '../../core/api/rest-api.js';import { Procedures, routerToOperations } from '../../core/api/trpc-utils.js';import { AppRouter, appRouter } from ':dungeon-adventure/game-api';
type Operations = Procedures<AppRouter>;
export interface GameApiProps< TIntegrations extends Record<Operations, RestApiIntegration>,> { integrations: TIntegrations;}
export class GameApi< TIntegrations extends Record<Operations, RestApiIntegration>,> extends RestApi<Operations, TIntegrations> { public static defaultIntegrations = (scope: Construct) => { return IntegrationBuilder.rest({ operations: routerToOperations(appRouter), defaultIntegrationOptions: { runtime: Runtime.NODEJS_LATEST, handler: 'index.handler', code: Code.fromAsset( url.fileURLToPath( new URL( '../../../../../../dist/packages/game-api/bundle', import.meta.url, ), ), ), timeout: Duration.seconds(30), tracing: Tracing.ACTIVE, environment: { AWS_CONNECTION_REUSE_ENABLED: '1', }, } satisfies FunctionProps, buildDefaultIntegration: (op, props: FunctionProps) => { const handler = new Function(scope, `GameApi${op}Handler`, props); return { handler, integration: new LambdaIntegration(handler) }; }, }); };
constructor( scope: Construct, id: string, props: GameApiProps<TIntegrations>, ) { super(scope, id, { apiName: 'GameApi', defaultMethodOptions: { authorizationType: AuthorizationType.IAM, }, defaultCorsPreflightOptions: { allowOrigins: Cors.ALL_ORIGINS, allowMethods: Cors.ALL_METHODS, }, policy: new PolicyDocument({ statements: [ new PolicyStatement({ effect: Effect.ALLOW, principals: [new AccountPrincipal(Stack.of(scope).account)], actions: ['execute-api:Invoke'], resources: ['execute-api:/*'], }), new PolicyStatement({ effect: Effect.ALLOW, principals: [new AnyPrincipal()], actions: ['execute-api:Invoke'], resources: ['execute-api:/*/OPTIONS/*'], }), ], }), operations: routerToOperations(appRouter), ...props, }); }}이 CDK 컨스트럭트는 GameApi를 정의합니다. defaultIntegrations 메서드는 tRPC API의 각 프로시저에 대해 람다 함수를 자동 생성하며, cdk synth 시 번들링이 발생하지 않습니다.
스토리 API
섹션 제목: “스토리 API”이제 Fast API인 StoryApi를 생성합니다:
- 설치 Nx Console VSCode Plugin 아직 설치하지 않았다면
- VSCode에서 Nx 콘솔 열기
- 클릭
Generate (UI)"Common Nx Commands" 섹션에서 - 검색
@aws/nx-plugin - py#fast-api - 필수 매개변수 입력
- name: StoryApi
- moduleName: story_api
- 클릭
Generate
pnpm nx g @aws/nx-plugin:py#fast-api --name=StoryApi --moduleName=story_api --no-interactiveyarn nx g @aws/nx-plugin:py#fast-api --name=StoryApi --moduleName=story_api --no-interactivenpx nx g @aws/nx-plugin:py#fast-api --name=StoryApi --moduleName=story_api --no-interactivebunx nx g @aws/nx-plugin:py#fast-api --name=StoryApi --moduleName=story_api --no-interactive어떤 파일이 변경될지 확인하기 위해 드라이 런을 수행할 수도 있습니다
pnpm nx g @aws/nx-plugin:py#fast-api --name=StoryApi --moduleName=story_api --no-interactive --dry-runyarn nx g @aws/nx-plugin:py#fast-api --name=StoryApi --moduleName=story_api --no-interactive --dry-runnpx nx g @aws/nx-plugin:py#fast-api --name=StoryApi --moduleName=story_api --no-interactive --dry-runbunx nx g @aws/nx-plugin:py#fast-api --name=StoryApi --moduleName=story_api --no-interactive --dry-run파일 트리에 새로운 파일들이 생성된 것을 확인할 수 있습니다.
자세한 내용을 확인하려면 여기를 클릭하세요. packages/common/constructs/src/app/apis/story-api.ts packages/common/types/src/runtime-config.ts packages/story_api/story_api/main.py
py#fast-api 업데이트된 파일
py#fast-api 제너레이터로 생성된 주요 파일들:
디렉터리.venv/ 단일 가상 환경
- …
디렉터리packages/
디렉터리common/
디렉터리constructs/
디렉터리src/
디렉터리app/
디렉터리apis/
- story-api.ts Fast API CDK 컨스트럭트
- project.json story_api 빌드 의존성 추가
디렉터리types/
디렉터리src/
- runtime-config.ts StoryApi 추가
디렉터리story_api/
디렉터리story_api/ 파이썬 모듈
- init.py Powertools, FastAPI 설정
- main.py 람다 진입점
디렉터리tests/
- …
- .python-version
- project.json
- pyproject.toml
- .python-version
- pyproject.toml
- uv.lock
// ... [CDK 컨스트럭트 구현 생략] ...이 CDK 컨스트럭트는 StoryApi를 정의하며, 각 FastAPI 작업에 대해 람다 함수를 자동 생성합니다.
export type ApiUrl = string;export interface IRuntimeConfig { apis: { GameApi: ApiUrl; StoryApi: ApiUrl; };}제너레이터가 AST 변환을 수행하여 StoryApi를 IRuntimeConfig에 추가한 예시입니다.
from .init import app, lambda_handler, tracer
handler = lambda_handler
@app.get("/")@tracer.capture_methoddef read_root(): return {"Hello": "World"}Pydantic을 사용하여 입력/출력 타입 안전성을 보장할 수 있습니다.
게임 UI: 웹사이트
섹션 제목: “게임 UI: 웹사이트”게임 상호작용용 UI를 생성합니다:
- 설치 Nx Console VSCode Plugin 아직 설치하지 않았다면
- VSCode에서 Nx 콘솔 열기
- 클릭
Generate (UI)"Common Nx Commands" 섹션에서 - 검색
@aws/nx-plugin - ts#react-website - 필수 매개변수 입력
- name: GameUI
- 클릭
Generate
pnpm nx g @aws/nx-plugin:ts#react-website --name=GameUI --no-interactiveyarn nx g @aws/nx-plugin:ts#react-website --name=GameUI --no-interactivenpx nx g @aws/nx-plugin:ts#react-website --name=GameUI --no-interactivebunx nx g @aws/nx-plugin:ts#react-website --name=GameUI --no-interactive어떤 파일이 변경될지 확인하기 위해 드라이 런을 수행할 수도 있습니다
pnpm nx g @aws/nx-plugin:ts#react-website --name=GameUI --no-interactive --dry-runyarn nx g @aws/nx-plugin:ts#react-website --name=GameUI --no-interactive --dry-runnpx nx g @aws/nx-plugin:ts#react-website --name=GameUI --no-interactive --dry-runbunx nx g @aws/nx-plugin:ts#react-website --name=GameUI --no-interactive --dry-run파일 트리에 새로운 파일들이 생성되었습니다.
자세한 내용을 확인하려면 여기를 클릭하세요. packages/common/constructs/src/app/static-websites/game-ui.ts packages/game-ui/src/main.tsx packages/game-ui/src/routes/welcome/index.tsx
ts#react-website 업데이트된 파일
ts#react-website 제너레이터로 생성된 주요 파일들:
디렉터리packages/
디렉터리common/
디렉터리constructs/
디렉터리src/
디렉터리app/
디렉터리static-websites/
- game-ui.ts Game UI CDK 컨스트럭트
디렉터리core/
- static-website.ts 정적 웹사이트 컨스트럭트
디렉터리game-ui/
디렉터리public/
- …
디렉터리src/
디렉터리components/
디렉터리AppLayout/ 페이지 레이아웃
- index.ts
- navitems.ts
디렉터리hooks/
- useAppLayout.tsx
디렉터리routes/ 파일 기반 라우팅
- index.tsx
- __root.tsx
디렉터리welcome/
- index.tsx
- config.ts
- main.tsx React 진입점
- routeTree.gen.ts
- styles.css
- index.html
- project.json
- vite.config.ts
// ... [CDK 컨스트럭트 구현 생략] ...Vite 기반 UI 번들을 사용하는 CDK 컨스트럭트입니다.
// ... [React 진입점 구현 생략] ...파일 기반 라우팅이 구성된 React 진입점입니다.
// ... [Welcome 컴포넌트 구현 생략] .../welcome 라우트용 컴포넌트입니다.
게임 UI: 인증
섹션 제목: “게임 UI: 인증”Amazon Cognito를 통한 인증 설정:
- 설치 Nx Console VSCode Plugin 아직 설치하지 않았다면
- VSCode에서 Nx 콘솔 열기
- 클릭
Generate (UI)"Common Nx Commands" 섹션에서 - 검색
@aws/nx-plugin - ts#react-website#auth - 필수 매개변수 입력
- cognitoDomain: game-ui
- project: @dungeon-adventure/game-ui
- allowSignup: true
- 클릭
Generate
pnpm nx g @aws/nx-plugin:ts#react-website#auth --cognitoDomain=game-ui --project=@dungeon-adventure/game-ui --allowSignup=true --no-interactiveyarn nx g @aws/nx-plugin:ts#react-website#auth --cognitoDomain=game-ui --project=@dungeon-adventure/game-ui --allowSignup=true --no-interactivenpx nx g @aws/nx-plugin:ts#react-website#auth --cognitoDomain=game-ui --project=@dungeon-adventure/game-ui --allowSignup=true --no-interactivebunx nx g @aws/nx-plugin:ts#react-website#auth --cognitoDomain=game-ui --project=@dungeon-adventure/game-ui --allowSignup=true --no-interactive어떤 파일이 변경될지 확인하기 위해 드라이 런을 수행할 수도 있습니다
pnpm nx g @aws/nx-plugin:ts#react-website#auth --cognitoDomain=game-ui --project=@dungeon-adventure/game-ui --allowSignup=true --no-interactive --dry-runyarn nx g @aws/nx-plugin:ts#react-website#auth --cognitoDomain=game-ui --project=@dungeon-adventure/game-ui --allowSignup=true --no-interactive --dry-runnpx nx g @aws/nx-plugin:ts#react-website#auth --cognitoDomain=game-ui --project=@dungeon-adventure/game-ui --allowSignup=true --no-interactive --dry-runbunx nx g @aws/nx-plugin:ts#react-website#auth --cognitoDomain=game-ui --project=@dungeon-adventure/game-ui --allowSignup=true --no-interactive --dry-run파일 트리가 업데이트되었습니다.
자세한 내용을 확인하려면 여기를 클릭하세요. packages/game-ui/src/main.tsx
ts#react-website#auth 업데이트된 파일
디렉터리packages/
디렉터리common/
디렉터리constructs/
디렉터리src/
디렉터리core/
- user-identity.ts 사용자 풀 CDK 컨스트럭트
디렉터리types/
디렉터리src/
- runtime-config.ts cognitoProps 추가
디렉터리game-ui/
디렉터리src/
디렉터리components/
디렉터리AppLayout/
- index.tsx 헤더 업데이트
디렉터리CognitoAuth/
- index.ts Cognito 인증 관리
디렉터리RuntimeConfig/
- index.tsx 런타임 설정 제공
디렉터리hooks/
- useRuntimeConfig.tsx
- main.tsx Cognito 추가
import CognitoAuth from './components/CognitoAuth';import RuntimeConfigProvider from './components/RuntimeConfig';// ... [나머지 구현 생략] ...RuntimeConfigProvider와 CognitoAuth 컴포넌트가 추가되었습니다.
게임 UI: Story API 연결
섹션 제목: “게임 UI: Story API 연결”Story API 연결 설정:
- 설치 Nx Console VSCode Plugin 아직 설치하지 않았다면
- VSCode에서 Nx 콘솔 열기
- 클릭
Generate (UI)"Common Nx Commands" 섹션에서 - 검색
@aws/nx-plugin - api-connection - 필수 매개변수 입력
- sourceProject: @dungeon-adventure/game-ui
- targetProject: dungeon_adventure.story_api
- 클릭
Generate
pnpm nx g @aws/nx-plugin:api-connection --sourceProject=@dungeon-adventure/game-ui --targetProject=dungeon_adventure.story_api --no-interactiveyarn nx g @aws/nx-plugin:api-connection --sourceProject=@dungeon-adventure/game-ui --targetProject=dungeon_adventure.story_api --no-interactivenpx nx g @aws/nx-plugin:api-connection --sourceProject=@dungeon-adventure/game-ui --targetProject=dungeon_adventure.story_api --no-interactivebunx nx g @aws/nx-plugin:api-connection --sourceProject=@dungeon-adventure/game-ui --targetProject=dungeon_adventure.story_api --no-interactive어떤 파일이 변경될지 확인하기 위해 드라이 런을 수행할 수도 있습니다
pnpm nx g @aws/nx-plugin:api-connection --sourceProject=@dungeon-adventure/game-ui --targetProject=dungeon_adventure.story_api --no-interactive --dry-runyarn nx g @aws/nx-plugin:api-connection --sourceProject=@dungeon-adventure/game-ui --targetProject=dungeon_adventure.story_api --no-interactive --dry-runnpx nx g @aws/nx-plugin:api-connection --sourceProject=@dungeon-adventure/game-ui --targetProject=dungeon_adventure.story_api --no-interactive --dry-runbunx nx g @aws/nx-plugin:api-connection --sourceProject=@dungeon-adventure/game-ui --targetProject=dungeon_adventure.story_api --no-interactive --dry-run파일 트리가 업데이트되었습니다.
자세한 내용을 확인하려면 여기를 클릭하세요. packages/game-ui/src/hooks/useStoryApiClient.tsx packages/game-ui/src/components/StoryApiProvider.tsx
UI -> FastAPI 연결 업데이트된 파일
디렉터리packages/
디렉터리game-ui/
디렉터리src/
디렉터리hooks/
- useSigV4.tsx 요청 서명
- useStoryApiClient.tsx 클라이언트 훅
- useStoryApi.tsx TanStack Query 훅
디렉터리components/
- QueryClientProvider.tsx
- StoryApiProvider.tsx
- main.tsx 프로바이더 추가
디렉터리story_api/
디렉터리scripts/
- generate_open_api.py
- project.json openapi.json 생성 설정
// ... [StoryApi 클라이언트 훅 구현 생략] ...생성된 클라이언트를 사용하는 훅입니다.
// ... [StoryApi 프로바이더 구현 생략] ...TanStack Query 훅을 제공하는 프로바이더입니다.
게임 UI: Game API 연결
섹션 제목: “게임 UI: Game API 연결”Game API 연결 설정:
- 설치 Nx Console VSCode Plugin 아직 설치하지 않았다면
- VSCode에서 Nx 콘솔 열기
- 클릭
Generate (UI)"Common Nx Commands" 섹션에서 - 검색
@aws/nx-plugin - api-connection - 필수 매개변수 입력
- sourceProject: @dungeon-adventure/game-ui
- targetProject: @dungeon-adventure/game-api
- 클릭
Generate
pnpm nx g @aws/nx-plugin:api-connection --sourceProject=@dungeon-adventure/game-ui --targetProject=@dungeon-adventure/game-api --no-interactiveyarn nx g @aws/nx-plugin:api-connection --sourceProject=@dungeon-adventure/game-ui --targetProject=@dungeon-adventure/game-api --no-interactivenpx nx g @aws/nx-plugin:api-connection --sourceProject=@dungeon-adventure/game-ui --targetProject=@dungeon-adventure/game-api --no-interactivebunx nx g @aws/nx-plugin:api-connection --sourceProject=@dungeon-adventure/game-ui --targetProject=@dungeon-adventure/game-api --no-interactive어떤 파일이 변경될지 확인하기 위해 드라이 런을 수행할 수도 있습니다
pnpm nx g @aws/nx-plugin:api-connection --sourceProject=@dungeon-adventure/game-ui --targetProject=@dungeon-adventure/game-api --no-interactive --dry-runyarn nx g @aws/nx-plugin:api-connection --sourceProject=@dungeon-adventure/game-ui --targetProject=@dungeon-adventure/game-api --no-interactive --dry-runnpx nx g @aws/nx-plugin:api-connection --sourceProject=@dungeon-adventure/game-ui --targetProject=@dungeon-adventure/game-api --no-interactive --dry-runbunx nx g @aws/nx-plugin:api-connection --sourceProject=@dungeon-adventure/game-ui --targetProject=@dungeon-adventure/game-api --no-interactive --dry-run파일 트리가 업데이트되었습니다.
자세한 내용을 확인하려면 여기를 클릭하세요. packages/game-ui/src/hooks/useGameApi.tsx packages/game-ui/src/main.tsx
UI -> tRPC 연결 업데이트된 파일
디렉터리packages/
디렉터리game-ui/
디렉터리src/
디렉터리components/
- GameApiClientProvider.tsx tRPC 클라이언트 설정
디렉터리hooks/
- useGameApi.tsx tRPC 훅
- main.tsx tRPC 프로바이더 추가
// ... [tRPC 훅 구현 생략] ...tRPC의 React Query 통합을 사용하는 훅입니다.
import GameApiClientProvider from './components/GameApiClientProvider';import QueryClientProvider from './components/QueryClientProvider';// ... [나머지 구현 생략] ...tRPC 프로바이더가 추가되었습니다.
게임 UI: 인프라
섹션 제목: “게임 UI: 인프라”CDK 인프라 프로젝트 생성:
- 설치 Nx Console VSCode Plugin 아직 설치하지 않았다면
- VSCode에서 Nx 콘솔 열기
- 클릭
Generate (UI)"Common Nx Commands" 섹션에서 - 검색
@aws/nx-plugin - ts#infra - 필수 매개변수 입력
- name: infra
- 클릭
Generate
pnpm nx g @aws/nx-plugin:ts#infra --name=infra --no-interactiveyarn nx g @aws/nx-plugin:ts#infra --name=infra --no-interactivenpx nx g @aws/nx-plugin:ts#infra --name=infra --no-interactivebunx nx g @aws/nx-plugin:ts#infra --name=infra --no-interactive어떤 파일이 변경될지 확인하기 위해 드라이 런을 수행할 수도 있습니다
pnpm nx g @aws/nx-plugin:ts#infra --name=infra --no-interactive --dry-runyarn nx g @aws/nx-plugin:ts#infra --name=infra --no-interactive --dry-runnpx nx g @aws/nx-plugin:ts#infra --name=infra --no-interactive --dry-runbunx nx g @aws/nx-plugin:ts#infra --name=infra --no-interactive --dry-run파일 트리가 업데이트되었습니다.
자세한 내용을 확인하려면 여기를 클릭하세요. packages/infra/src/main.ts packages/infra/src/stacks/application-stack.ts
ts#infra 업데이트된 파일
디렉터리packages/
디렉터리common/
디렉터리constructs/
디렉터리src/
디렉터리core/
디렉터리cfn-guard-rules/
- *.guard
- cfn-guard.ts
- index.ts
디렉터리infra
디렉터리src/
디렉터리stacks/
- application-stack.ts CDK 리소스 정의
- index.ts
- main.ts 스택 진입점
- cdk.json
- project.json
- tsconfig.json 참조 업데이트
- tsconfig.base.json 별칭 추가
// ... [CDK 앱 설정 생략] ...cfn-guard를 사용한 인프라 유효성 검사가 구성됩니다.
// ... [CDK 스택 기본 구조 생략] ...인프라 리소스가 정의될 스택입니다.
인프라 업데이트
섹션 제목: “인프라 업데이트”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 Terminal window Terminal window Terminal window Terminal window Terminal window Terminal window Terminal window
Terminal window Terminal window Terminal window Terminal window Terminal window Terminal window Terminal window Terminal window
Nx 명령어
단일 vs 다중 타겟
섹션 제목: “단일 vs 다중 타겟”run-many 명령어는 여러 하위 프로젝트에 대해 타겟을 실행합니다. 종속성 순서를 보장합니다.
단일 프로젝트 빌드 예시:
pnpm nx run @dungeon-adventure/infra:buildyarn nx run @dungeon-adventure/infra:buildnpx nx run @dungeon-adventure/infra:buildbunx nx run @dungeon-adventure/infra:build의존성 시각화
섹션 제목: “의존성 시각화”pnpm nx graphyarn nx graphnpx nx graphbunx nx graph캐시 무시 빌드:
pnpm nx run @dungeon-adventure/infra:build --skip-nx-cacheyarn nx run @dungeon-adventure/infra:build --skip-nx-cachenpx nx run @dungeon-adventure/infra:build --skip-nx-cachebunx nx run @dungeon-adventure/infra:build --skip-nx-cache캐시 초기화:
pnpm nx resetyarn nx resetnpx nx resetbunx nx resetpnpm nx run-many --target build --allyarn nx run-many --target build --allnpx nx run-many --target build --allbunx nx run-many --target build --all프롬프트에서 Yes, sync the changes and run the tasks를 선택하여 타입스크립트 참조를 동기화합니다.
모든 빌드 아티팩트는 dist/ 폴더에 생성됩니다. 축하합니다! 던전 어드벤처 게임 코어 구현을 시작할 준비가 완료되었습니다. 🎉🎉🎉