Bearcam Companion: Amplify 및 GitHub를 사용한 호스팅

Bearcam Companion 애플리케이션은 내 . 마지막 단계(적어도 실행 가능한 최소 제품의 경우)는 사이트를 게시하는 것이었습니다. 당연히 AWS Amplify Hosting 을 사용하기로 했습니다.

AWS Amplify 호스팅

AWS Amplify User Guide에 Amplify를 사용하여 사이트 호스팅을 설정하는 방법에 대한 개요가 있습니다. Amplify 콘솔을 사용하여 시작했습니다.

GitHub에 연결

이미 GitHub 리포지토리에 내 코드가 있으므로(설명된 대로) 지속적인 통합 흐름을 사용하기로 결정했습니다. 설정에서 GitHub를 선택하고 Amplify를 my repository에 연결했습니다. 지금까지 하나의 브랜치와 하나의 백엔드(스테이징)만 있으므로 이를 선택했습니다. 프런트 엔드와 백엔드 모두 빌드 설정이 자동으로 감지되어 확인했습니다. 저장 및 배포를 클릭하면 빌드 프로세스가 시작됩니다.

자동 빌드 프로세스

빌드 프로세스는 4단계를 거칩니다.

프로비저닝 - 기본 호스트에서 빌드 환경을 설정합니다.

구축 - 저장소를 복제하고 백엔드를 배포하고 프런트 엔드를 구축합니다.

배포 - 관리되는 호스팅 환경에 아티팩트를 배포합니다.

확인 - 응용 프로그램의 스크린샷이 렌더링됩니다.

GitHub 저장소에 aws-amplify가 없어서 첫 번째 빌드가 실패했습니다. 나는 달렸다

npm install aws-amplify

변경 사항을 커밋했습니다. GitHub에 푸시하면 Amplify 빌드 프로세스가 자동으로 시작됩니다.



이번에는 빌드가 성공했고 제공된 URL에서 애플리케이션을 볼 수 있었습니다.

https://master.d7ijzylsc7qfm.amplifyapp.com/



빌드 기록 및 각 단계의 모든 세부 정보는 콘솔에서 사용할 수 있습니다.



메인 리포지토리에 커밋을 푸시할 때마다 위의 프로세스가 시작되고 사이트의 새로운 배포로 끝납니다.

사용자 정의 URL

기본 URL은 사용자에게 친숙하지 않습니다. 웹 응용 프로그램을 BearID 프로젝트의 일부로 표시하고 싶습니다( http://bearid.org/ ). 특히 app.bearid.org에서 설정하고 싶습니다.

이를 달성하기 위해 저는 Amplify 사용자 가이드의 Set up custom domains 섹션을 따랐습니다. 기본적으로 도메인이 관리되는 모든 위치에 일부 DNS 레코드를 추가해야 합니다. 제 경우에는 2개의 CNAME 레코드를 추가해야 했습니다. 첫 번째 레코드는 하위 도메인(앱)을 위의 기본 Amplify 앱 URL에 매핑합니다. 두 번째 레코드는 TLS를 활성화하여 https를 활성화하는 AWS Certificate Manager(ACM) 검증 서버를 가리킵니다. 마지막으로 내 URL에 대한 모든 액세스가 Amplify 애플리케이션으로 이동하도록 하위 도메인 포워드를 설정합니다.

설정을 완료한 후 모든 레코드가 전파되고 SLL 구성이 완료될 때까지 몇 시간을 기다려야 했습니다.



위의 도메인 활성화 단계가 완료되면 https://app.bearid.org/에서 Bearcam Companion을 볼 수 있습니다.

결론

이 게시물에서는 Amplify로 내 애플리케이션을 호스팅하고 자동 배포를 위해 내 GitHub 리포지토리에 연결하고 사용자 지정 URL을 설정하는 방법에 대해 설명했습니다. 다시 한 번 Amplify는 프로세스를 매우 쉽게 만들었습니다.

Brooks Falls Brown Bears cam on Explore.org을 보고 누가 누구인지 알고 싶다면 Bearcam Companion에 가입하고 로그인하십시오. Brooks River의 곰을 이미 알고 있다면 로그인하여 이미지에 라벨을 지정하도록 도와주세요!