AWS Amplify를 이용하여 기존의 react app 배포하기

 

아마존 요금 현황을 확인하니, 잘 사용하지 않는 react 사이트가 ec2 위에 올려져서 계속 돈을 먹는 것을 보았다. 서비스 운영에 필요한 사이트이나 자주 쓰는 사이트는 아니지만 꼭 필요한 사이트이기 때문에 배포 방식을 바꿀 필요가 있었다. 그래서 이것저것 찾아보던 중, 나의 요구사항에 잘 맞는 AWS Amplify라는 서비스를 알게 되었다. (배포 방식의 간편화, 사이트 이용량이 많지 않은 사이트) 그래서 Amplify를 이용해서 react app을 배포할려고 한다.

 

AWS Ampliy

---

먼저 Amplify부터 알아보고 가자. Amplify는 AWS에서 출시한 모바일 앱 개발에 대하여 다양한 기능을 제공하는 프레임워크이다. 말만 들으면 뭐가 뭔지 모르겠다. 예시를 들어 보자.

 

 

1. 여러가지 플랫폼 및 프레임워크 지원

 

하단에 있는 amplify doc를 보면 리액트, 뷰, ios, 안드로이드, 플러터 등의 다양한 프레임워크 및 플랫폼을 지원하는 것을 알 수 있다. 이러한 앱들을 제작할 때 amplify에서 제공하는 다양한 기능들을 기본적으로 제공받을 수 있다.

 

2. 기본적으로 제공하는 다양한 기능

 

별 게 다 지원이 된다. 유저 인증, 스토리지, graphql API, AI/ML 예측, Pubsub, 통계 등 다양한 Tool이 있다. 예를 들어 나같은 경우에는 Pubsub을 구축하려고 Redis를 따로 설치하고, 샤딩 및 백업을 설정하고, WAS와 연동하는 등의 일련의 불편한 과정들을 경험한 적이 있는데, Amplify에서 기본적으로 제공하는 것이다. 이런 점은 상당히 매력적으로 볼 수 있다.

 

Amplify가 위와 같은 기능도 제공하고, react 및 vue같은 웹 앱 같은 경우에는 github와 연동하여 CI/CD 기능을 손쉽게 구축까지 할 수 있다. 먼저 사용해보고 이렇게 극단적으로 편리해도 되나 싶은 생각이 많이 들었다.

 

하지만 이와 비슷한 서비스로 이미 Google의 firebase가 존재하고, 오랫동안 자리를 지켜 왔다. 그래서 간단하게 특징을 정리해 보았다.

 

Amplify

• GraphQL API를 지원한다.
• PubSub 같은 실시간 소켓 통신 API 지원한다.
• 풀스택 CI/CD를 제공한다. (Github와 연동할 수 있어 확장에 용이)
• 다양한 기능을 제공하나, 프리티어가 지나면 요금이 나간다

Firebase

• 출시한지 시간이 많이 지나서 자료가 많다.
• FCM을 통해 모바일로 푸쉬 메시지를 보내는 기능이 있다. (강력하다)
• 간단한 앱을 제작할 때 매우 좋다. 
• 적당한 사용량에서는 계속 무료로 이용이 가능하나, 사용량이 늘어나면 비용이 많이 든다.

 

이러한 프레임워크들은 공통적으로 서비스의 빠른 출시를 위한 다양한 도구를 제공해서 제품이 빨리 출시될 수 있게 도와주나, 일정 스케일을 벗어나게 되면 비용이 많이 증가하게 되고, 그때 운영중인 서비스 도구들을 바꾸려고 하면 많은 시간이 들게 된다. 서비스의 규모를 생각해서 본인에게 적절한 프레임워크를 사용하면 좋을 것 같다.

 

배포하기

---

 

배포도 너무 간단하다. 일단  Amplify 콘솔에 들어간 후 웹 앱 호스팅을 누른다. 이후에 github에 올린 코드를 불러온다. 

 

github repo와 branch를 선택한다.

 

이후에는 yml파일을 확인하자. react app을 실행할 때를 생각하면 된다. yarn install로 패키지들을 다운받고 (npm ci가 조금 더 낫다.) build 이후, build된 파일을 호스팅하는 방식이다. yml에 들어갈 내용은 다음 페이지에 상세히 나와있다.

https://docs.aws.amazon.com/amplify/latest/userguide/build-settings.html

Configuring build settings - AWS Amplify Hosting

 

설정이 완료되면 알아서 빌드 배포까지 해준다. (HTTPS로 호스팅해 주어서 상당히 편함.) 여기서 해당 branch에 새 commit이 업데이트 되면 다시 배포까지 해준다. (본인의 도메인이 있다면 해당 도메인으로 연결할 수 있다. 직관적으로 찾을 수 있으니 이 포스팅에서는 생략)

 

어떤 서비스가 Amplify 호스팅에 사용되는지 궁금해서 찾아보니, S3와 Lambda에 함수가 추가된 것으로 보아 Lambda 기반의 서비스인 것 같아 보였다.

 

정리

---

이렇게까지 react app 호스팅이 쉬워도 되나 싶을 정도로 간편했다. github에 코드를 올리기만 해도 자동으로 빌드, 배포, 호스팅까지 해주니 무섭기까지 했다. 만약 react app을 빠르고 쉽게 배포할려고 하면 Amplify는 좋은 선택인 것 같아 보인다. 

 

참고 링크

https://docs.amplify.aws/

Amplify Framework Docs

 

https://blog.back4app.com/aws-amplify-vs-google-firebase/#:~:text=AWS%20Amplify%20is%20an%20open,%2C%20fully%20managed%2C%20and%20scalable.