AWS amplify 로 React 배포하기 (+ blank 빈 페이지 보이는 에러 잡기)

npx create-react-app

create-react-app으로 설치한 리액트 앱 레포지토리는 빌드 설정을 webpack 을 따로 설정해 주지 않아도 된다.

 

AWS amplify는 풀스택 애플리케이션 구축, 배송 및 호스팅 지원하는 솔루션이다

 

그동안 클라우드 컴퓨터 생성을 위해 리눅스 서버를 하나 생성하고, 서버를 관리하는 방식으로 배포를 했다면,

 

그냥 github page 나 vercel 등 과 같이 레포지토리만 지정하고, 빌드 스크립트만 등록하면 알아서 배포를 다해준다

 

작업 방식은 공식문서나 제야에 널려있으니 참고

https://aws.amazon.com/ko/amplify/

풀 스택 개발 - 웹 및 모바일 앱 - AWS Amplify

 

 

배포를 잘~ 해놓고 나서 내가 직면한 문제는,

 

모든 스크립트도 다 잘 가져왔는데, 빈 화면만 뜨는 것이었다.

 

관련해서 구글링을 좀 해보았다.

 

여러가지 에러 케이스 중 나와 동일한 케이스를 찾았고, 그에 따른 해결 방법을 찾았다.

https://medium.com/@siddhantahire98/how-to-fix-the-blank-screen-after-a-static-deployment-with-create-react-app-2e76983a5d5d

How to fix the Blank screen After a Static Deployment with create-react-app

 

 

 

Network 탭과 Source 탭을 보면 소스는 정상적으로 받아져 왔다

 

CheckPoint

빌드 결과물에

 

✅ index.html도 경로는 절대경로로 설정 되어야 있어야함

<Link 태그의 href="/static/~">

 

 

 

✅ package.json에서 homepage 값 수정

amplify 에서 받은 host주소를 작성해야함

"homepage" : "https://myapp.test.com"