Amplify와 GitHub를 연동해 자동 배포 설정

안녕하세요 클래스메소드 김재욱(Kim Jaewook) 입니다. 이번에는 Amplify와 GitHub를 연동해 자동 배포를 설정하는 과정을 정리해 봤습니다.

GitHub 준비

먼저 Amplify와 연동할 GitHub의 Repository를 생성합니다.

생성한 Repository에 index.html 파일을 업로드합니다.

본 블로그에서는 아래 블로그에서 작성한 html 파일의 코드를 사용하고 있습니다.

 

Amplify에서 연동

Amplify 콘솔 화면에서 웹 호스팅을 선택하고, GitHub를 선택해 연동을 진행합니다.

다음 화면에서 바로 GitHub에 권한이 부여되며, Repository를 선택할 수 있습니다.

※ 여기서 Repository를 선택해도 리스트가 출력이 되지 않는다면「GitHub 권한 보기」를 클릭하여 권한을 할당합니다.

다음 화면에서는 설정 및 빌드 테스트 코드가 자동으로 생성되며「AWS Amplify가 프로젝트 루트 디렉터리에 호스팅된 모든 파일을 자동으로 배포하도록 허용」을 체크하여, 자동으로 배포가 되도록 설정합니다.

이제 GitHub의 Repository에 있는 코드가 Amplify로 배포가 이루어지며, 접속 URL이 표시됩니다.

결과 확인

URL로 접속해 보면, Repository에 Push한 index.html의 웹 화면이 표시되는 것을 확인할 수 있습니다.

여기서 index.html 파일을 수정하고 push를 진행해 보면, Amplify 콘솔 화면에서 프로비저닝 -> 빌드 -> 배포가 다시 시작되는 것을 확인할 수 있습니다.

배포가 끝난 후 URL로 접속해 보면, List Hello World로 텍스트가 수정된 것을 확인할 수 있습니다.

본 블로그 게시글을 읽고 궁금한 사항이 있으신 분들은 jaewookkim533@yahoo.com로 보내주시면 감사하겠습니다.