튜토리얼: 컴포저블 PDK 블루프린트로 풀스택 애플리케이션 만들기 - 아마존 CodeCatalyst

기계 번역으로 제공되는 번역입니다. 제공된 번역과 원본 영어의 내용이 상충하는 경우에는 영어 버전이 우선합니다.

튜토리얼: 컴포저블 PDK 블루프린트로 풀스택 애플리케이션 만들기

CodeCatalyst Amazon은 프로젝트를 빠르게 시작하는 데 도움이 되는 다양한 청사진을 제공합니다. 블루프린트로 만든 프로젝트에는 소스 리포지토리, 샘플 소스 코드, CI/CD 워크플로, 빌드 및 테스트 보고서, 통합 문제 추적 도구 등 필요한 리소스가 포함됩니다. 하지만 가끔은 프로젝트를 점진적으로 구축하거나 블루프린트로 만든 기존 프로젝트에 기능을 추가하고 싶을 수도 있습니다. 블루프린트로 이 작업을 수행할 수도 있습니다. 이 튜토리얼에서는 토대를 마련하고 모든 프로젝트 코드를 단일 리포지토리에 저장할 수 있는 단일 블루프린트로 시작하는 방법을 보여줍니다. 이제 편의에 따라 초기 청사진 위에 다른 청사진을 추가하여 추가 리소스와 인프라를 유연하게 통합할 수 있습니다. 이 빌딩 블록 방법을 통해 여러 프로젝트의 특정 요구 사항을 해결할 수 있습니다.

이 자습서에서는 여러 AWS 프로젝트 개발 키트 (AWS PDK) 청사진을 함께 작성하여 React 웹 사이트, Smithy API 및 AWS에 배포할 지원 CDK 인프라로 구성된 애플리케이션을 만드는 방법을 보여줍니다. AWS PDK는 프로젝트를 관리하고 구축하기 위한 개발 도구와 함께 공통 패턴을 위한 구성 요소를 제공합니다. 자세한 내용은 AWS PDK GitHub 소스 리포지토리를 참조하십시오.

다음 PDK 블루프린트는 구성 가능한 방식으로 애플리케이션을 구축하는 데 서로 함께 사용할 수 있도록 설계되었습니다.

  • Monorepo - 모노레포 내 프로젝트 간의 상호 종속성을 관리하는 루트 수준 프로젝트를 만듭니다. 이 프로젝트는 빌드 캐싱과 종속성 시각화도 제공합니다.

  • 유형 안전 API - Smithy 또는 OpenAPI v3에서 정의할 수 있는 API를 생성하고, 유형 안전 방식으로 API를 구현하고 상호 작용할 수 있도록 빌드 타임 코드 생성을 관리합니다. API Gateway에 대한 API 배포를 관리하고 자동 입력 검증을 구성하는 CDK 구조를 제공합니다.

  • Cloudscape React 웹 사이트 - Cognito Auth 및 생성된 API (선택 사항) 와 사전 통합되어 제공되는 Cloudscape를 사용하여 구축된 React 기반 웹 사이트를 생성합니다. 이 웹 사이트는 API를 안전하게 호출할 수 있는 기능을 제공합니다.

  • 인프라 - 애플리케이션을 배포하는 데 필요한 모든 CDK 관련 인프라를 설정하는 프로젝트를 생성합니다. 또한 빌드할 때마다 CDK 코드를 기반으로 다이어그램을 생성하도록 사전 구성되어 제공됩니다.

  • DevOps— AWS 프로젝트 개발 키트 (AWS PDK) 에 있는 구문과 호환되는 DevOps 워크플로를 생성합니다.

이 자습서에는 배포된 애플리케이션을 보고, 다른 사용자를 초대하여 작업하도록 하고, pull 요청이 병합되면 연결된 AWS 계정의 리소스에 자동으로 빌드되어 배포되는 pull 요청을 사용하여 코드를 변경하는 방법에 대한 단계도 포함되어 있습니다.

