AWS 시작하기
React 애플리케이션 구축
AWS Amplify를 사용하여 간단한 웹 애플리케이션 생성
모듈 1: React 앱 배포 및 호스팅
이 모듈에서는 AWS Amplify의 웹 호스팅 서비스를 사용하여 React 애플리케이션을 만들어 클라우드에 배포합니다.
소개
AWS Amplify는 단일 페이지 웹 애플리케이션이나 서버리스 백엔드가 포함된 정적 사이트를 구축, 배포 및 호스팅하기 위한 Git 기반의 CI/CD 워크플로를 제공합니다. Amplify는 Git 리포지토리에 연결 시 프런트엔드 프레임워크와 Amplify CLI를 사용하여 구성된 모든 서버리스 백엔드 리소스의 빌드 설정을 결정하고 코드가 커밋될 때마다 업데이트를 자동으로 배포합니다.
이 모듈에서는 새로운 React 애플리케이션을 생성하여 GitHub 리포지토리에 푸시합니다. 그런 다음 해당 리포지토리를 AWS Amplify 웹 호스팅 서비스에 연결하여 amplifyapp.com 도메인에서 호스팅되는 전 세계에서 사용 가능한 CDN(콘텐츠 전송 네트워크)에 배포합니다. 다음으로, React 애플리케이션 변경을 통해 지속적인 배포 기능을 설명하고 새로운 버전을 마스터 브랜치에 푸시하여 자동으로 새로운 배포를 시작하도록 합니다.
배우게 될 내용
- React 애플리케이션 생성
- GitHub 리포지토리 초기화
- AWS Amplify를 사용하여 앱 배포
- 코드 변경 사항 구현 및 앱 재배포
주요 개념
React 애플리케이션 – React는 개발자가 JavaScript를 사용하여 고성능 단일 페이지 애플리케이션을 빠르게 구축할 수 있는 웹 애플리케이션 프레임워크입니다.
Git – 개발자가 파일을 저장하고 파일 및 디렉터리, 버전 및 파일 변경 사항 간의 관계를 유지 및 업데이트할 수 있는 버전 관리 시스템입니다.
완료 시간
10분
사용되는 서비스
구현
-
새 React 애플리케이션 생성
React 애플리케이션을 생성하는 가장 쉬운 방법은 create-react-app 명령을 사용하는 것입니다. 명령 프롬프트 또는 터미널에서 다음 명령을 사용하여 이 패키지를 설치합니다.
npx create-react-app amplifyapp cd amplifyapp npm start
-
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
-
AWS Management Console에 로그인합니다.
새 브라우저 창에서 AWS Management Console을 엽니다. 이 단계별 안내서는 계속 열어 놓을 수 있습니다. 이 화면이 로드되면 먼저 사용자 이름 및 암호를 입력하여 시작합니다. 그런 다음 검색 창에 "Amplify"를 입력하고 AWS Amplify를 선택하여 서비스 콘솔을 엽니다.
-
AWS Amplify를 사용하여 앱 배포
이 단계에서는 방금 생성한 GitHub 리포지토리를 AWS Amplify 서비스에 연결합니다. 이렇게 하면 AWS에서 앱을 빌드, 배포 및 호스팅할 수 있습니다.
a. AWS Amplify 서비스 콘솔에서 [배포(Deploy)] 아래에 있는 "시작하기(Get Started)"를 선택합니다.
b. 리포지토리 서비스로 GitHub를 선택하고 [계속(Continue)]을 선택합니다.
c. GitHub에 인증하고 Amplify 콘솔로 돌아갑니다. 앞에서 생성한 리포지토리와 마스터 브랜치를 선택한 후 [다음(Next)]을 선택합니다.
d. 기본 빌드 설정을 그대로 적용하고 [다음(Next)]을 선택합니다.
e. 최종 세부 정보를 검토하고 [저장 및 배포(Save and Deploy)]를 선택합니다.
f. AWS Amplify가 소스 코드를 빌드하고 앱을 https://...amplifyapp.com에 배포합니다.
g. 빌드가 완료되면 해당 썸네일을 선택하여 웹 앱이 실제로 시작 및 실행되는지 확인합니다.
-
코드 변경 사항 자동 배포
이 단계에서는 텍스트 편집기를 사용하여 코드를 약간 변경한 후 변경 사항을 앱의 마스터 브랜치에 푸시합니다.
a. src/App.js를 아래의 코드로 편집한 후 저장합니다.
import React from 'react'; import logo from './logo.svg'; import './App.css'; function App() { return ( <div className="App"> <header className="App-header"> <img src={logo} className="App-logo" alt="logo" /> <h1>Hello from V2</h1> </header> </div> ); } export default App;
b. 명령 프롬프트(Windows) 또는 터미널(macOS)에서 GitHub로 변경 사항을 푸시하여 새 빌드를 자동으로 시작합니다.
git add . git commit -m “changes for v2” git push origin master
c. 빌드가 완료되면 AWS Amplify 콘솔에서 해당 썸네일을 선택하여 업데이트된 앱을 확인합니다.