Hello, World!
세상과 소통하는 개발자의 이야기
Design. 수민 / cc. 경희

[ React 블로그 개발 ] 7. AWS amplify + React( Vite + React + Ts ) 블로그 배포

2025-09-12

AWS Amplify로 React 앱 손쉽게 배포하기

1. AWS Amplify란?

AWS Amplify는 프론트엔드와 백엔드를 빠르고 쉽게 배포할 수 있게 도와주는 Amazon Web Services의 개발 플랫폼입니다.

  • 호스팅/배포: 정적 웹사이트(React, Vue 등)와 서버리스 백엔드 배포 지원
  • CI/CD: Git 연동을 통한 자동 배포 제공
  • 무료 티어: 작은 프로젝트나 학습용으로 무료로 시작 가능

2. 사전 준비

  • AWS 계정 (무료 계정 가능)
  • Github(또는 Bitbucket, GitLab) 저장소에 React 프로젝트가 푸시되어 있어야 함
  • 기본적인 React 프로젝트(예: CRA, Vite 등) 준비

3. Amplify로 배포하기 (Step by Step)

3.1. AWS Amplify 콘솔 접속

  1. AWS Amplify 콘솔로 이동
  2. "앱 배포 시작하기(Start a new app)" 클릭

3.2. 배포 방식 선택

  • "호스팅 배포(Host web app)" 선택

3.3. 소스 코드 저장소 연동

  1. Github/Bitbucket/GitLab 계정 연동 (최초 1회만 필요)
  2. 배포할 저장소와 브랜치 선택

3.4. 빌드 설정

  • Amplify가 자동으로 React 프로젝트를 감지하고, 기본 빌드 명령어(npm run build)와 디렉토리(build/)를 세팅해줍니다.
  • 필요하다면 빌드 명령어, 아웃풋 폴더 등 직접 수정 가능

3.5. 배포 시작

  • "저장 및 배포(Save and deploy)" 클릭
  • Amplify가 자동으로 코드를 클론, 빌드, 배포까지 진행

4. 배포 완료 & 접속

  • 배포가 끝나면 "도메인(URL)" 이 생성됨 예시: https://main.randomid.amplifyapp.com
  • 이 주소로 접속하면 내 React 앱이 바로 배포된 것을 확인 가능

5. 추가 기능 및 관리 팁

  • 소스 저장소에 커밋이 발생하면 자동으로 재배포(CI/CD)
  • 커스텀 도메인 연결 가능 (ex. myblog.com)
  • Amplify 콘솔에서 빌드 로그, 배포 이력, 환경변수 관리 가능
  • 환경변수 설정, 분기별 배포, 백엔드 연동 등 고급 기능도 지원

6. 주의사항 및 팁

  • 무료 티어 내에서는 소규모 프로젝트에 적합, 트래픽이 많으면 비용 발생에 유의
  • 서버사이드 렌더링(SSR)은 Next.js 지원 등 별도 설정 필요
  • 빌드/배포 오류 시 로그를 잘 확인하세요

7. 실전 연습

  • AWS에서 AWS Amplify를 검색해줍니다.

  • “새 앱 생성”을 누릅니다.

  • 저희는 GitHub에 소스가 있으니 GitHub를 선택해줍니다.

  • 저희가 만든 Git Repository를 선택해줍니다.

  • 브랜치는 기본 main (릴리즈 버전의 소스가 푸시된 브랜치)

  • package.json에서 빌드 명령어를 바꾸지 않으셨다면 설정 변경 없이 진행하시면 됩니다.

  • 마지막으로 선택한 내용을 검토해보시고 저장 및 배포를 누르면 끝입니다!

  • 배포가 완료되었다면 하단의 도메인을 눌러 접속해봅시다.

참고