PDK 블루프린트로 구성된 프로젝트를 생성하면 프로젝트에 다음 리소스가 포함된 프로젝트가 생성됩니다. CodeCatalyst

  • 모노레포로 구성된 소스 리포지토리.

  • 정적 코드 분석 및 라이선스 검사를 실행하고 기본 브랜치가 변경될 때마다 샘플 코드를 빌드 및 배포하는 워크플로입니다. 코드를 변경할 때마다 아키텍처 다이어그램이 생성됩니다.

  • 작업을 계획하고 추적하는 데 사용할 수 있는 이슈 보드 및 백로그입니다.

  • 자동 보고서가 포함된 테스트 보고서 세트입니다.

사전 조건 

프로젝트를 만들고 업데이트하려면 다음과 설정 및 로그인 CodeCatalyst 같은 작업을 완료해야 합니다.

1단계: 모노레포 프로젝트 생성

먼저 PDK - Monorepo 블루프린트로 시작하여 추가 PDK 블루프린트를 추가할 수 있는 기반 역할을 하는 모노레포 코드베이스를 만드세요.

PDK를 사용하여 프로젝트를 만들려면 - 모노레포 블루프린트

  1. https://codecatalyst.aws/ 에서 콘솔을 엽니다. CodeCatalyst

  2. CodeCatalyst 콘솔에서 프로젝트를 만들려는 스페이스로 이동합니다.

  3. 스페이스 대시보드에서 프로젝트 생성을 선택합니다.

  4. '블루프린트로 시작하기'를 선택합니다.

  5. PDK - Monorepo 블루프린트를 선택한 후 다음을 선택합니다.

  6. 프로젝트 이름 지정에 프로젝트에 할당하려는 이름과 관련 리소스 이름을 입력합니다. 이름은 스페이스 내에서 고유해야 합니다.

  7. 프로젝트 리소스에서 다음을 수행하십시오.

    1. 기본 프로그래밍 언어에서 프로젝트 코드를 개발하는 데 사용할 언어를 선택합니다. Java 또는 Python 중에서 TypeScript 선택할 수 있습니다.

    2. [코드 구성] 을 선택합니다.

    3. 소스 리포지토리 텍스트 입력 필드에 새 리포지토리를 생성할 소스 리포지토리의 이름을 입력하거나 기존 링크된 리포지토리에서 선택합니다. 기존 저장소는 비어 있어야 합니다. 자세한 정보는 소스 리포지토리 연결을 참조하세요.

    4. (선택 사항) Package Manager 드롭다운 메뉴에서 패키지 관리자를 선택합니다. 이는 기본 프로그래밍 언어로 선택한 TypeScript 경우에만 필요합니다.

  8. (선택 사항) 선택한 프로젝트 매개 변수에 따라 생성될 코드를 미리 보려면 프로젝트 미리 보기 생성에서 코드 보기를 선택합니다.

  9. (선택 사항) 블루프린트 카드에서 세부 정보 보기를 선택하면 블루프린트의 아키텍처 개요, 필요한 연결 및 권한, 블루프린트가 생성하는 리소스 종류 등 블루프린트에 대한 구체적인 세부 정보를 볼 수 있습니다.

  10. 프로젝트 생성을 선택하여 모노레포 프로젝트를 생성합니다. 생성된 루트 레벨 프로젝트는 모노레포 내 프로젝트 간의 상호 종속성을 관리하고 빌드 캐싱 및 종속성 관리를 제공합니다.

    프로젝트 블루프린트에 대한 자세한 내용은 을 참조하십시오. CodeCatalyst 청사진이 포함된 포괄적인 프로젝트 만들기

PDK - Monorepo 블루프린트는 프로젝트의 토대를 만들 뿐입니다. 블루프린트를 사용하여 실행 가능한 애플리케이션을 만들려면 Type Safe API, Cloudscape React 웹사이트, 인프라 등과 같은 다른 PDK 블루프린트를 추가해야 합니다. DevOps 다음 단계에서는 프로젝트에 Type Safe API를 추가할 것입니다.

2단계: 프로젝트에 타입 세이프 API 추가

