6월 8일 - Elastic Beanstalk next.js

원래 React 서버 사이드 공부하려고 했는데 대충 원리는 파악했으니 굳이 똑같이 따라해볼 필요는 없을 거 같아서 next.js를 elastic beanstalk에 배포하는 걸 해보려고 한다. 오늘도 파이팅 ~

 

이 글을 참고했습니다. https://blog.rhostem.com/posts/2019-09-01-deploy-next-app-to-eb

 

Next.js 프로젝트 생성

1. npm init

2. npm install react react-dom next

3. pages 폴더 생성 및 index.jsx 파일 추가 

4. package.json 파일에 있는 script 내용 변경

Next.js에 typescript 적용

1. npm install --save-dev typescript @types/react @types/node

이 명령어를 치면 자동으로 tsconfig.json 파일이 디폴트 옵션으로 생성된다.

 

Elastic Beanstalk에 배포

참고한 글과 다른 부분만 자세히? 적었다.

 

1. eb cli 설치

2. git 저장소 초기화

3. next.js 앱 설치(위에서 했음)

4. 프로젝트 폴더에서 eb init을 입력한다.

나오는 문항에 따라 입력한다. (레포랑 브랜치는 뭘 의미하는지 몰라서 디폴트로 설정한 다음에 참고한 글과 동일하게 null로 수정했다.)

 

5. 'eb create' 대신 aws elastic beanstalk에서 새로운 환경을 만든다. 

 

(빨간 글씨는 무시해 주세요)

 

 

6. .ebignore 파일 추가

7. next.js 앱의 실행 포트를 8080으로 변경

참고한 글에는 8081이라고 되어 있는데 node 환경에 따라서 디폴트 포트 번호가 달라지는 듯하다. 아래 링크를 보면 잘 이해가 되지는 않지만 아무튼 8081, 8080 버전?이 나뉘어져 있는 것 같다.

https://docs.aws.amazon.com/ko_kr/elasticbeanstalk/latest/dg/nodejs-platform-proxy.html

프록시 서버 구성 - AWS Elastic Beanstalk

나머지는 모두 동일하다.

 

---

진짜 너무 화나서 그냥 포기할까 싶었는데 다행히도 됐다. ㅠㅠ 

정말 딱 배포만 한 거라서 아직 수정할 부분이 많다. 

내일 할일

- .next 폴더가 gitignore 안 먹히는 이유 찾기

- 배포 사이클 점검 + pacage.json script 점검

- config.yml 파일에 있는 레포, 브랜치 무슨 의미인지 찾기

- https://github.com/vercel/next.js/issues/1588 요 에러 파악