[AWS] amplify (vite + react + ts) 배포 트러블슈팅

PWA로 간단한 토이프로젝트를 하나 진행하는 과정에서 AWS의 amplify를 사용해보았습니다.

제가 AWS amplify를 선택한 이유는

1. CI/CD가 기본적으로 적용 되어있다.
2. 풀스택 애플리케이션을 구축할 수 있다.
3. SSL인증서 적용과 Domain설정이 간편하다

크게 위 세가지의 이유입니다.

 

기존에는 ec2 인스턴스를 이용하여 서버에 직접 호스팅하는 방법을 사용해왔습니다.

그렇기 때문에 인스턴스를 만들고 세팅하고 배포 과정을 자동화시키는 과정이 조금 번거로웠는데 amplify는 그러한 과정을 간단히 줄여줄 수 있다는 것이 큰 매력으로 다가왔습니다.

 

아래부터는 amplify로 프론트엔드 애플리케이션을 배포하는 과정에서 일어난 일들에 대해 일자별로 트러블 슈팅한 내용을 작성해 두겠습니다.

 

2022-09-19

vite, react, ts 세 가지의 스택을 동시에 사용해보는 경험은 처음이여서 로컬에서 많이 삽질을 해보았다고 생각한 뒤에 배포를 진행했었지만 amplify에 직접 배포하는 과정에서 빌드를 하였을때 "styled-components", "react-is" .. 등등 여러가지의 패키지들이

 

relative references must start with either / ./ or ../ . node module

 

위의 이유로 빌드에 실패하였다.

 

원인을 찾아본 결과 node버전에 대한 문제라는걸 깨달았고 amplify에서 node버전을 바꾼뒤 다시 빌드를 진행하니 해결 되었습니다.

 

amplify-cli로 프로젝트를 만들지 않고 aws 웹에서 생성을 하였기 때문에 앱 설정에서 빌드설정에서 amplify.yml을 수정할 수 있었습니다.

 

사용할 수 있는 node의 버전은 amplify의 도커가 프로비저닝되는 로그를 확인해 보면

 

AWS amplify docker Provisioning Framework Versions ENV

위 그림처럼 프레임워크의 버전이 환경변수로 전달되는 것을 확인할 수 있었고

 

AWS amplify amplify.yml

amplify는 nvm을 사용해 node버전을 관리한다는 글을 보고 위 그림처럼 frontend의 preBuild phase에서 nvm을 사용해 node버전을 가장 최신버전인 17버전으로 업그레이드해 주었습니다.