PDK - 타입 세이프 API 블루프린트를 사용하면 Smithy 또는 OpenAI v3를 사용하여 API를 정의할 수 있습니다. API 정의에서 런타임 패키지를 생성하는데, 여기에는 API와 상호작용하는 클라이언트와 API 구현을 위한 서버 측 코드가 포함됩니다. 또한 블루프린트는 모든 API 작업에 대해 형식 안전성을 갖춘 CDK 구문을 생성합니다. 기존 PDK monorepo 프로젝트에 블루프린트를 추가하여 프로젝트에 API 기능을 추가할 수 있습니다.

PDK를 추가하려면 - 세이프 API 블루프린트를 입력하세요.

  1. 모노레포 프로젝트의 탐색 패널에서 블루프린트를 선택한 다음 블루프린트 추가를 선택합니다.

  2. PDK - Type Safe API 블루프린트를 선택하고 다음을 선택합니다.

  3. 블루프린트 구성에서 블루프린트 파라미터를 구성합니다.

    • 모델 언어에서 API 모델이 정의되는 언어를 선택합니다.

    • 네임스페이스 텍스트 입력 필드에 API의 네임스페이스를 입력합니다.

    • API 이름 텍스트 입력 필드에 API 이름을 입력합니다.

    • CDK 언어에서 API를 배포할 CDK 인프라를 작성하는 데 사용할 선호 언어를 선택합니다.

    • 핸들러 언어 드롭다운 메뉴를 선택한 다음 API 작업에 사용할 핸들러를 구현하려는 언어를 선택합니다.

    • 문서 형식 드롭다운 메뉴를 선택한 다음 API 설명서 생성에 사용할 형식을 선택합니다.

  4. 코드 변경 탭에서 제안된 변경 사항을 검토하십시오. 풀 리퀘스트에 표시된 차이는 풀 리퀘스트가 생성된 시점의 프로젝트 변경 내용을 보여줍니다.

  5. 블루프린트 적용 시 제안된 변경 사항이 만족스러우면 블루프린트 추가를 선택합니다.

    풀 리퀘스트를 생성한 후 코멘트를 추가할 수 있습니다. 풀 리퀘스트나 파일의 개별 라인, 전체 풀 리퀘스트에 댓글을 추가할 수 있습니다. @기호와 파일 이름을 차례로 사용하여 파일 등의 리소스에 링크를 추가할 수 있습니다.

    참고

    풀 리퀘스트가 승인되고 병합되기 전까지는 블루프린트가 적용되지 않습니다. 자세한 내용은 풀 리퀘스트 검토풀 리퀘스트 병합 섹션을 참조하세요.

  6. 상태 열에서 PDK에 대해 Pending pull request - Safe API 블루프린트 행을 입력한 다음, 공개 풀 요청의 링크를 선택합니다.

  7. 병합을 선택하고 선호하는 병합 전략을 선택한 다음 병합을 선택하여 적용된 블루프린트의 변경 사항을 통합합니다.

    풀 리퀘스트가 병합되면 구성된 Type Safe API의 API 관련 소스 코드가 모두 들어 있는 monorepo 프로젝트 내에 새 packages/apis/mypdkapi 폴더가 생성됩니다.

  8. 탐색 창에서 블루프린트를 선택하여 PDK - Type Safe API의 상태가 최신으로 표시되는지 확인합니다.

3단계: 프로젝트에 클라우드스케이프 React 웹 사이트 추가

PDK - 클라우드스케이프 리액트 웹사이트 블루프린트는 웹사이트를 생성합니다. 선택적 매개변수 (Type Safe API) 를 연결하여 다양한 API를 테스트하기 위한 대화형 API 탐색기와 함께 인증된 유형의 안전 클라이언트를 설정하도록 웹사이트를 자동으로 구성할 수 있습니다.

