[AWS] Amplify

AWS에 웹앱을 호스팅하려면 어떻게 할까요? 지금까지 다룬 바로는, EC2에 node.js express 같은 웹 프레임워크 같은 것을 돌리고 elastic 웹앱을 호스팅했겠죠.

React 앱이라면 어땠을까요? React 앱을 빌드(npm run build)해서 생성된 정적인 파일들을 통째로 EC2에 올리고 live-server 같은 것으로 호스팅했을 거에요. 

이러한 과정은 빌드 파일들을 업로드하는 과정이 불편하기도 하고 javascript 소스 코드들이 그대로 노출될 수도 있어 찝찝한 기분이 듭니다. 게다가 로그인 권한 등을 적용, 관리하기도 어렵고 HTTPS 연결을 지원하려면 머리는 더 복잡해집니다.

 

AWS Amplify는 적어도 호스팅을 해주는 아주 요긴한 서비스인데요, 빌드하고 자시고 할 것 없이 명령 한 두 줄로 즉시 호스팅하고 소스 코드들이 노출될 위험이 적으며, AWS Cognito 같은 강력한 권한 관리 시스템과 연동되어 있으며 기본 HTTPS로 호스팅됩니다. 이 밖에 더 많은 장점들이 있겠지만, 이쯤되면 두말 할 나위 없이 AWS Amplify로 가야겠죠.

 

또 하나의 장점이라면, 어렵지 않다는 것. 튜토리얼도 잘 정리되어 있어서 구글링할 것 없이 아래 공식 튜토리얼만 한 번 따라하면 충분합니다.

https://docs.amplify.aws/start/q/integration/react/

심지어 여러가지 프로그래밍 언어도 지원하는데, 화면 상단 좌측 메뉴에서 React, Android, iOS 등 선택할 수 있습니다. 굉장하죠?

튜토리얼을 간략히 요약해 볼까요?

Prerequisites

• AWS 계정에서 AWS Amplify를 가입하고 개발 환경을 갖추는 부분입니다. 우리는 지금 우분투를 사용하고 있으니, NPM 기준으로 설치하면 되겠죠. 
• 이후 AdministratorAccess 권한, 즉 모든 권한을 가진 계정을 만들고 accessKeyId와 secretAccessKey를 따로 기억해둡니다. 이 계정은 Amplify 개발용 계정이에요.
• amplify configure 명령에 해당하죠.

Set up fullstack project

• 예제 React 앱을 만드는 과정이에요. 이미 만들어진 앱이 있다면, 해당 앱 폴더에서 amplify init으로 amplify/ 폴더를 생성하고 aws-amplify를 설치합니다. @aws-amplify/ui-react 도 소개하고 있는데, 로그인 화면 템플릿이에요. 끝내주죠.
• 마지막으로 src/index.js에 3줄만 추가하면 되는데, 이처럼 새(혹은 기존) React 앱에서 최소한의 추가만으로 Amplify화되므로 소스 코드 관리하기도 아주 용이하지요.
• 이때 생성된 src/aws-export.js를 열어보면 region, use_pool, cognito, s3_bucket 등 다양한 설정 값이 들어있습니다. 이 설정을 override하려면 Configuring Amplify Categories를 참고합니다.

Connect API and database to the app

• 여기는 조금 복잡해요. 백엔드 개념이 나오거든요. 우리 React 프론트엔드 앱이 그 자체로 모든 기능을 갖고 있다면 불필요한 내용입니다.
• 백엔드는 보통 Database를 연동하고 REST API 등으로 프론트엔드 앱이 필요한 정보를 CRUD(Create-Read-Update-Delete) 할 수 있는 구조인데요, 여기서는 GraphQL을 사용해서 생소할 수 있지만, REST API와 같은 맥락으로 보면 됩니다.
• amplify add api 하면 backend/ 폴더가 생기고 여기에 각종 API를 만들어 두는데요, GraphQL보다는 REST API가 친숙한 경우, 아래 페이지(Javascript REST API)를 참고하는 것이 좋습니다. 

https://docs.amplify.aws/guides/api-rest/node-api/q/platform/js/

• 특히 API를 하나하나 만드는 과정이 번거로울 때, express 웹 프레임워크를 사용해서 한번에 만드는 법도 나와있는데, 이때 순정 express가 아닌 amplify-serverless-express를 사용한다는 점이 특이하죠. 기존 express에 각종 Amplify 설정을 적용하여 확장한 듯, 사용법은 순정 express와 별반 다르지 않습니다.

Add authentication

• amplify add auth하고 amplify push하면 계정 권한 관리 시스템인 Amazon Cognito에 연동됩니다. 단언코 최고의 기능이죠. 게다가 @aws-amplify/ui-react를 이용해서 로그인 화면까지 즉시 사용할 수 있어요.
• 이처럼 @aws-amplify/ui-react의 withAuthenticator를 사용하면 사용자는 로그인을 해야만 웹앱을 만날 수 있게 됩니다.

Deploy and host app

• 모든 설정이 끝났다면, amplify add hosting 후 amplify push 해서 호스팅 준비를 마칩니다.
• 마지막으로 amplify publish하면 알아서 빌드/호스팅됩니다.
• 그래요, 이제부터는 amplify publish만 치면 됩니다.

 

여기서 문제. AWS Amplify에서 prisma 사용하려면?

가령 이미 개발을 마친 프로젝트를 AWS로 옮긴다고 가정할 때 prisma를 사용했다면, AWS Amplify에서는 prisma를 직접 사용할 수 없습니다. AWS Amplify에서는 쉘에서 npx prisma generate 같은 명령을 내리거나 PrismaClient 등을 사용할 수 없기 때문인데, PrismaCloud 같은 서비스도 보이긴 하지만, 기존 prisma를 그대로 import할 수 있는지는 모르겠네요.

 

이런 경우 backend를 포기하고 EC2에서 직접 backend를 구동하면서 prisma를 사용해야겠죠. 이런 과정에서 문제가 발생하기 시작합니다. 바로 https입니다. AWS Amplify가 알아서 HTTPS로 호스팅해주기 때문에 보안이 강해지지만, HTTPS의 S는 Secure, 즉 모든 연결이 Secure해야만 합니다. 이것을 위반하고 일부 secure하지 않은 연결이 있으면, Mixed Contents 문제가 발생하는데

이는 간단한 문제가 아니니, 다음 편에서 다루도록 합시다.

 

Tip. BrowserRouter - Rewrites

React 앱에서 BrowserRouter를 사용할 경우 로컬에서는 잘 돌지만, Access Denied가 됩니다. 아래 페이지를 참고해서 rewrites하면 잘 됩니다.

Using redirects - AWS Amplify