소개

AWS Codepipeline을 사용하여 React 앱의 CI 환경을 처음부터 생성 에서 만든 CI 환경을 편집기 Brackets에서 직접 실행할 수 있도록 합니다. Brackets에서 소스를 수정하고 로컬 미리보기에서 확인한 후 git push 버튼을 눌러 배포까지 자동으로 수행합니다.
Brackets는 Adobe가 오픈 소스로 개발한 웹 앱 개발을 위한 코드 편집기입니다.

사전 준비

git의 도입과 React 프로젝트에서의 설정 (참고 : AWS Codepipeline을 사용하여 React 앱의 CI 환경을 처음부터 생성 )

절차

Brackets 설치

htp // b 등 c ts. 이오 에서 설치 프로그램을 다운로드하고 더블 클릭하여 설치합니다.

Brackets Git 확장 기능 설치

브래킷을 시작하고 파일 > 기능 확장 관리자를 엽니다. "Brackets Git"을 검색하고 "설치"버튼을 눌러 설치합니다.

Brackets에서 React 프로젝트 열기

브래킷을 시작하고 파일 > 폴더 열기에서 React 프로젝트의 홈 디렉토리를 엽니다. 왼쪽 창의 파일 목록에서 편집할 파일 이름을 클릭하여 주 창으로 엽니다.

Brackets에서 git 조작

Brackets의 오른쪽 끝에 있는 Git 확장 아이콘(*1)을 누르면 아래쪽에 git 조작 패널이 열립니다.
소스 코드를 편집하고 저장하면 업데이트된 파일이 git 조작 패널에 표시됩니다. 왼쪽에 체크를 하면 Commit 아이콘(*2)을 누를 수 있게 됩니다. 커밋 창이 팝업되므로 코멘트를 작성하고 "확인"버튼을 누릅니다. 오른쪽의 git push 아이콘(*3)에 업데이트 수가 표시됩니다. git push 아이콘을 눌러 push 창이 팝업되므로 그대로 "OK"버튼을 누릅니다 (SSH 키 인증하고 있기 때문에 사용자/비밀번호가 필요하지 않습니다).
AWS Codepipeline을 사용하여 React 앱의 CI 환경을 처음부터 시작 에서 만든 CI 환경이 있으면 이제 자동으로 빌드되어 게시 환경에 배포됩니다.

*1 git 기능 확장 아이콘:

*2 Commit 아이콘:

*3 git push 아이콘:

링크