PDK 추가하기 - 클라우드스케이프 리액트 웹사이트 블루프린트

  1. 모노레포 프로젝트의 탐색 창에서 블루프린트를 선택한 다음 블루프린트 추가를 선택합니다.

  2. PDK - Cloudscape React 웹사이트 블루프린트를 선택한 후 다음을 선택합니다.

  3. 블루프린트 구성에서 블루프린트 매개변수를 구성합니다.

    • 웹사이트 이름 텍스트 입력 필드에 웹사이트 이름을 입력합니다.

    • Type Safe API 드롭다운 메뉴를 선택한 다음 웹사이트에 통합하려는 API 블루프린트를 선택합니다. API를 전달하면 인증된 클라이언트가 설정되고 필요한 종속성, API 탐색기 및 기타 기능이 추가됩니다.

  4. 코드 변경 탭에서 제안된 변경 사항을 검토하십시오. 풀 리퀘스트에 표시된 차이는 풀 리퀘스트가 생성된 시점의 프로젝트 변경 내용을 보여줍니다.

  5. 블루프린트 적용 시 제안된 변경 사항이 만족스러우면 블루프린트 추가를 선택합니다.

    풀 리퀘스트를 생성한 후 코멘트를 추가할 수 있습니다. 풀 리퀘스트나 파일의 개별 라인, 전체 풀 리퀘스트에 댓글을 추가할 수 있습니다. @기호와 파일 이름을 차례로 사용하여 파일 등의 리소스에 링크를 추가할 수 있습니다.

    참고

    풀 리퀘스트가 승인되고 병합되기 전까지는 블루프린트가 적용되지 않습니다. 자세한 내용은 풀 리퀘스트 검토풀 리퀘스트 병합 섹션을 참조하세요.

  6. 상태 열에서 PDK - Cloudscape React 웹 사이트 블루프린트 행에 대해 대기 중인 풀 리퀘스트를 선택한 다음, 열려 있는 풀 리퀘스트의 링크를 선택합니다.

  7. 병합을 선택하고 선호하는 병합 전략을 선택한 다음 병합을 선택하여 적용된 블루프린트의 변경 사항을 통합합니다.

    풀 리퀘스트가 병합되면 monorepo 프로젝트 내에 새 웹사이트의 모든 소스 코드가 들어 있는 새 packages/websites/my-website-name 폴더가 생성됩니다.

  8. 탐색 창에서 블루프린트를 선택하여 PDK - Cloudscape React 웹 사이트의 상태가 최신으로 표시되는지 확인합니다.

다음으로 PDK - 인프라 청사진을 추가하여 웹 사이트를 AWS 클라우드에 배포하기 위한 인프라를 생성합니다.

4단계: 애플리케이션을 AWS 클라우드에 배포하기 위한 인프라 생성

PDK - 인프라 블루프린트는 모든 CDK 코드가 포함된 패키지를 설정하여 웹 사이트와 API를 배포합니다. 또한 기본적으로 다이어그램을 생성하고 프로토타이핑 백 팩을 준수할 수 있습니다.

PDK 추가하기 - 인프라 청사진

  1. 모노레포 프로젝트의 탐색 창에서 블루프린트를 선택한 다음 블루프린트 추가를 선택합니다.

  2. PDK - 인프라 블루프린트를 선택한 후 다음을 선택합니다.

  3. 블루프린트 구성에서 블루프린트 매개변수를 구성합니다.

    • CDK 언어에서 인프라 개발에 사용할 언어를 선택합니다.

    • 스택 이름 텍스트 입력 필드에 블루프린트용으로 생성된 CloudFormation 스택의 이름을 입력합니다.

      참고

      DevOps 워크플로를 설정하는 다음 단계를 위해 이 스택 이름을 메모해 두세요.

    • Type Safe API 드롭다운 메뉴를 선택한 다음 웹 사이트에 통합하려는 API 블루프린트를 선택합니다.

    • Cloudscape React TS 웹 사이트 드롭다운 메뉴를 선택한 다음 인프라 내에 배포하려는 웹 사이트 블루프린트 (예: PDK - Cloudscape React 웹 사이트) 를 선택합니다.

  4. 코드 변경 탭에서 제안된 변경 사항을 검토하세요. 풀 리퀘스트에 표시된 차이는 풀 리퀘스트가 생성된 시점의 프로젝트 변경 내용을 보여줍니다.

  5. 블루프린트 적용 시 제안된 변경 사항이 만족스러우면 블루프린트 추가를 선택합니다.

    풀 리퀘스트를 생성한 후 코멘트를 추가할 수 있습니다. 풀 리퀘스트나 파일의 개별 라인, 전체 풀 리퀘스트에 댓글을 추가할 수 있습니다. @기호와 파일 이름을 차례로 사용하여 파일 등의 리소스에 링크를 추가할 수 있습니다.

    참고

    풀 리퀘스트가 승인되고 병합되기 전까지는 블루프린트가 적용되지 않습니다. 자세한 내용은 풀 리퀘스트 검토풀 리퀘스트 병합 섹션을 참조하세요.

  6. 상태 열에서 PDK - 인프라 블루프린트 행의 Pending pull request를 선택한 다음, 열려 있는 풀 리퀘스트의 링크를 선택합니다.

  7. 병합을 선택하고 선호하는 병합 전략을 선택한 다음 병합을 선택하여 적용된 청사진의 변경 사항을 통합합니다.

    풀 리퀘스트가 병합되면 monorepo 프로젝트 내에 새 packages/infra 폴더가 생성되며, 이 폴더에는 프로젝트를 AWS 클라우드에 배포할 인프라가 포함되어 있습니다.

  8. 탐색 창에서 블루프린트를 선택하여 PDK - 인프라 상태가 최신으로 표시되는지 확인합니다.

