튜토리얼: 모던 3계층 웹 애플리케이션 블루프린트로 프로젝트 생성

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

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

프로젝트 만들기를 선택합니다.

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

검색 창에 modern를 입력합니다.

모던 3티어 웹 애플리케이션 블루프린트를 선택한 후 다음을 선택합니다.

프로젝트 이름에 프로젝트 이름을 입력합니다. 예:

MyExampleProject.

계정에서 가입 시 추가한 AWS 계정 이름을 선택합니다. 블루프린트는 이 계정에 리소스를 설치합니다.

배포 역할에서 가입 시 추가한 역할을 선택합니다. 예를 들어 CodeCatalystWorkflowDevelopmentRole-spaceName를 선택합니다.

목록에 역할이 없는 경우 추가하세요. 역할을 추가하려면 Add IAM role (IAM role) 을 선택하고 역할을 자신의 AWS 계정역할에 추가합니다. 자세한 정보는 연결된 AWS 리소스에 대한 액세스 허용 AWS 계정을 참조하세요.

컴퓨팅 플랫폼에서 Lambda를 선택합니다.

프런트엔드 호스팅 옵션에서 Amplify 호스팅을 선택합니다. 에 대한 자세한 내용은 AWS Amplify호스팅이란 AWS Amplify 무엇입니까? 를 참조하십시오. AWS Amplify 사용 설명서에서

배포 지역에 Mysfits 애플리케이션 및 지원 AWS 리전 리소스를 배포하기 위한 블루프린트를 구축할 지역의 지역 코드를 입력합니다. 지역 코드 목록은 의 지역 엔드포인트를 참조하십시오. AWS 일반 참조

애플리케이션 이름에서 기본값을 로 유지합니다. mysfitsstring

(선택 사항) 프로젝트 미리 보기 생성에서 코드 보기를 선택하여 블루프린트가 설치할 소스 파일을 미리 봅니다. 워크플로우 보기를 선택하면 블루프린트가 설치할 CI/CD 워크플로 정의 파일을 미리 볼 수 있습니다. 미리보기는 선택에 따라 동적으로 업데이트됩니다.

프로젝트 만들기를 선택합니다.

사용자를 초대하려는 프로젝트로 이동합니다.

탐색 창에서 프로젝트 설정을 선택합니다.

멤버 탭에서 초대를 선택합니다.

프로젝트 사용자로 초대하려는 사람들의 이메일 주소를 입력합니다. 이메일 주소를 공백이나 쉼표로 구분하여 여러 개 입력할 수 있습니다. 프로젝트 구성원이 아닌 스페이스 구성원 중에서 선택할 수도 있습니다.

사용자의 역할을 선택합니다.

사용자 추가를 마치면 초대를 선택합니다.

탐색 창에서 이슈를 선택합니다.

이슈 생성을 선택합니다.

이슈 제목에 이슈의 이름을 입력합니다. 문제에 대한 설명을 제공할 수도 있습니다. 이 예시에서는 다음을 사용합니다. make a change in the src/mysfit_data.json file.

우선순위, 추정치, 상태, 라벨을 선택합니다. 담당자 아래에서 +Add me를 선택하여 자신에게 문제를 할당하세요.

이슈 생성을 선택합니다. 이제 게시판에 이슈가 표시됩니다. 카드를 선택하여 이슈를 진행 중 열로 이동합니다.

프로젝트로 이동하여 다음 중 하나를 수행하십시오.

• 프로젝트 요약 페이지의 목록에서 원하는 리포지토리를 선택한 다음 리포지토리 보기를 선택합니다.

• 탐색 창에서 코드를 선택한 다음 소스 리포지토리를 선택합니다. 소스 리포지토리의 목록에서 리포지토리 이름을 선택합니다. 필터 막대에 리포지토리 이름의 일부를 입력하여 리포지토리 목록을 필터링할 수 있습니다.

리포지토리 홈 페이지에서 리포지토리의 콘텐츠와 관련 리소스에 대한 정보 (예: pull request 및 워크플로 수) 를 볼 수 있습니다. 기본적으로 기본 브랜치의 콘텐츠가 표시됩니다. 드롭다운 목록에서 다른 브랜치를 선택하여 보기를 변경할 수 있습니다.

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

개발 환경을 생성하려는 스페이스로 이동합니다.

프로젝트의 소스 리포지토리 목록에서 리포지토리 이름을 선택합니다. 또는 탐색 창에서 코드를 선택하고 소스 리포지토리를 선택한 다음 개발 환경을 만들려는 리포지토리를 선택합니다.

리포지토리 홈 페이지에서 개발 환경 생성을 선택합니다.

드롭다운 메뉴에서 지원되는 IDE를 선택합니다. 자세한 정보는 Dev Environments에 지원되는 통합 개발 환경을 참조하세요.

복제할 리포지토리를 선택하고, 새 브랜치에서 작업을 선택하고, 브랜치 이름 필드에 브랜치 이름을 입력하고, 다음에서 브랜치 생성 드롭다운 메뉴에서 새 브랜치를 만들 브랜치를 선택합니다.

