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 리포지토리를 생성합니다(링크).

    Front End GitHub Repository Module 1

    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를 선택하여 서비스 콘솔을 엽니다.

    Front End AWS Console Find Amplify Module 1
  • AWS Amplify를 사용하여 앱 배포

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

    a. AWS Amplify 서비스 콘솔에서 [배포(Deploy)] 아래에 있는 "시작하기(Get Started)"를 선택합니다.

    Front End Amplify Deploy Module 1

    b. 리포지토리 서비스로 GitHub를 선택하고 [계속(Continue)]을 선택합니다.

    Front End Amplify GitHub Module 1.png

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

    Front End GitHub Add Repository Module 1.png

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

    Front End GitHub Add Repository2 Module 1.png

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

    Front End GitHub Add Repository3 Module 1.png

    f. AWS Amplify가 소스 코드를 빌드하고 앱을 https://...amplifyapp.com에 배포합니다.

    Front End Amplify Deploy Source Module 1

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

    Front End Initial App Module 1
  • 코드 변경 사항 자동 배포

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

    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 콘솔에서 해당 썸네일을 선택하여 업데이트된 앱을 확인합니다.

    Front End HelloV2 App Module 1

결론

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

다음으로, 앱의 로컬 버전을 만들어 개발을 계속 진행하고 새 기능을 추가해보겠습니다.

이 모듈이 유용했습니까?

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

로컬 앱 초기화