[AWS Amplify] vite로 빌드한 React 프로젝트 AWS로 배포하기 ( feat.프론트엔드 배포 )
이전에는 Github Action과 Vercel을 이용해 배포 자동화를 구현했는데,
AWS 서비스를 공부하면서 AWS 배포도 경험해보고 싶다고 생각했다.
프론트엔드 배포를 위해 복잡한 설정 없이 간편하게 무료로 배포를 할 수 있는 AWS 서비스인 AWS amplify를 이용해보려고 한다.
(AWS UI가 바뀌었는데 익숙해질 겸.. ㅎ)
✅ 배포 방법
1. 우선 AWS 콘솔에 amplify 검색!
AWS amplify를 클릭하면 아래와 같이 새 앱을 생성할 수 있는 버튼이 보인다.
(나는 이미 배포를 한 상태이기 때문에 하나의 앱이 만들어져 있다)
2. 앱 구축 시작!
우선 앱 배포를 위한 옵션을 선택할 수 있다.
나는 이미 깃허브에 배포를 위한 레포지토리가 만들어져 있었기 때문에 GitHub를 선택하고 바로 다음으로 넘어갔다.
다음으로 넘어가면 이렇게 깃허브 레포지토리 및 브랜치를 추가할 수 있는데, 이전에 깃 레포를 추가한 적이 없다면 GitHub 권한 업데이트 버튼을 눌러 특정 레포지토리의 특정 브랜치를 자유롭게 추가할 수 있다.
레포지토리를 선택하면 빌드 설정을 할 수 있다.
내 프로젝트의 경우 패키지매니저로 yarn을 사용했고 빌드 도구로 vite를 사용했기 때문에 빌드 명령은 yarn build, 빌드가 출력될 디렉토리는 dist로 입력해주었다.
고급 설정을 눌러 환경 변수를 설정해 줄 수도 있다.
내 프로젝트의 경우 서버 url을 VITE_API_BASE_URL 로 설정해놓았기 때문에 이를 키 값으로 놓고 url을 값으로 적어주었다.
❗❗ 이 때 yml 파일 편집을 눌러 baseDirectory가 dist인지 확인하기!
나는 아무 생각 없이 baseDirectory를 build로 해서 (build 디렉토리가 없는데 왜..) 배포할 때 자꾸 오류가 났었다.
3. 배포 완료!
검토를 해주고 저장 및 배포를 클릭하면 배포 끝!
✅ 트러블 슈팅
나는.. 10트 끝에 배포에 성공했다..
1. yarn.lock 버전 문제
처음에는 내 yarn 버전이 old 버전이기 때문에 버전 2의 lockfile을 설치할 수 없다는 에러가 떴다.
그래서 아래처럼 yml파일에 yarn self-update을 추가해주고 로컬 vscode에서도 새롭게 yarn install을 해서 yarn.lock을 새로 깔려고 했다. (여기서부터 재앙의 시작)
yaml 파일은 여기서 확인 가능하다
2. indentation (들여쓰기) 오류
yarn.lock을 로컬에서 새로 설치하고 push를 하니,, 전에 안 떴던 indentation 오류가 떴다.
처음에는 yml 파일의 들여쓰기 문제인가 해서 눈을 똥그랗게 뜨고 amplify.yml 파일을 하나하나 다시 작성했는데 계속해서
indentation 오류가 났다.
그리고 무엇보다.. yml 파일에는 dependencies 가 없었다! (바보..)
그래서 yml 파일 문제는 아니겠구나 하고 로컬의 yarn.lock파일을 살펴보았다.
14줄에 dependencies가 있는 걸로 보아 이 파일의 들여쓰기 문제가 맞는 걸 확인!
하지만 내가 봤을 때는 들여쓰기가 잘 되어있었고 들여쓰기도 탭이 아닌 공백으로 잘 채워져있었다.
그래서 이번에는 yarn.lock 파일을 삭제하고 yarn install을 터미널에 입력하여 아예 처음부터 다시 설치를 했다.
그랬더니 드디어 indentation 오류 메시지가 사라졌다!
3. Artifact directory에 build라는 디렉토리가 존재하지 않는다는 에러
당연하다..
나는 처음 배포할 때 base directory를 dist로 설정했기 때문에.. build라는 디렉토리는 없다.
하지만 이를 망각하고 indentation 문제를 해결하는 과정에서 yml 파일을 내 맘대로 build로 바꿨었다..
빠르게 yml 파일로 가서 base directory를 /dist로 설정하니 문제가 해결되었다!!
(만약 dist 파일이 생성되지 않았다면 yarn build를 터미널에 입력해보자)
4. postCSS 의존성 설치
프로젝트에서 postcss를 사용하고 있었는데, 이 패키지가 제공되지 않는다는 오류가 발생했다.
그래서 yarn add postcss 를 입력하여 해결했다.
배포 성공! 🎉🎉
AI 감정 분석 기반 일기 웹서비스이다!
