AWS Amplify 첫 배포일지

이번에 프로젝트를 배포하며 생겼던 이들과 그 과정에 대해 서술해보고자 합니다. 때는 프로젝트가 거의 마무리 되던 때였습니다. AWS를 거의 접해본 적이 없던 저는, 이번 기회에 AWS Amplify를 이용하여 배포를 해보고자 했습니다.

AWS Amplify

AWS 의 여러 서비스 중에서도 Amplify는 모바일 및 웹 어플리케이션 구축에 특화된 플랫폼입니다. 다만 독립적인 서비스는 아니고, 여러 다른 독립적인 서비스를 자동으로 생성하고 연결해 줍니다.

React, Angular, Vue 등 여러 웹 프레임워크를 지원하며, github에 연동하여 자동적으로 CI/CD를 구출할 수도 있습니다.

또 인증, 스토리지, 상호작용, 분석, AL/ML 예측 등의 여러가지 기능을 제공하기도 합니다.

배포 과정

배포 과정은 간단했습니다. UI가 매우 사용자 친화적으로 되어 있어서, 단순히 Git Repository를 연결하는 것 만으로 대부분의 세팅이 완료 되었습니다.

위 사진 처럼 공급자를 선택하고, 빌드 설정을 한 뒤에는 자동으로 빌드 검토 후 배포가 됩니다.

이후 Route53 을 통해 도메인을 설정할 수 있습니다.

리다이렉팅 문제

하지만 주소창에 주소를 직접 입력하여 접속하거나 리로드를 하게 되면 404 error가 나오는 현상이 발생했습니다.

이는 매우 찾기 어려웠던 문제인데, 우선 제 앱은 React + React Router 기반 앱이었습니다. 이 사실을 알고 설명해보겠습니다.

기본적으로 Amplify를 통해 배포된 서비스에서 사용자가 특정 경로로 가고자 하면 서버측에 해당 경로를 요청하게 됩니다. 하지만 기본적으로 React Router는 클라이언트의 경로만 제어할 수 있기 때문에 발생한 문제였습니다. 리다이렉팅 된 경로나 리로드를 하게 되면, 해당 경로를 요청하게 되지만, 서버에는 해당 경로에 대한 리디렉션이 설정되어 있지 않기 때문에 발생한 문제였던 겁니다.
즉 해결방법은 해당하는 리디렉션 규칙을 추가하는 것이었습니다.

source: </^[^.]+$|.(?!(css|gif|ico|jpg|js|png|txt|svg|woff|ttf)$)([^.]+$)/>
target: /index.html
type: 200

위와 같은 문구를 리디렉션 규칙에 추가 하는 것으로 문제를 해결하였습니다.

후기

기본적으로 Amplify는 아주 간편하게 서비스 배포를 할 수 있게 해주는 툴이지만, 그에 비례해 여러가지 단점이 있었습니다.

기본적으로 AWS에서 활발히 지원을 하지 않습니다.
- 사용자가 적은탓인지, 지원이 활발하지 않습니다.
- 위 문제와 맞물려 커뮤니티도 활성화 되어있지 않아 레퍼런스를 구하는 것도 힘듭니다.
디버깅이 힘듭니다
세부사항을 조정하기가 힘듭니다.
등등...

결론적으로 말하면 많은 부분에서 사용자의 짐을 덜고 편하게 배포할 수 있게 만드는 것은 맞지만, 대형 서비스에서 쓸만한 서비스는 아니라고 느꼈습니다. 소규모 프로젝트나 1인 프로젝트 등에서는 훌륭한 서비스지만, 규모가 커질수록 유지보수 측면에서 불리한 선택지라고 느껴지는 서비스 였습니다.