• Home
  • About
    • Pieces for Studying photo

      Pieces for Studying

      Moon is a minimal, one column jekyll theme.

    • Learn More
    • Email
    • LinkedIn
    • Github
  • Posts
    • All Posts
    • Baekjoon
    • CS231N
    • Study
  • Projects

[AWS] Amplify를 이용한 React App 배포

28 Nov 2020

Reading time ~1 minute

Amplify란 ?

정적 페이지를 구축, 배포 및 호스팅 하기 위한 AWS 서비스 입니다. Amplify를 Git repo에 연결 시 코드가 커밋될 때마다 자동으로 빌드 및 배포가 가능합니다.

1. 리액트 앱 만들기

간단히 CRA(create react app)을 사용해 리엑트 앱을 쉽게 만들 수 있습니다.

npx create-react-app MYAPP

2. Github repository에 연결

Github repository에 연결하고 코드를 커밋합니다.

cd MYAPP
git add .
git commit -m "first commit"
git remote add origin REPOSITORY_URL
git push origin master

3. 리엑트 앱 배포하기

이제 리엑트 앱 생성과 코드를 github에 올렸습니다. 이제 AWS Amplify를 이용해 어플리케이션을 배포합니다.

먼저, AWS Management Console을 열어 Amplify 를 검색하여, 들어갑니다.

다음과 같이, 오른쪽의 Host your web app에 Get started를 누릅니다. get started

그다음 Github를 선택하여, 아까 만든 repository와 브랜치를 선택하고, 저장 및 배를 누르면 AWS Amplify가 코드를 빌드하여 배포합니다.

deploy

4. 리액트 앱 실행

다음과 같이 배포까지 완료되면, 앱을 https://main.amplifyapp.com 에서 실행할 수 있습니다. deploy

5. Amplify-cli를 이용한 로컬 앱 초기화

amplify를 로컬 개발 환경으로 가져와서, 인증 기능이나 API 추가 등 새 기능을 추가할 수 있습니다.

먼저, CLI를 설치합니다.

npm install -g @aws-amplify/cli

다음 명령어로 amplify cli 환경 설정을 진행합니다.

amplify configure

이후, 콘솔에 따라 진행합니다. 먼저 region을 설정하고, IAM 사용자 추가를 함으로써 로컬 환경에서 Amplify 앱 관리를 할 수 있게 해줍니다. 이후 발급받은 Key를 이용해 터미널에서 인증을 진행하면 환경 설정이 끝납니다.

이후 터미널 환경에서 CLI를 통해 여러가지 기능 추가가 가능합니다.



study Share Tweet +1