다음으로 PDK - DevOps 블루프린트를 추가하여 애플리케이션을 배포해 보겠습니다.

5단계: 프로젝트를 배포하기 위한 DevOps 워크플로를 설정합니다.

PDK - DevOps blueprint는 구성에 지정된 AWS 계정 및 역할을 사용하여 프로젝트를 빌드하고 배포하는 데 필요한 DevOps 워크플로를 생성합니다.

PDK 추가하기 - 블루프린트 DevOps

  1. 모노레포 프로젝트의 탐색 창에서 블루프린트를 선택한 다음 블루프린트 추가를 선택합니다.

  2. PDK - DevOps 블루프린트를 선택한 후 다음을 선택합니다.

  3. 블루프린트 구성에서 블루프린트 파라미터를 구성합니다.

    • 현재 환경에서 부트스트랩 CDK를 선택합니다.

    • 스택 이름 텍스트 입력 필드에 배포하려는 CloudFormation 스택의 이름을 입력합니다. 이 이름은 PDK - 인프라 4단계: 애플리케이션을 AWS 클라우드에 배포하기 위한 인프라 생성 블루프린트에 구성된 스택 이름과 일치해야 합니다.

    • AWS 계정 연결 드롭다운 메뉴를 선택한 다음 리소스로 사용할 AWS 계정을 선택합니다. 자세한 정보는 AWS 계정 스페이스에 추가을 참조하세요.

    • 애플리케이션 배포에 사용할 역할 드롭다운 메뉴를 선택한 다음 프로젝트 애플리케이션을 배포하는 데 사용할 IAM 역할을 선택합니다.

      참고

      IAM 역할을 생성할 때는 프로젝트 설정에 있는 현재 SourceArn ProjectID 역할로 제한하십시오. 자세한 정보는 CodeCatalystWorkflowDevelopmentRole-spaceName서비스 역할 이해을 참조하세요.

    • 지역 드롭다운 메뉴를 선택한 다음 monorepo 프로젝트를 배포할 지역을 선택합니다. 배포는 필수 AWS 서비스가 있는 지역에서만 가능합니다. 자세한 내용은 지역별 AWS 서비스를 참조하십시오.

  4. 코드 변경 탭에서 제안된 변경 사항을 검토하십시오. 풀 리퀘스트에 표시된 차이는 풀 리퀘스트가 생성된 시점의 프로젝트 변경 내용을 보여줍니다.

  5. 블루프린트 적용 시 제안된 변경 사항이 만족스러우면 블루프린트 추가를 선택합니다.

    풀 리퀘스트를 생성한 후 코멘트를 추가할 수 있습니다. 풀 리퀘스트나 파일의 개별 라인, 전체 풀 리퀘스트에 댓글을 추가할 수 있습니다. @기호와 파일 이름을 차례로 사용하여 파일 등의 리소스에 링크를 추가할 수 있습니다.

    참고

    풀 리퀘스트가 승인되고 병합되기 전까지는 블루프린트가 적용되지 않습니다. 자세한 내용은 풀 리퀘스트 검토풀 리퀘스트 병합 섹션을 참조하세요.

  6. 상태 열에서 PDK - 인프라 블루프린트 행의 Pending pull request를 선택한 다음, 열려 있는 풀 리퀘스트의 링크를 선택합니다.

  7. 병합을 선택하고 선호하는 병합 전략을 선택한 다음 병합을 선택하여 적용된 청사진의 변경 사항을 통합합니다.

    풀 리퀘스트가 병합되면 모노레포 프로젝트 내에 새 .codecatalyst/workflows 폴더가 생성됩니다.

  8. 탐색 창에서 블루프린트를 선택하여 PDK 상태가 최신으로 표시되는지 확인합니다. DevOps