원하는 경우 개발 환경의 별칭을 추가할 수 있습니다.

선택적으로 개발 환경 구성 편집 버튼을 선택하여 개발 환경의 컴퓨팅, 스토리지 또는 제한 시간 구성을 편집합니다.

생성을 선택합니다. 개발 환경이 생성되는 동안 개발 환경 상태 열에 시작 중이 표시되고, 개발 환경이 생성되면 상태 열에 실행 중이 표시됩니다. 선택한 IDE의 개발 환경과 함께 새 탭이 열립니다. 코드를 편집하고 변경 내용을 커밋 및 푸시할 수 있습니다.

프로젝트 개발 환경으로 이동합니다. 에서 AWS Cloud9측면 탐색 메뉴를 확장하여 파일을 찾아보십시오. 펼치고 mysfitssrc, 엽니다src/mysfit_data.json.

파일에서 "Age": 필드 값을 6에서 12로 변경합니다. 줄은 다음과 같아야 합니다.

    {
        "Age": 12,
        "Description": "Twilight's personality sparkles like the night sky and is looking for a forever home with a Greek hero or God. While on the smaller side at 14 hands, he is quite adept at accepting riders and can fly to 15,000 feet. Twilight needs a large area to run around in and will need to be registered with the FAA if you plan to fly him above 500 feet. His favorite activities include playing with chimeras, going on epic adventures into battle, and playing with a large inflatable ball around the paddock. If you bring him home, he'll quickly become your favorite little Pegasus.",
        "GoodEvil": "Good",
        "LawChaos": "Lawful",
        "Name": "Twilight Glitter",
        "ProfileImageUri": "https://www.mythicalmysfits.com/images/pegasus_hover.png",
        "Species": "Pegasus",
        "ThumbImageUri": "https://www.mythicalmysfits.com/images/pegasus_thumb.png"
    },

파일을 저장합니다.

명령을 사용하여 mysfits 저장소로 변경합니다. cd /projects/mysfits

git add, git commit, git push 명령을 사용하여 변경 내용을 추가하고 커밋하고 푸시할 수 있습니다.

git add .
git commit -m "make an example change"
git push

CodeCatalyst 콘솔의 탐색 창에서 CI/CD를 선택한 다음 워크플로를 선택합니다.

워크플로 목록이 나타납니다. 다음은 프로젝트를 만들 때 CodeCatalyst 블루프린트가 생성하고 시작한 워크플로입니다.

워크플로 목록을 살펴보세요. 다음 네 가지가 보일 것입니다.

하단에서 main 브랜치와 관련된 ApplicationDeploymentPipeline워크플로를 선택합니다. 이 워크플로는 main 브랜치의 소스 코드를 사용하여 실행되었습니다.

워크플로 다이어그램이 나타납니다. 다이어그램에는 각각 작업 또는 작업을 나타내는 여러 블록이 나와 있습니다. 대부분의 액션은 세로로 정렬되며 맨 위에 있는 액션이 아래 액션보다 먼저 정렬됩니다. 나란히 정렬된 액션은 병렬로 실행됩니다. 함께 그룹화된 액션이 모두 성공적으로 실행되어야 아래 액션을 시작할 수 있습니다.

기본 블록은 다음과 같습니다.

정의 탭 (상단 근처) 을 선택합니다. 워크플로우 정의 파일이 오른쪽에 나타납니다. 이 파일에는 다음과 같은 주목할 만한 섹션이 있습니다.

상단 근처의 최신 상태 탭을 선택하고 워크플로 다이어그램에서 원하는 작업을 선택합니다.

오른쪽에서 구성 탭을 선택하면 최근 실행 중에 작업에 사용된 구성 설정을 볼 수 있습니다. 각 구성 설정에는 워크플로 정의 파일에 일치하는 속성이 있습니다.

콘솔을 열어 두고 다음 절차로 이동합니다.

최신 상태 탭을 선택합니다.

워크플로 다이어그램에서 DeployFrontend작업을 선택합니다.

작업이 완료될 때까지 기다리십시오. “진행 중” 아이콘 ( ) 이 “성공” 아이콘 ( ) 으로 바뀌는지 확인하십시오.

build_backend 작업을 선택합니다.

Logs 탭을 선택하고 두 개의 섹션을 펼쳐 이 단계에 대한 로그 메시지를 확인하세요. 백엔드 설정과 관련된 메시지를 볼 수 있습니다.

보고서 탭을 선택한 다음 backend-coverage.xml 보고서를 선택합니다. CodeCatalyst 관련 보고서를 표시합니다. 보고서에는 실행된 코드 커버리지 테스트가 표시되며 테스트를 통해 성공적으로 검증된 코드 행의 비율 (예: 80%) 이 표시됩니다.

테스트 보고서에 대한 자세한 내용은 을 참조하십시오. 워크플로를 사용한 테스트

CodeCatalyst 콘솔을 열어 두고 다음 절차로 이동합니다.

ApplicationDeploymentPipeline워크플로로 돌아가서 최근 실행의 Run- string 링크를 선택합니다.

