NEXT JS 배포 어떻게 하시나요?

NEXT JS 배포 어떻게 하시나요?

NEXT JS는 SSR,SSG,ISR 등등 기능을 제공해주기 때문에
일반적인 CSR 프론트엔드 배포와는 다르게 배포를 해야 할 수도 있습니다.

일반적인 CSR 프론트엔드 배포가 뭔데?

react로 예시를 들자면 개발완료가 되었다면
빌드를 통해 dist혹은build 폴더가 생성되곤합니다.
해당 폴더에 있는 정적파일들을
AWS의 s3를 이용해서 배포하는 방법도 있고
FTP를 통해 서버에 접속하여 업로드하여 배포하는 방법도 있습니다.

(자세한 CSR 프론트엔드 배포는 설명하지 않겠습니다.)

NEXT JS는 어떻게 배포해요?

1. serverless를 사용하는 Faas(Functions as a Service)를 이용한다.
   가장 대표적으로 Vercel이 있습니다.
2. 서버를 배포하는것처럼 서버를 하나 빌려서 서버에다 빌드된 파일을 실행시키자.
   가장 대표적으로는 AWS의 EC2가 있습니다.

처음에 저는 배포가 매우 쉬운 1번을 이용해서 배포했습니다.
혼자 공부한것을 배포하기도 편하고 개인이사용하면 무료기 때문에 좋다고 생각했습니다.
하지만 피플팀에 소속되고
저희 피플팀에서는 AWS를 이용하고 있었기 때문에 AWS 기능을 이용해서 배포해야만 했습니다.
AWS에서도 serverless로 동작하는 amplify라는 서비스가 있었고,
vercel과같이 저장소만 연결하면 알아서 CI/CD도 연결돼서 개발에 편리함이 있었습니다.

AWS amplify의 문제점

작년 12월부터 올해 2월 까지는 이직을 준비했는데요,
면접을 보는도중 이런질문을 받았습니다.

면접관 : NEXT JS를 AWS amplify를 이용해서 배포하셨네요?? 굳이 amplify를 사용하신 이유가 무엇인가요?
나 : 팀에서 devops부분은 AWS를 이용하고 있는데 amplify를 이용하면 CI/CD도 자동으로 지원해주고
PR하나당 PR이 적용된 테스트 url을 발급해줘서 내가 개발한것이 잘 적용되었는지 확인하기도 편해서 사용했습니다.
면접관 : 아 그러면 혹시 사용하시다가 무슨 문제점이 있지 않았나요? 저도 사용해봤었는데 문제가 발생해서 vercel로 옮겼습니다.
나 : 네..? (멍... 뭐지.. amplify가 유명하지 않은건가..??) 모르겠습니다.
면접관 : 제가 알기론 지역을 미국 버지니아 북부로 설정을 변경하지 못해서
파일 내부 static 이미지들이 캐싱되기전에는 이미지가 늦게 나오는 문제점이 있습니다.
나 : 어 저는 그런문제점을 발견하지 못했습니다.
면접관 : 정말요? 확실한건가요? @@님도 개발하면서 발견하실 수 밖에 없을텐데요?
나 : 음.. 일단 저는 크게 인식하지 못했습니다.
면접관 : 음 .. 무조건 경험하셨을텐데..네 알겠습니다.

이런 면접을 경험한적이 있습니다.
해당 면접이 있고 다시한번 확인해보니 확실히 정적 이미지파일이 늦게 불러와지는것을 볼 수 있었습니다.

제가 웹뷰부분을 개발하고 있었는데 웹뷰를 적용해서 그냥 늦게 나오는건가? 하고 대수롭지 않게 생각해서 인식을 하지 못했던것같습니다. 지금 생각하니 참 부끄럽네요..🥲

그래서 무엇으로 배포했나?

AWS의 elasticbeanstalk 서비스를 이용해서 배포를 했습니다.
EC2도 이용할 수 있었지만 서버 개발을 할때 EC2로 배포를 많이 해봐서 조금 다른것으로 해보고 싶었고
배포가 조금더 편하다고 생각해서 EB를 선택했습니다.

그래서 무엇을 만들었나?

https://pple.link
헌혈 참여 플랫폼인 피플의 웹사이트를 개발하여 배포했습니다.
(배포한지 얼마 되지않아 계속 버그가 나타날때마다 수정하고 있습니다.. 😂)
이번 개발로 인해 많은것을 경험했습니다.
(도메인이전,배포,도메인연결 등등)
역시 개발은 일단해봐야 배워가는게 많은것같네요.
글 읽어주셔서 감사합니다.