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"

 

 

 

---

 

25.08.20 추가 이슈

이번에는 Next.js 어플리케이션을 Amplify 로 배포하는 상황

 

(Amplify 도 개선이 많이 되어서 UI 가 좀 달라졌음)

 

핵심 문제는 .env 를 읽어오지 못하고 있는 것

 

특히 api/route.ts 라우트 함수에서 (즉 Next.js 서버단에서) 사용하는 env 를 읽어오지 못하고 있음

 

 

1. 환경변수에 필요한 env 를 세팅합니다.

 

 

2. 호스팅 - 빌드설정에서 amplify.yml 에서 직접 .env 를 주입하는 것으로 수정

 

version: 1
frontend:
  phases:
    preBuild:
      commands:
        - npm ci --cache .npm --prefer-offline
    build:
      commands:
        - echo "MY_ACCESS_KEY=$MY_ACCESS_KEY" >> .env
        - echo "MY_ENDPOINT=$MY_ENDPOINT" >> .env
        
        - npm run build
  artifacts:
    baseDirectory: .next
    files:
      - '**/*'
  cache:
    paths:
      - .next/cache/**/*
      - .npm/**/*