ReactJS 앱 배포 및 호스팅

AWS Amplify 콘솔 사용

AWS Amplify 콘솔은 단일 페이지 웹 애플리케이션이나 서버리스 백엔드가 포함된 정적 사이트를 개발, 배포 및 호스팅하기 위한 Git 기반의 CI/CD 워크플로를 제공합니다. Amplify는 Git 리포지토리에 연결 시 프런트엔드 프레임워크와 Amplify CLI를 사용하여 구성된 모든 서버리스 백엔드 리소스의 빌드 설정을 결정하고 코드가 커밋될 때마다 업데이트를 자동으로 배포합니다.

이 자습서에서는 새로운 React 애플리케이션을 생성하여 GitHub 리포지토리에 푸시합니다.  그런 다음 해당 리포지토리를 Amplify 콘솔에 연결하여 amplifyapp.com 도메인에서 호스팅되는 전 세계에서 사용 가능한 콘텐츠 전송 네트워크(CDN)에 배포합니다. 다음으로, React 애플리케이션을 변경하고 새로운 버전을 마스터 브랜치에 푸시하여 자동으로 새로운 배포를 시작하도록 함으로써 지속적 배포 기능을 보여줍니다.

이 자습서에서 수행하는 모든 작업은 프리 티어에 해당합니다.

자습서 소개
시간 10분                                           
요금 프리 티어 적격
사용 사례 웹 사이트 및 웹 앱
제품 AWS Amplify 콘솔
대상 개발자
레벨 초보자
최종 업데이트 날짜 2018년 3월 4일

1. AWS에 가입

AWS Amplify 콘솔에서 이 자습서의 작업을 수행하려면 AWS 계정이 필요합니다. 이 자습서에서 AWS Amplify를 사용하는 데 따르는 추가 요금은 없습니다. 이 자습서에서 생성하는 리소스는 프리 티어에 해당합니다. 

계정이 있습니까? Amplify 콘솔에 로그인하십시오.

2. 환경 설정 확인

명령줄 인터페이스를 열고 다음 명령을 입력합니다.

node -v;

이 명령이 v8.0 미만을 반환하면 노드를 버전 8보다 높은 보전으로 업그레이드합니다. 이 명령이 노드를 찾지 못하면 nodejs.org/download에서 노드를 설치합니다.

3. 새 React 애플리케이션 생성

React 애플리케이션을 생성하는 가장 쉬운 방법은 create-react-app 명령을 사용하는 것입니다. 다음 명령을 사용하여 이 패키지를 설치합니다.

npx create-react-app amplifyapp
cd amplifyapp
npm start

4. GitHub 리포지토리 초기화

이 단계에서는 GitHub 리포지토리를 생성하고 코드를 이 리포지토리에 커밋합니다. 이 단계를 완료하려면 GitHub 계정이 필요합니다. 계정이 없으면 여기에서 가입합니다. 

a. 앱을 위한 새 GitHub 리포지토리를 생성합니다(링크).

b. 명령줄 인터페이스에서 다음 명령을 실행하여 git를 초기화하고 애플리케이션을 새 GitHub 리포지토리에 푸시합니다.

git init
git remote add origin git@github.com:username/reponame.git
git add .
git commit -m ‘initial commit’
git push origin master

5. AWS Amplify 콘솔에 로그인

새 브라우저 창에서 AWS Management Console을 엽니다. 이 단계별 안내서는 계속 열어 놓을 수 있습니다. 이 화면이 로드되면 먼저 사용자 이름 및 암호를 입력하여 시작합니다. 그런 다음 검색 창에 Amplify를 입력하고 AWS Amplify를 선택하여 서비스 콘솔을 엽니다.

6. AWS Amplify에 앱 배포

이 단계에서는 방금 생성한 GitHub 리포지토리를 AWS Amplify 서비스에 연결합니다. 이렇게 하면 AWS에서 앱을 빌드, 배포 및 호스팅할 수 있습니다.

a. [배포] 아래에서 [시작하기]를 선택합니다.

b. 리포지토리 서비스로 [GitHub]를 선택하고 [다음]을 선택합니다.

c. GitHub에 인증하고 Amplify 콘솔로 돌아갑니다. 앞에서 생성한 리포지토리와 마스터 브랜치를 선택한 후 [다음]을 선택합니다.

d. 기본 빌드 설정을 그대로 적용하고 [다음]을 선택합니다.

e. 최종 세부 정보를 검토하고 [저장 및 배포]를 선택합니다.

f. AWS Amplify 콘솔이 소스 코드를 빌드하고 앱을 https://<branchname>.<appid>.amplifyapp.com에 배포합니다.

g. 빌드가 완료되면 해당 썸네일을 선택하여 웹 앱이 실제로 시작 및 실행되는지 확인합니다.

tmt-react-ClickThumnail

7. 코드 변경 사항 자동 배포

이 단계에서는 코드를 약간 변경한 후 변경 사항을 앱의 마스터 브랜치에 푸시합니다.

a. src/App.js 파일을 편집합니다.

b. 빌드가 완료되면 AWS Amplify 콘솔에서 해당 썸네일을 선택하여 업데이트된 앱을 확인합니다.

tmt-react-7b-2

8. 리소스 정리

AWS Amplify 콘솔에서 생성한 리소스를 쉽게 종료할 수 있습니다. 사실상 더 이상 사용하지 않는 리소스는 종료해서 요금이 부과되지 않도록 하는 것이 좋습니다.

[작업]을 선택한 다음 [앱 삭제]를 선택합니다. 모달 창이 열리면 delete를 입력하여 앱 삭제 의사를 확인합니다. 이제 앱이 삭제됩니다.

축하합니다!

GitHub와 통합한 후 Amplify 콘솔을 사용하여 클라우드에 React 애플리케이션을 배포했습니다.

AWS Amplify 콘솔을 사용하면 애플리케이션을 클라우드에서 지속적으로 배포하고 전 세계에서 사용 가능한 CDN에서 호스팅할 수 있습니다.

이 자습서가 유용했습니까?

감사합니다.
좋아하는 사항을 알려주세요.
실망을 드려 죄송합니다.
오래되었거나 혼란스럽거나 부정확한 사항이 있습니까? 피드백을 제공하여 이 자습서를 개선할 수 있도록 도와주십시오.