AWS로 프론트엔드 서버 배포하기 (feat. AWS Amplify)

프로젝트를 진행하면서 프론트 개발로 참여하던 도중 배포를 맡겠다고 자원했다.

 

기존에 다른 프로젝트를 했을때나 미니 프로젝트를 할때는 netlify나 vercel로 무료로 배포를 하는게 일반적이었다. 

(이외에 다른 방식으로 배포하는 사람은 주변에서 본 적이 없을정도로..)

그런데 배포 방식이 참 다양한데 매번 같은 걸로 배포하기엔 아쉽다는 생각이 들어 다른 방식을 고민하게 되었다.

또, 실무에선 보통 aws 서비스를 통한 배포 방법을 선택하기 때문에 (유저 트래픽이 많아지면 netlify같은 서비스는 감당이 힘들고, 서버 리전이 다른 나라에 있어 정적 파일을 서버로 요청하여 불러올 때 응답 속도가 느려 페이지나 이미지의 응답 속도가 느려 한국에서는 UX가 좋지 않다.는 말을 들었다.) 더더욱 다른 방법으로 배포해보고 싶다고 생각했다.

vercel은 서버리스 방식으로 cold start가 있어 EC2에 비해 5배 정도 느리다.

(유일한 단점이 있다면 소규모 프로젝트라면 무료인 vercel 이나 netlify를 선택하는 대신 유료인 aws를 선택하는 이유에 대한 장점이 크지 않다는 것..?)

 

나의 후보는 

1. Docker 

2. AWS EC2 

3. AWS S3 + CloudFront

4. AWS EC2 + Elastic Beanstalk

5. AWS Amplify

크게 이렇게 5가지를 알아봤다. 

 

2) EC2는 SAA딸때도 정말 수도없이 본 서비스고 예전에 간단한 사진등록 웹을 배포할때 사용해본적이 있는데

뭔가 프론트엔드 배포만 할건데 필요 이상으로 많은 설정을 해주어야 해서 고려 대상에서 제외했다.

Vercel처럼 서버리스로 작동하는게 필요했다.

 

3) S3는 AWS의 대표적인 Object Storage로 웹페이지가 정적 파일이라면 빠르게 불러올 수 있다는 장점이 있다.

다만 동적 콘텐츠를 처리할 수는 없기 때문에 내 프로젝트의 경우 CDN 서비스인 CloudFront를 같이 사용해야 한다.

 

4) 깃허브에서 CI를 자동화시켜주고 EC2 + Elastic Beanstalk 조합 사용

(Elastic Beanstalk: apache, Nginx 같은 서버에서 java,net,php, ruby, pythom,docker와 함께 개발된 웹 응용 프로그램 및 서비스를 배포하고 확장하기 쉬운 서비스다. EC2 인스턴스나 데이터베이스 같이 많은 것들을 포함한 "환경"을 구성하며 만들고 있는 소프트웨어를 업데이트할 때마다 자동으로 이 환경을 관리해준다.)

 

그런데 위 과정들을 모두 간소화 시켜서 프론트엔드 배포에 최적화 된 서비스가 Amplify라고 생각했다.

 

AWS Amplify

- 풀스택 서버리스 프레임워크. 프론트/백을 한번에 배포할 수 있다는 장점.

- React, Angular, Vue, Next.js, Gatsby, Hugo, Jekyll 등의 최신 웹 프레임워크를 지원(호스팅)

- 깃헙과 연동되어 특정 브랜치에 push가 들어오면 자동 재배포(CI/CD) 가능

- 프리 티어 12개월 지원 서비스

 

같은 장점이 있어서 Amplify로 사용을 결정하게 되었다.

(그런데 Amplify도 호스팅 시 내부적으로 s3, cloudfront를 사용해서 배포한다고 한다.!)

(도커는 백엔드와 개발환경을 맞출 수 있어서 고려하긴 했는데 당장은 Amplify의 장점이 더 커보여서 다음 기회로 보류했다)

그리고 처음에 ec2를 고려할때 백엔드 서버와 같은 aws 계정으로 돌리고 싶었는데

백엔드팀으로부터 프리 티어 때문에 새로운 계정을 파는게 좋을것 같다고 요청받았었다.

그런데 amplify를 사용하면 구축 및 빌드시에만 적용되는 월 1000분 초과시 pay-as-you-go를 제외하면

프론트 서버가 돌아가는데에는 비용이 들지 않는다는 엄청난 장점으로 Amplify를 선택하지 않을 이유가 없었다.

=> 빌드 1000분 채우기가 쉽지 않기 때문에 사실상 프리티어 기간동안은 무료라는 의미! 

(프리 티어가 ec2와도 별개로 적용되기 때문에 백엔드팀과 같은 aws 계정을 쓸 수 있게 된 것도 좋았다.)