참고

PDK - DevOps 블루프린트와 PDK 블루프린트에 대한 모든 후속 변경 사항은 이 시점부터 상당히 느려질 것입니다. 향후 빌드와 배포를 반복할 수 있도록 백그라운드에서 잠금 파일이 생성되기 때문입니다. 지원되는 모든 언어의 모든 패키지에 대한 잠금 파일이 생성됩니다.

6단계: 출시 워크플로 확인 및 웹 사이트 보기

이전 단계를 완료했으면 릴리스 워크플로를 확인하여 프로젝트가 빌드되고 있는지 확인할 수 있습니다.

출시 워크플로를 확인하고 웹사이트를 보려면

  1. monorepo 프로젝트의 탐색 창에서 CI/CD를 선택한 다음 워크플로를 선택합니다.

  2. 릴리스 워크플로의 경우 최신 워크플로 실행을 선택하여 세부 정보를 확인하세요. 자세한 정보는 단일 실행의 상태 및 세부 정보 보기을 참조하세요.

  3. 워크플로 실행이 성공적으로 완료되면 워크플로의 마지막 작업 (예: eta-ap-souteastDeploy-B-2) 을 선택한 다음 변수를 선택합니다.

    PDK 블루프린트 워크플로.
  4. 변수 테이블에 있는 링크 (예: MyPDKAPI websiteDistributionDomain NameXxxxx) 를 복사하여 새 브라우저 창에 붙여넣으면 배포된 웹 사이트를 볼 수 있습니다.

    워크플로 작업의 변수 테이블.

    웹사이트에 로그인하려면 Amazon Cognito 계정이 필요합니다. 기본적으로 사용자 풀은 자체 등록을 허용하도록 설정되지 않습니다.

    1. AWS Cognito 콘솔로 이동합니다.

    2. 사용자 풀 테이블에서 PDK로 생성한 사용자 풀과 일치하는 사용자 풀 이름을 선택합니다. 이 DevOps 블루프린트는 변수 테이블에서 찾을 수 있습니다 (예: 인프라 계산: XXXXX). betaUserIdentityinfra betaUserIdentity IdentityPoolId 자세한 내용은 사용자 풀 시작하기를 참조하십시오.

      PDK로 만든 사용자 풀 - DevOps 블루프린트.
    3. 사용자 생성을 선택합니다.

    4. 사용자 정보 매개변수 구성:

      • 초대 메시지에서 이메일 초대 보내기를 선택합니다.

      • 사용자 이름 텍스트 입력 필드에 사용자 이름을 입력합니다.

      • 이메일 주소 텍스트 입력 필드에 사용자 이름을 입력합니다.

      • 임시 비밀번호에서 비밀번호 생성을 선택합니다.

    5. 사용자 생성을 선택합니다.

    6. 사용자 정보 매개변수로 입력한 이메일 계정으로 이동하여 임시 비밀번호가 포함된 이메일을 엽니다. 비밀번호를 기록해 두십시오.

    7. 배포된 웹사이트로 돌아가서 생성한 사용자 이름과 받은 임시 비밀번호를 입력한 다음 로그인을 선택합니다.

  5. (선택 사항) 워크플로 실행이 성공적으로 완료된 후 생성된 다이어그램을 볼 수도 있습니다. 에서 CodeCatalyst아티팩트 탭을 선택하고 다이어그램 행에서 다운로드를 선택한 다음 다운로드한 파일을 엽니다.

    워크플로를 위한 아티팩트 탭.
    PDK 블루프린트로 생성된 다이어그램.