기계 번역으로 제공되는 번역입니다. 제공된 번역과 원본 영어의 내용이 상충하는 경우에는 영어 버전이 우선합니다.
튜토리얼: React 애플리케이션 생성 및 업데이트
블루프린트 작성자는 커스텀 블루프린트를 개발하여 스페이스의 블루프린트 카탈로그에 추가할 수 있습니다. 그러면 스페이스 구성원이 이 청사진을 사용하여 새 프로젝트를 만들거나 기존 프로젝트에 추가할 수 있습니다. 블루프린트를 계속 변경한 다음 풀 리퀘스트를 통해 업데이트로 사용할 수 있습니다.
이 튜토리얼에서는 블루프린트 작성자의 관점과 블루프린트 사용자의 관점에서의 안내를 제공합니다. 이 튜토리얼은 React 단일 페이지 웹 애플리케이션 블루프린트를 만드는 방법을 보여줍니다. 그런 다음 블루프린트를 사용하여 새 프로젝트를 만듭니다. 블루프린트가 변경사항으로 업데이트되면, 블루프린트에서 생성된 프로젝트는 풀 리퀘스트를 통해 해당 변경사항을 통합합니다.
주제
사전 조건
커스텀 블루프린트를 생성하고 업데이트하려면 다음과 같은 작업을 완료해야 합니다. 설정 및 로그인 CodeCatalyst
-
로그인할 AWS CodeCatalyst 빌더 ID가 있어야 합니다.
-
스페이스에 속하고 해당 스페이스에서 스페이스 관리자 또는 파워 사용자 역할을 할당받아야 합니다. 자세한 내용은 공백 생성, 사용자에게 공간 권한 부여, Space 관리자 역할 단원을 참조하세요.
1단계: 사용자 지정 청사진 만들기
커스텀 블루프린트를 만들면 블루프린트 소스 코드, 개발 도구 및 리소스가 포함된 CodeCatalyst 프로젝트가 생성됩니다. 프로젝트는 블루프린트를 개발, 테스트 및 게시하는 곳입니다.
https://codecatalyst.aws/
에서 CodeCatalyst 콘솔을 엽니다. -
CodeCatalyst 콘솔에서 블루프린트를 만들려는 스페이스로 이동합니다.
-
설정을 선택하여 스페이스 설정으로 이동합니다.
-
스페이스 설정 탭에서 블루프린트를 선택하고 블루프린트 생성을 선택합니다.
-
블루프린트 생성 마법사의 필드를 다음 값으로 업데이트합니다.
블루프린트 이름에 를 입력합니다.
react-app-blueprint
블루프린트 디스플레이 이름에 를 입력합니다.
react-app-blueprint
선택적으로 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
변경 사항이 블루프린트의 소스 리포지토리에 푸시되면 릴리스 워크플로가 자동으로 시작됩니다. 이 워크플로는 블루프린트 버전을 늘리고, 블루프린트를 빌드하고, 스페이스에 게시합니다. 다음 단계에서는 릴리스 워크플로 실행으로 이동하여 진행 상황을 살펴보겠습니다.
2단계: 출시 워크플로 보기
-
CodeCatalyst 콘솔의 탐색 창에서 CI/CD를 선택한 다음 워크플로를 선택합니다.
-
블루프린트 출시 워크플로를 선택합니다.
-
워크플로에 블루프린트를 빌드하고 게시하기 위한 작업이 있는 것을 볼 수 있습니다.
-
최신 실행에서 워크플로 실행 링크를 선택하면 변경한 코드에 따른 실행을 볼 수 있습니다.
-
실행이 완료되면 새 블루프린트 버전이 게시됩니다. 게시된 블루프린트 버전은 스페이스 설정에서 볼 수 있지만, 스페이스의 블루프린트 카탈로그에 추가되기 전까지는 프로젝트에 사용할 수 없습니다. 다음 단계에서는 카탈로그에 청사진을 추가해 보겠습니다.
3단계: 카탈로그에 청사진 추가
스페이스의 청사진 카탈로그에 청사진을 추가하면 해당 청사진을 스페이스의 모든 프로젝트에서 사용할 수 있습니다. 스페이스 구성원은 청사진을 사용하여 새 프로젝트를 만들거나 기존 프로젝트에 추가할 수 있습니다.
-
CodeCatalyst 콘솔에서 스페이스로 다시 이동합니다.
-
설정을 선택한 다음 블루프린트를 선택합니다.
-
선택한 react-app-blueprint다음 카탈로그에 추가를 선택합니다.
-
저장을 선택합니다.
4단계: 블루프린트로 프로젝트 만들기
이제 블루프린트가 카탈로그에 추가되었으니 프로젝트에서 사용할 수 있습니다. 이 단계에서는 방금 만든 청사진을 사용하여 프로젝트를 생성합니다. 이후 단계에서는 청사진의 새 버전을 업데이트하고 게시하여 이 프로젝트를 업데이트합니다.
-
프로젝트 탭을 선택한 다음 프로젝트 생성을 선택합니다.
-
스페이스 블루프린트를 선택한 다음 선택하세요 react-app-blueprint.
참고
블루프린트가 선택되면 블루프린트 파일의 내용을 볼 수 있습니다.
README.md
-
다음을 선택합니다.
-
참고
이 프로젝트 생성 마법사의 내용은 블루프린트에서 구성할 수 있습니다.
블루프린트 사용자로 프로젝트 이름을 입력합니다. 이 자습서에서는
react-app-project
을 입력합니다. 자세한 정보는 프로젝트 요구 사항을 충족하기 위한 사용자 지정 청사진 개발을 참조하세요.
다음으로 블루프린트를 업데이트하고 이 프로젝트를 업데이트하는 데 사용할 새 버전을 카탈로그에 추가합니다.
5단계: 블루프린트 업데이트
블루프린트를 사용하여 새 프로젝트를 만들거나 기존 프로젝트에 적용한 후에도 블루프린트 작성자로서 계속 업데이트할 수 있습니다. 이 단계에서는 블루프린트를 변경하고 새 버전을 스페이스에 자동으로 퍼블리시합니다. 그런 다음 새 버전을 카탈로그 버전으로 추가할 수 있습니다.
-
에서 만든 react-app-blueprint프로젝트로 이동합니다튜토리얼: React 애플리케이션 생성 및 업데이트.
-
에서 튜토리얼: React 애플리케이션 생성 및 업데이트 만든 개발 환경을 엽니다.
탐색 창에서 코드를 선택한 다음 개발 환경을 선택합니다.
표에서 개발 환경을 찾은 다음 [브라우저에서 AWS Cloud9 열기] 를 선택합니다.
-
블루프린트 릴리스 워크플로가 실행되었을 때 파일을 업데이트하여 블루프린트 버전을 늘렸습니다.
package.json
터미널에서 다음 명령을 실행하여 변경 내용을 가져오세요. AWS Cloud9git 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
변경 사항을 푸시하면서 릴리스 워크플로가 시작되었고, 새 버전의 블루프린트가 스페이스에 자동으로 게시됩니다.
6단계: 블루프린트에 게시된 카탈로그 버전을 새 버전으로 업데이트
청사진을 사용하여 새 프로젝트를 만들거나 기존 프로젝트에 적용한 후에도 청사진 작성자로서 청사진을 업데이트할 수 있습니다. 이 단계에서는 블루프린트를 변경하고 블루프린트의 카탈로그 버전을 변경합니다.
-
CodeCatalyst 콘솔에서 스페이스로 다시 이동합니다.
-
설정을 선택한 다음 블루프린트를 선택합니다.
-
선택한 react-app-blueprint다음 카탈로그 버전 관리를 선택합니다.
-
새 버전을 선택한 다음 [Save] 를 선택합니다.
7단계: 새 블루프린트 버전으로 프로젝트 업데이트
이제 스페이스의 블루프린트 카탈로그에서 새 버전을 사용할 수 있습니다. 블루프린트 사용자는 에서 만든 프로젝트의 버전을 업데이트할 수 있습니다. 4단계: 블루프린트로 프로젝트 만들기 이렇게 하면 모범 사례를 충족하는 데 필요한 최신 변경 사항 및 수정 사항을 적용할 수 있습니다.
-
CodeCatalyst 콘솔에서 에서 만든 react-app-project프로젝트로 이동합니다4단계: 블루프린트로 프로젝트 만들기.
-
탐색 창에서 [블루프린트(Blueprints)]를 선택합니다.
-
정보 상자에서 블루프린트 업데이트를 선택합니다.
-
오른쪽 코드 변경 패널에서
hello-world.txt
및package.json
업데이트를 확인할 수 있습니다. -
업데이트 적용을 선택합니다.
업데이트 적용을 선택하면 업데이트된 블루프린트 버전의 변경 사항이 포함된 풀 리퀘스트가 프로젝트에 생성됩니다. 프로젝트를 업데이트하려면 풀 요청을 병합해야 합니다. 자세한 내용은 풀 요청 검토 및 풀 요청 병합 섹션을 참조하세요.
-
블루프린트 테이블에서 블루프린트를 찾으세요. 상태 열에서 보류 중인 풀 리퀘스트를 선택한 다음, 오픈 풀 리퀘스트 링크를 선택합니다.
-
풀 리퀘스트를 검토한 다음 병합을 선택합니다.
-
[빠른 전달 병합] 을 선택하여 기본값을 유지한 다음 [병합] 을 선택합니다.
8단계: 프로젝트의 변경 내용 보기
청사진에 대한 변경 사항은 이제 이후에 7단계: 새 블루프린트 버전으로 프로젝트 업데이트 프로젝트에서 사용할 수 있습니다. 블루프린트 사용자는 소스 리포지토리에서 변경사항을 볼 수 있습니다.
-
탐색 창에서 소스 리포지토리를 선택한 다음 프로젝트 생성 시 만든 소스 리포지토리의 이름을 선택합니다.
-
파일에서 생성된 파일을 볼 수 있습니다.
hello-world.txt
5단계: 블루프린트 업데이트 -
파일 내용을
hello-world.txt
보려면 를 선택합니다.
라이프사이클 관리를 통해 블루프린트 작성자는 특정 블루프린트가 포함된 모든 프로젝트의 소프트웨어 개발 라이프사이클을 중앙에서 관리할 수 있습니다. 이 튜토리얼에서 볼 수 있듯이, 블루프린트에 업데이트를 푸시한 다음, 블루프린트를 사용하여 새 프로젝트를 만들거나 기존 프로젝트에 적용한 프로젝트에 통합할 수 있습니다. 자세한 내용은 블루프린트 작성자로서 라이프사이클 관리와 협력하기을(를) 참조하세요.