[Next.js] Amplify 찍먹 배포 해보기

---

1. Amplify 호스팅 할 앱 생성

https://ap-northeast-2.console.aws.amazon.com/amplify/home?region=ap-northeast-2&code=3d6edd4336b9ce08098d#/home

https://ap-northeast-2.console.aws.amazon.com/amplify/home?region=ap-northeast-2&code=3d6edd4336b9ce08098d#/home

# Amplify Hosting 선택하여 시작

Amplify Hosting

# 호스팅할 소스코드 선택

소스코드 선택 창

# (Github 경우) 레포지토리 및 브랜치 추가

3번 레포지토리 선택

깃허브를 이용하여 호스팅 하는 경우 배포할 레포지토리 선택,

이때 레포지토리에 가지고 있는 권한에 따라 선택되지 않는 레포지토리가 있을 수 있다.

 

# 빌드 설정 구성

4번 빌드 상세 설정

빌드 상세 설정 정보를 입력해준다. 

• 앱이름 : Amplify 앱 리스트에서 보이는 이름
• 서비스 역할 : 리소스 접근을 위한 서비스 역할을 선택해주어야 한다. 서비스 역할이 없다면, 선택창 아래의 새 역할 생성 버튼을 눌러 이미 필요한 정책이 선택된 상태로 쉽게 만들 수 있다. 서비스 역할을 만드는 Identity and Access Management(IAM)는 AWS 리소스에 대한 액세스 관리의 역할을 한다.
• 빌드설정빌드 설정 :  자동으로 Amplify가 감지하여 적절한 빌드 설정을 만들어준다. 

# 검토

5번 설정 확인 및 배포

입력한 설정들을 확인하고 저장 및 배포를 눌러 배포한다.

 

# 배포 확인

배포 완료

별도의 설정 없이 Amplify가 자동으로 CI/CD 설정을 해주기 때문에 설정한 브랜치에 push 하게 되면 자동으로 배포가 이루어진다.

최초에 배포된 url은 https://deploy.amplifyappid.amplifyapp.com과 같이 만들어지며, 이는 custom domain 설정을 통해 변경 할 수 있다.

 

---

2. SSR 설정과 각종 에러

배포 후 웹사이트 확인 시 서버 사이드 랜더링이 작동하지 않는다던가, 페이지가 보이지 않는다던가 하는 문제들은 1번 레퍼런스를 참고하면 대부분 해결되었다.

 

# 문제 발생했던 부분

 

- 배포 후 페이지가 제대로 나오지 않음
문서에 나와있는 "Your output directory is overridden" 부분의 문제였다.

next.config.js에 distDir: 'build' 설정이 되어 있어 배포 설정이 덮어 씌워져 발생하는 문제였으므로, 해당 코드를 제거하여 해결

 

- 페이지 502 에러

커스텀 도메인을 연결하고, 리다이렉트가 잘 되지 않는 것 같아 이것저것 만져보다가 완전히 망가트려버렸다.

잘 나오던 페이지가 갑자기 나오지 않고, 404가 떴다가, 502가 떴다가 난리였다.

AWS에서 소개하는 502 에러는 다양했는데 나의 502 에러는 내용을 읽어보니 cloudfront로부터 배포된 데이터가 잘 전달되지 않았다는 내용인 것 같았다. 

문서에서 cloudfront와 관련한 에러 내용이 있나 찾아보니 "Your app is missing the rewrite rule for CloudFront SSR distributions"로 설명하고 있는 부분에 해당되는 문제였다. cloudfront로 배포 데이터가 전달되기 위해서는 아래와 같이 설정해주어야 했다.

redirect 설정

cloudfront에 들어가서 해당 앱을 배포한 cloudfront의 배포 도메인 이름 앞에 붙은 값을 복사하여 넣어주어서 해결했다.

cloudfront > 배포 > 배포된 내 앱

 

- redirect가 안됨

위에서 페이지가 안보이던 에러를 해결하고,. co.kr =>. com으로 리다이렉트 하는 작업을 하는데, 아무리 리다이렉트 설정을 해놔도 작동하지 않았다. 설마 싶어서 아래에 추가됐던 리다이렉션 코드들의 위치를 위로 옮겨주었더니 작동했다.
어이없는 잘못이었다. 이러한 내용은 Amplify redirection 문서에 나와있었다. 
"리디렉션은 목록의 맨 위에서 아래로 실행됩니다."

🙃

 

 

Reference

1. Deploy and host server-side rendered apps with Amplify
https://docs.aws.amazon.com/ko_kr/amplify/latest/userguide/server-side-rendering-amplify.html#deploy-nextjs-app

Deploy and host server-side rendered apps with Amplify - AWS Amplify

2. 
https://docs.amplify.aws/guides/hosting/nextjs/q/platform/js/#adding-amplify-hosting-1

https://docs.amplify.aws/guides/hosting/nextjs/q/platform/js/#adding-amplify-hosting-1

3. Using redirects
https://docs.aws.amazon.com/ko_kr/amplify/latest/userguide/redirects.html

Using redirects - AWS Amplify