TypeScript Nx 플러그인

통합 Model Context Protocol (MCP) 서버가 포함된 완전한 TypeScript Nx 플러그인을 생성합니다. 이 생성기는 AI 어시스턴트가 자동 코드 생성 및 프로젝트 스캐폴딩에 사용할 수 있는 맞춤형 생성기를 구축하기 위한 기반을 제공합니다.

사용 방법

Nx 플러그인 생성

TypeScript Nx 플러그인을 두 가지 방법으로 생성할 수 있습니다:

VSCode

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

CLI

pnpm

pnpm nx g @aws/nx-plugin:ts#nx-plugin

yarn

yarn nx g @aws/nx-plugin:ts#nx-plugin

npm

npx nx g @aws/nx-plugin:ts#nx-plugin

bun

bunx nx g @aws/nx-plugin:ts#nx-plugin

어떤 파일이 변경될지 확인하기 위해 드라이 런을 수행할 수도 있습니다

pnpm

pnpm nx g @aws/nx-plugin:ts#nx-plugin --dry-run

yarn

yarn nx g @aws/nx-plugin:ts#nx-plugin --dry-run

npm

npx nx g @aws/nx-plugin:ts#nx-plugin --dry-run

bun

bunx nx g @aws/nx-plugin:ts#nx-plugin --dry-run

옵션

매개변수	타입	기본값	설명
name 필수	string	-	TypeScript project name
directory	string	packages	Parent directory where the library is placed.
subDirectory	string	-	The sub directory the lib is placed in. By default this is the library name.

생성기 출력 결과

생성기는 다음 프로젝트 구조를 만듭니다:

• 디렉터리your-plugin/

  • 디렉터리src/

    • index.ts 플러그인의 진입점 (비어 있음)
    • 디렉터리mcp-server/

      • index.ts MCP 서버 진입점
      • server.ts 주요 MCP 서버 설정
      • 디렉터리tools/

        • create-workspace-command.ts 작업공간 생성 안내 도구
        • general-guidance.ts Nx 및 플러그인 일반 안내 도구
        • list-generators.ts 사용 가능한 생성기 목록 표시 도구
        • generator-guide.ts 상세 생성기 정보 제공 도구
      • utils.ts MCP 서버용 유틸리티 함수
  • generators.json Nx 생성기 설정 (초기에 비어 있음)
  • package.json MCP 서버 바이너리가 포함된 플러그인 패키지 설정
  • tsconfig.json TypeScript 설정 (Nx 호환성을 위한 CommonJS)
  • project.json 빌드 및 패키징 대상을 포함한 Nx 프로젝트 설정

Nx 플러그인 작업 방법

생성기 추가

플러그인 프로젝트가 준비되면 ts#nx-generator 생성기를 사용하여 생성기를 추가할 수 있습니다:

VSCode

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

CLI

pnpm

pnpm nx g @aws/nx-plugin:ts#nx-generator --pluginProject=your-plugin

yarn

yarn nx g @aws/nx-plugin:ts#nx-generator --pluginProject=your-plugin

npm

npx nx g @aws/nx-plugin:ts#nx-generator --pluginProject=your-plugin

bun

bunx nx g @aws/nx-plugin:ts#nx-generator --pluginProject=your-plugin

어떤 파일이 변경될지 확인하기 위해 드라이 런을 수행할 수도 있습니다

pnpm

pnpm nx g @aws/nx-plugin:ts#nx-generator --pluginProject=your-plugin --dry-run

yarn

yarn nx g @aws/nx-plugin:ts#nx-generator --pluginProject=your-plugin --dry-run

npm

npx nx g @aws/nx-plugin:ts#nx-generator --pluginProject=your-plugin --dry-run

bun

bunx nx g @aws/nx-plugin:ts#nx-generator --pluginProject=your-plugin --dry-run

이렇게 하면 플러그인에 새로운 생성기가 추가됩니다.

팁

생성기 구현 방법에 대한 자세한 내용은 ts#nx-generator 가이드를 참조하세요.

MCP 서버의 generator-guide 도구에서 사용되므로 생성기에 대한 상세한 README.md 작성을 권장합니다.

프로젝트 대상

생성된 플러그인에는 다음과 같은 주요 대상이 포함됩니다:

빌드 대상

TypeScript 코드를 컴파일하고 플러그인 사용 준비:

pnpm

pnpm nx build your-plugin

yarn

yarn nx build your-plugin

npm

npx nx build your-plugin

bun

bunx nx build your-plugin

패키징 대상

NPM 배포 준비가 된 패키지 생성:

pnpm

pnpm nx package your-plugin

yarn

yarn nx package your-plugin

npm

npx nx package your-plugin

bun

bunx nx package your-plugin

패키징 대상에는 다음 자산이 포함됩니다:

• 컴파일된 JavaScript 파일
• TypeScript 선언 파일
• 생성기 및 실행기 설정 파일
• 문서 및 라이선스 파일