워크플로 다이어그램에서 DeployFrontend작업을 찾고 앱 보기 링크를 선택합니다. Mysfit 웹 사이트가 표시됩니다.

트와일라잇 글리터라는 이름의 페가수스 마이스핏을 검색해 보세요. 나이의 가치를 기록해 두세요. 맞아요6. 코드를 변경하여 연령을 업데이트해야 합니다.

프로젝트로 이동합니다.

다음 중 하나를 수행하십시오.

• 탐색 창에서 코드를 선택하고 풀 요청을 선택한 다음 풀 요청 생성을 선택합니다.

• 리포지토리 홈 페이지에서 추가를 선택한 다음 풀 리퀘스트 생성을 선택합니다.

• 프로젝트 페이지에서 풀 리퀘스트 생성을 선택합니다.

소스 리포지토리에서 지정된 소스 리포지토리가 커밋된 코드를 포함하는 리포지토리인지 확인합니다. 이 옵션은 리포지토리의 기본 페이지에서 풀 리퀘스트를 만들지 않은 경우에만 나타납니다.

대상 브랜치에서 코드를 검토한 후 병합할 브랜치를 선택합니다.

소스 브랜치에서 커밋된 코드가 들어 있는 브랜치를 선택합니다.

풀 리퀘스트 제목에 다른 사용자가 검토해야 할 내용과 이유를 이해하는 데 도움이 되는 제목을 입력합니다.

(선택 사항) 풀 요청 설명에 문제 링크 또는 변경 내용 설명과 같은 정보를 입력합니다.

(선택 사항) 이슈에서 이슈 연결을 선택한 다음 목록에서 이슈를 선택하거나 해당 ID를 입력합니다. 이슈의 연결을 해제하려면 연결 해제 아이콘을 선택합니다.

(선택 사항) 필수 검토자에서 필수 검토자 추가를 선택합니다. 프로젝트 멤버 목록에서 선택하여 추가합니다. 풀 리퀘스트를 대상 브랜치에 병합하려면 먼저 필수 검토자가 변경 사항을 승인해야 합니다.

(선택 사항) 선택적 검토자에서 선택적 검토자 추가를 선택합니다. 프로젝트 멤버 목록에서 선택하여 추가합니다. 선택적 검토자는 풀 리퀘스트를 대상 브랜치에 병합하기 전에 변경 사항을 요구 사항으로 승인할 필요가 없습니다.

브랜치 간의 차이점을 검토하세요. 풀 리퀘스트에 표시되는 차이는 소스 브랜치의 수정 버전과 풀 리퀘스트가 생성된 시점의 대상 브랜치의 헤드 커밋인 병합 베이스 사이의 변경 내용입니다. 변경 사항이 표시되지 않으면 브랜치가 동일하거나 소스와 대상 모두에 대해 동일한 브랜치를 선택했을 수 있습니다.

풀 리퀘스트에 검토하려는 코드와 변경 사항이 포함되어 있다고 판단되면 [Create] 를 선택합니다.

최신 애플리케이션 프로젝트로 이동하세요.

프로젝트 페이지의 오픈 풀 리퀘스트에서 병합하려는 풀 리퀘스트를 선택합니다. 풀 리퀘스트가 보이지 않는 경우 모두 보기를 선택한 다음 목록에서 선택하십시오. 병합을 선택합니다.

풀 리퀘스트에 사용할 수 있는 병합 전략 중에서 선택하십시오. 선택적으로 풀 리퀘스트를 병합한 후 소스 브랜치를 삭제하는 옵션을 선택하거나 선택 취소한 다음 병합을 선택합니다.

탐색 창에서 CI/CD를 선택한 다음 워크플로를 선택합니다.

워크플로의 에서 ApplicationDeploymentPipeline최근 실행을 확장합니다. 병합 커밋으로 워크플로 실행이 시작된 것을 볼 수 있습니다. 선택적으로 선택하여 실행 진행 상황을 확인할 수도 있습니다.

실행이 완료되면 이전에 방문한 URL을 다시 로드합니다. 페가수스를 보고 나이가 바뀌었는지 확인하세요.

프로젝트로 이동합니다.

탐색 창에서 이슈를 선택합니다.

rag-and-drop 이슈를 완료 열에 추가합니다.

프로젝트로 이동한 다음 프로젝트 설정을 선택합니다.

일반 탭을 선택합니다.

프로젝트 이름 아래에서 프로젝트 삭제를 선택합니다.

CodeCatalyst스페이스에 추가한 것과 동일한 AWS Management Console 계정으로 로그인합니다.

AWS CloudFormation서비스로 이동하세요.

mysfits 문자열 스택을 삭제합니다.

개발-mysfits 문자열 스택을 삭제합니다.

CDKToolkit 스택을 선택하십시오 (삭제하지는 마십시오). 리소스 탭을 선택합니다. StagingBucket링크를 선택하고 Amazon S3에서 버킷과 버킷 콘텐츠를 삭제합니다.

(선택 사항) CDKToolkit 스택을 삭제합니다.