풀 스택 React 애플리케이션 구축

구현

• 새 React 애플리케이션 생성

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

  npx create-react-app amplifyapp
  cd amplifyapp
  npm start

  Code snippet copied

  복사
• GitHub 리포지토리 초기화

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

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

  

  b. 새 터미널을 열고 앱의 루트 폴더(예: amplifyapp)로 다시 이동합니다.

  c. create-react-app을 사용하면 Git 리포지토리가 자동으로 초기화되고 초기 커밋이 수행됩니다. Git가 초기화되지 않은 기존 React 애플리케이션을 배포하려는 경우 계속하기 전에 다음 명령을 입력해야 합니다.

  git init
  git add .
  git commit -m "initial commit"

  Code snippet copied

  복사

  d. 컴퓨터에서 GitHub를 사용한 적이 없다면 계정 연결을 계속 허용하기 전에 이 단계를 따르세요.
  

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

  git remote add origin git@github.com:username/reponame.git
  git branch -M main
  git push -u origin main

  Code snippet copied

  복사
• AWS Management Console에 로그인합니다.

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

  

• AWS Amplify를 사용하여 앱 배포

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

  a. AWS Amplify 서비스 콘솔에서 Amplify Hosting 아래에 있는 시작하기를 선택합니다.
  

  

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

  

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

  

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

  

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

  

  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;

  Code snippet copied

  복사

  b. 명령 프롬프트(Windows) 또는 터미널(macOS)에서 GitHub로 변경 사항을 푸시하여 새 빌드를 자동으로 시작합니다. 

  git add .
  git commit -m “changes for v2”
  git push origin main

  Code snippet copied

  복사

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