MCP 서버 통합

플러그인은 ts#mcp-server 생성기를 사용하여 MCP 서버를 설정합니다.

도구

플러그인에는 AI 어시스턴트에게 다음 도구를 제공하는 완전한 MCP 서버가 포함됩니다:

• general-guidance: Nx 및 플러그인 작업을 위한 모범 사례 제공
• create-workspace-command: 플러그인 사용 가능한 새 작업공간 생성 방법 안내
• list-generators: 플러그인에서 사용 가능한 모든 생성기 목록 표시
• generator-guide: 스키마 및 사용법을 포함한 특정 생성기 상세 정보 제공

AI 어시스턴트와 연동 설정

설정 파일

MCP를 지원하는 대부분의 AI 어시스턴트는 유사한 구성 방식을 사용합니다. MCP 서버 세부 정보가 포함된 설정 파일을 생성하거나 업데이트해야 합니다:

{
  "mcpServers": {
    "your-mcp-server": {
      "command": "npx",
      "args": ["tsx", "/path/to/your-mcp-server/index.ts"]
    }
  }
}

주의

서버 연결 시 ENOENT npx와 같은 오류가 발생하면 터미널에서 which npx를 실행해 얻을 수 있는 npx의 전체 경로를 지정해야 할 수 있습니다.

핫 리로드

MCP 서버를 개발하는 동안 --watch 플래그를 구성하면 AI 어시스턴트가 항상 최신 버전의 도구/리소스를 인식합니다:

{
  "mcpServers": {
    "your-mcp-server": {
      "command": "npx",
      "args": ["tsx", "--watch", "/path/to/your-mcp-server/index.ts"]
    }
  }
}

참고

새 도구나 리소스를 추가한 경우 AI 어시스턴트에서 MCP 서버를 새로고침해야 할 수 있습니다.

어시스턴트별 구성

특정 AI 어시스턴트와 MCP를 구성하려면 다음 문서를 참조하세요:

• Amazon Q Developer
• Cline
• Cursor
• Claude Code
• Roo Code

팁

Amazon Q Developer와 같은 일부 AI 어시스턴트는 특정 프로젝트와 관련된 MCP 서버를 정의할 때 특히 유용한 워크스페이스 수준의 MCP 서버 구성을 지정할 수 있습니다.

MCP 서버 커스터마이징

server.ts 파일을 수정하여 플러그인 도메인에 특화된 추가 도구나 리소스를 확장할 수 있습니다.

MCP 서버 개발에 대한 상세 내용은 ts#mcp-server 가이드를 참조하세요.

플러그인 배포

배포 준비

1. 패키지 정보 업데이트: 플러그인의 package.json에 올바른 이름, 버전, 설명, 저장소 정보 입력

2. 패키지 빌드:

   pnpm

   pnpm nx package your-plugin

   yarn

   yarn nx package your-plugin

   npm

   npx nx package your-plugin

   bun

   bunx nx package your-plugin

3. 로컬 테스트: 다른 작업공간에 플러그인을 설치하여 테스트 가능:

   npm install /path/to/your/workspace/dist/your-plugin/package

NPM 배포

플러그인 준비 완료 시:

cd dist/your-plugin/package
npm publish

배포된 플러그인 사용

배포 후 다른 사용자가 플러그인 설치 및 사용 가능:

pnpm

pnpm add -w your-plugin-name

yarn

yarn add your-plugin-name

npm

npm install --legacy-peer-deps your-plugin-name

bun

bun install your-plugin-name

생성기 사용 방법:

VSCode

1. 설치 Nx Console VSCode Plugin 아직 설치하지 않았다면
2. VSCode에서 Nx 콘솔 열기
3. 클릭 Generate (UI) "Common Nx Commands" 섹션에서
4. 검색 your-plugin-name - your-generator-name
5. 필수 매개변수 입력
6. 클릭 Generate

CLI

pnpm

pnpm nx g your-plugin-name:your-generator-name

yarn

yarn nx g your-plugin-name:your-generator-name

npm

npx nx g your-plugin-name:your-generator-name

bun

bunx nx g your-plugin-name:your-generator-name

어떤 파일이 변경될지 확인하기 위해 드라이 런을 수행할 수도 있습니다

pnpm

pnpm nx g your-plugin-name:your-generator-name --dry-run

yarn

yarn nx g your-plugin-name:your-generator-name --dry-run

npm

npx nx g your-plugin-name:your-generator-name --dry-run

bun

bunx nx g your-plugin-name:your-generator-name --dry-run

배포된 플러그인으로 AI 어시스턴트 설정

배포된 플러그인의 MCP 서버는 다음과 같이 설정할 수 있습니다:

{
  "mcpServers": {
    "aws-nx-mcp": {
      "command": "npx",
      "args": ["-y", "-p", "your-plugin-name", "your-plugin-name-mcp-server"]
    }
  }
}