자습서: React 애플리케이션 생성 및 업데이트

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

CodeCatalyst 콘솔에서 블루프린트를 생성할 스페이스로 이동합니다.

설정을 선택하여 스페이스 설정으로 이동합니다.

스페이스 설정 탭에서 블루프린트를 선택하고 블루프린트 생성을 선택합니다.

블루프린트 생성 마법사의 필드를 다음 값으로 업데이트합니다.

필요에 따라 코드 보기를 선택하여 블루프린트의 블루프린트 소스 코드를 미리 봅니다. 마찬가지로 워크플로 보기를 선택하여 블루프린트를 빌드하고 게시하는 프로젝트에서 생성될 워크플로를 미리 봅니다.

블루프린트 생성을 선택합니다.

블루프린트가 생성되면 블루프린트의 프로젝트로 이동합니다. 이 프로젝트에는 블루프린트 소스 코드와 블루프린트를 개발, 테스트 및 게시하는 데 필요한 도구 및 리소스가 포함되어 있습니다. 릴리스 워크플로가 생성되어 블루프린트가 스페이스에 자동으로 게시되었습니다.

이제 블루프린트 및 블루프린트 프로젝트가 생성되었으므로 다음 단계에서는 소스 코드를 업데이트하여 구성합니다. 개발 환경을 사용하여 브라우저에서 직접 소스 리포지토리를 열고 편집할 수 있습니다.

탐색 창에서 코드를 선택한 다음 개발 환경을 선택합니다.

개발 환경 생성을 선택한 다음 AWS Cloud9 (브라우저에서)를 선택합니다.

기본 설정을 유지하고 생성을 선택합니다.

AWS Cloud9 터미널에서 다음 명령을 실행하여 블루프린트 프로젝트 디렉터리로 이동합니다.

cd react-app-blueprint

블루프린트가 생성되면 static-assets 폴더가 자동으로 생성되고 채워집니다. 이 자습서에서는 기본 폴더를 삭제하고 react 앱 블루프린트에 대한 새 폴더를 생성합니다.

다음 명령을 실행하여 static-assets 폴더를 삭제합니다.

rm -r static-assets

AWS Cloud9 는 Linux 기반 플랫폼을 기반으로 구축되었습니다. Windows 운영 체제를 사용하는 경우 대신 다음 명령을 사용할 수 있습니다.

rmdir /s /q static-assets

이제 기본 폴더가 삭제되었으므로 다음 명령을 실행하여 react-app 블루프린트용 static-assets 폴더를 생성합니다.

npx create-react-app static-assets

메시지가 표시되면 y를 입력하여 계속 진행합니다.

필요한 패키지가 있는 static-assets 폴더에 새 React 애플리케이션이 생성되었습니다. 변경 사항을 원격 CodeCatalyst 소스 리포지토리로 푸시해야 합니다.

최신 변경 사항이 있는지 확인한 뒤 다음 명령을 실행하여 변경 사항을 커밋하고 블루프린트의 CodeCatalyst 소스 리포지토리에 푸시합니다.

git pull

git add .

git commit -m "Add React app to static-assets"

git push

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

blueprint-release 워크플로를 선택합니다.

워크플로에 블루프린트를 빌드하고 게시하는 작업이 있음을 확인할 수 있습니다.

최신 실행에서 워크플로 실행 링크를 선택하여 수행한 코드 변경에서 실행을 확인합니다.

실행이 완료되면 새 블루프린트 버전이 게시됩니다. 게시된 블루프린트 버전은 스페이스 설정에서 볼 수 있지만 스페이스의 블루프린트 카탈로그에 추가될 때까지 프로젝트에서 사용할 수 없습니다. 다음 단계에서는 카탈로그에 블루프린트를 추가합니다.

CodeCatalyst 콘솔에서 스페이스로 돌아갑니다.

설정을 선택한 다음 블루프린트를 선택합니다.

react-app-blueprint를 선택한 다음 카탈로그에 추가를 선택합니다.

저장(Save)을 선택합니다.

프로젝트 탭을 선택한 다음 프로젝트 생성을 선택합니다.

스페이스 블루프린트를 선택한 다음 react-app-blueprint를 선택합니다.

Next(다음)를 선택합니다.

프로젝트 이름을 블루프린트 사용자로 입력합니다. 이 자습서에서는 react-app-project을 입력합니다. 자세한 내용은 프로젝트 요구 사항을 충족하기 위한 사용자 지정 블루프린트 개발 단원을 참조하십시오.

자습서: React 애플리케이션 생성 및 업데이트에서 생성된 react-app-blueprint 프로젝트로 이동합니다.

자습서: React 애플리케이션 생성 및 업데이트에서 생성된 개발 환경을 엽니다.

1. 탐색 창에서 코드를 선택한 다음 개발 환경을 선택합니다.

2. 테이블에서 개발 환경을 찾은 다음 열기 AWS Cloud9 (브라우저에서)를 선택합니다.

블루프린트 릴리스 워크플로가 실행되면 package.json 파일 업데이트를 통해 블루프린트 버전이 증가합니다. AWS Cloud9 터미널에서 다음 명령을 실행하여에서 변경 사항을 가져옵니다.

git pull

static-assets 폴더로 이동하여 다음 명령을 실행합니다.

cd /projects/react-app-blueprint/static-assets

다음 명령을 실행하여 static-assets 폴더에 hello-world.txt 파일을 생성합니다.

touch hello-world.txt

AWS Cloud9 는 Linux 기반 플랫폼을 기반으로 구축되었습니다. Windows 운영 체제를 사용하는 경우 대신 다음 명령을 사용할 수 있습니다.

echo > hello-world.text

왼쪽 탐색에서 hello-world.txt 파일을 두 번 클릭하여 편집기에서 파일을 열고 다음 내용을 추가합니다.

Hello, world!

파일을 저장합니다.

최신 변경 사항이 있는지 확인한 뒤 다음 명령을 실행하여 변경 사항을 커밋하고 블루프린트의 CodeCatalyst 소스 리포지토리에 푸시합니다.

git pull

git add .

git commit -m "prettier setup"

git push

CodeCatalyst 콘솔에서 스페이스로 돌아갑니다.

설정을 선택한 다음 블루프린트를 선택합니다.

react-app-blueprint를 선택한 다음 카탈로그 버전 관리를 선택합니다.

새 버전을 선택하고 저장을 선택합니다.

CodeCatalyst 콘솔에서 4단계: 블루프린트를 사용하여 프로젝트 생성에서 생성된 react-app-project 프로젝트로 이동합니다.

탐색 창에서 [블루프린트(Blueprints)]를 선택합니다.

정보 상자에서 블루프린트 업데이트를 선택합니다.

오른쪽 코드 변경 패널에서 hello-world.txt 및 package.json 업데이트를 볼 수 있습니다.

업데이트 적용을 선택합니다.

블루프린트 테이블에서 블루프린트를 찾습니다. 상태 열에서 보류 중인 풀 요청을 선택한 다음 열린 풀 요청에 대한 링크를 선택합니다.

풀 요청을 검토한 다음 병합을 선택합니다.

빠른 병합을 선택하여 기본값을 유지한 다음 병합을 선택합니다.

탐색 창에서 소스 리포지토리를 선택한 다음 프로젝트가 생성될 때 생성된 소스 리포지토리의 이름을 선택합니다.

파일에서 5단계: 블루프린트 업데이트에서 생성된 hello-world.txt 파일을 볼 수 있습니다.

파일 콘텐츠를 볼 hello-world.txt를 선택합니다.