CI/CD 파이프라인 설정과 함께 AWS Amplify를 사용하여 React 앱 배포

최근에 React를 시작했거나 얼마 동안 react를 해왔지만 CI/CD 파이프라인을 설정하고 애플리케이션을 배포하는 방법이 궁금하다면 잘 찾아오셨습니다.
CI/CD 파이프라인 설정과 함께 AWS Amplify를 사용하여 React 애플리케이션을 생성하고 배포할 것입니다. 시작하려면 먼저 반응 애플리케이션을 만들어야 합니다. 작업 속도를 높이기 위해 CRA(Create React App)를 사용하여 반응 애플리케이션 템플릿을 빠르게 생성합니다. CRA가 이미 설치되어 있다고 생각하여 응용 프로그램을 만들려면 터미널에 다음 명령을 입력하십시오.

create-react-app my-app

CRA가 설치되어 있지 않고 원하지 않는 경우 간단히 npx를 사용할 수 있습니다.

npx create-react-app my-app

이제 GitHub/GitLab에서 원하는 대로 새 리포지토리를 신속하게 만들 때까지 보일러 플레이트 생성을 완료하는 데 몇 분이 걸립니다.
repo 및 상용구 생성이 완료되면 my-app 폴더로 이동할 수 있으며 CRA는 git을 자동 초기화하고 쉽게 .gitignore도 생성합니다. 이제 리포지토리 링크를 가져와서 앱의 원본으로 추가하기만 하면 됩니다.

cd my-app
git remote add origin [email protected]:gituser/projectname.git
git push origin -u origin master

이제 앱을 만들고 코드를 gitHub에 푸시하는 작업이 완료되었습니다. 이제 마침내 AWS Amplify를 사용하여 git 리포지토리에 연결하고 애플리케이션을 배포할 수 있습니다. 시작하려면 AWS 콘솔로 이동하여 Amplify를 검색하십시오. 다음과 유사한 팝업이 표시됩니다.



팝업을 클릭하면 Amplify 홈페이지로 리디렉션됩니다. 이제 왼쪽 탐색 모음에서 모든 앱을 클릭하면 다음과 유사한 내용이 표시됩니다.



이제 오른쪽 상단에서 앱 연결을 클릭하면 다음과 유사한 내용이 표시됩니다.


공급자를 선택하십시오. 제 경우에는 GitHub를 사용하고 있지만 언급된 옵션 중 하나를 자유롭게 사용하고 다음을 클릭하세요. 다음을 클릭하면 몇 가지 권한을 허용할지 묻는 github의 인증 화면이 표시됩니다. 인증을 완료하면 AWS Amplify에 연결할 git 리포지토리를 선택할 수 있으며 새 코드가 푸시될 때 트리거로 사용할 분기를 선택할 수도 있습니다. 기본값인 마스터 브랜치를 그대로 두겠습니다.



그런 다음 다음 -> 다음 -> 저장 및 배포를 클릭합니다. 이제 Amplify가 빌드를 시작하고 몇 분 후에 배포된 앱 링크가 표시됩니다.
코드를 수정하고 마스터 브랜치로 푸시하면 앱이 자동으로 다시 빌드되고 재배포됩니다.

향후 기사에서는 반응 앱을 자신의 도메인과 연결하는 방법을 안내해 드리겠습니다.

Thanks For Reading !!