---

본격적으로 Amplify를 콘솔을 통해 사용해보았다.

1. 소스코드 제공업체 선택

 

우리 프로젝트는 깃허브로 작업중이기 때문에 깃허브 선택.

2. 리포지토리 및 브랜치 추가

다음을 누르면 내 깃허브에서 어떤 오가니제이션/레포지토리를 연동할건지 선택하는 팝업창이 뜨고,

이후 브랜치까지 쉽게 선택해줄 수 있다.

 

3. 앱 설정

이제 빌드 설정을 해주어야 한다. 

빌드 명령은 프로젝트의 프레임워크에 따라 달라지는데, package.json에 정의된 빌드build 명령어를 참고할 수 있다.

내가 올리려는 프로젝트에서는 

yarn을 사용하고, 빌드 명령어가 vite build로 되어 있어서 다음과 같이 설정했다.

(yarn build를 하면 vite build를 실행하게 되고 최종 빌드 파일을 dist 디렉토리에 생성하게 된다)

 

추가적으로 아래에 Advanced setting에서 환경 변수 설정을 따로 해주면 된다.

나는 백엔드 서버만 추가해줬다.

 

4. 저장 및 배포

저장 및 배포를 클릭해주기만 하면 이렇게 바로 배포 로딩 창이 뜬다! 

배포가 완료되면 아래 나온 도메인으로 접속이 가능하다.

 

만약 도메인 연결을 따로 해주고 싶다면 Route53(AWS DNS 서비스)에서 도메인 설정을 해준뒤 Amplify 좌측 콘솔에서 도메인 설정을 통해 변경해줄 수 있다.

 

---

TroubleShooting 1 ) 배포 안됨

라고 쉽게 말했지만~~~ 처음 배포 버튼을 눌렀을때 배포 실패(배포 취소됨)가 떴다. 왜지?! 

콘솔의 모니터링 섹션에서 로그를 확인해보았다. 

404 코드가 뜬걸 보니 배포된 파일을 찾을 수 없거나 올바르게 배포되지 않았다. (후자일거같다)

그래서 build 로그도 확인해보았다.

아!! 

package.json을 찾을 수 없다고해서 확인해보니 내가 설정해준 브랜치에서 bookduck이란 폴더로 한번 더 들어가야 패키지 파일이 존재했다. 그래서 yml 파일을

이렇게 bookduck으로 이동하여 작업하도록 수정해줬다. 

 

헤헤 이렇게 해주니 배포성공!! 

 

TroubleShooting 2 ) push 시 자동 재배포 안됨

원래 main 브랜치에 push가 일어나면 자동으로 재배포가 되어야 하는걸로 알고있는데.. 재배포가 되지 않고 있다.

push 전 main 브랜치 실행 모습

dev 브랜치에서 따로 작업을 해왔기 때문에 main으로 push 전 배포를 처음 하고 도메인 주소를 입력하면 이렇게 실행되었다.

그런데 dev 브랜치를 merge하고 push했는데도 자동으로 재배포가 이루어지지 않았다. (원래는 귀여운 오리 페이지가 나와야한다.)

 

물론 내가 수동으로 재배포 버튼을 눌러주면 바로 반영될 일이지만..

내가 Amplify를 선택한 이유중에 하나는 push 시 자동 재배포 기능이 큰 지분을 차지했기 때문에 이 문제를 해결하고 싶었다.

 

근데 분명 브랜치 설정에서 자동 빌드 관련 설정을 활성화 시켰음에도 불구하고.. 왜 재배포가 자동으로 이루어지지 않는지 이해가 안됐다.

유일한 의심점은 내가 main 브랜치에서 git merge dev 이후 git push origin main을 해주었는데 그래서 git에서 마지막 업데이트가 4일전이라고 뜨고있다. 이거때문인가?? .. 

깃허브 웹훅을 확인해봐도 push가 일어날 시 정상적으로 아마존으로 넘어가고 있다고 뜬다.

 

++) 

 

테스트 용으로 파일 하나 수정 후 push 해본 결과 배포가 자동으로 이루어지고 있다! merge를 해서 커밋 업데이트가 안됐던게 문제였던 것이다!! 다시 dev merge후 push하니까 자동 재배포 되는걸보니 일시적 오류였나보다.

 

그리고 이외에도 서버 문제는 아니지만 로컬에서 잡히지 않다가 배포하면서 걸리는 오류들이 꽤 많았다. 이 친구들에 대한 트슛도 진행하다보니 시간이 꽤나 걸렸지만 이건 나의 문제였기 때문에 ..^^ 오류만 잘 해결해준다면 vercel보다 서빙 속도가 빠르면서 깃헙 자동 재배포까지 되는게 참 매력적인 서비스이고 안쓸 이유가 없는것 같다!