튜토리얼: React 애플리케이션 생성 및 업데이트

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

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

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

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

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

선택적으로 View code 를 선택하여 블루프린트의 블루프린트 소스 코드를 미리 볼 수 있습니다. 마찬가지로 View workflow (워크플로 보기) 를 선택하여 블루프린트를 빌드하고 퍼블리시하는 프로젝트에서 생성될 워크플로를 미리 볼 수 있습니다.

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

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

블루프린트와 블루프린트 프로젝트가 생성되었으니, 다음 단계는 소스 코드를 업데이트하여 구성하는 것입니다. Dev Environments를 사용하여 브라우저에서 직접 소스 리포지토리를 열고 편집할 수 있습니다.

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

[개발 환경 만들기] 를 선택한 다음 AWS Cloud9 (브라우저에서) 를 선택합니다.

기본 설정을 유지하고 [Create] 를 선택합니다.

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

cd react-app-blueprint

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

다음 명령어를 실행하여 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 폴더에 새 반응 애플리케이션이 생성되었습니다. 변경사항을 원격 CodeCatalyst 소스 리포지토리로 푸시해야 합니다.

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

git pull

git add .

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

git push

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

블루프린트 출시 워크플로를 선택합니다.

워크플로에 블루프린트를 빌드하고 게시하기 위한 작업이 있는 것을 볼 수 있습니다.

최신 실행에서 워크플로 실행 링크를 선택하면 변경한 코드에 따른 실행을 볼 수 있습니다.

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

CodeCatalyst 콘솔에서 스페이스로 다시 이동합니다.

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

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

저장을 선택합니다.

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

스페이스 블루프린트를 선택한 다음 선택하세요 react-app-blueprint.

다음을 선택합니다.

블루프린트 사용자로 프로젝트 이름을 입력합니다. 이 자습서에서는 react-app-project을 입력합니다. 자세한 정보는 프로젝트 요구 사항을 충족하는 맞춤형 청사진 개발을 참조하세요.

에서 만든 react-app-blueprint프로젝트로 이동합니다튜토리얼: React 애플리케이션 생성 및 업데이트.

에서 튜토리얼: 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다음 카탈로그 버전 관리를 선택합니다.

새 버전을 선택한 다음 [Save] 를 선택합니다.

CodeCatalyst 콘솔에서 에서 만든 react-app-project프로젝트로 이동합니다4단계: 블루프린트로 프로젝트 만들기.

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

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

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

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

블루프린트 테이블에서 블루프린트를 찾으세요. 상태 열에서 보류 중인 풀 리퀘스트를 선택한 다음, 오픈 풀 리퀘스트 링크를 선택합니다.

풀 리퀘스트를 검토한 다음 병합을 선택합니다.

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

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

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

파일 내용을 hello-world.txt 보려면 를 선택합니다.