[DEV] 프로그램 배포 설정 및 code test용 github action 추가

[falconlee236]

Summary

코드를 변경했습니다.
CI / CD 환경을 구축했습니다.

• CI는 github action으로 구축했습니다.
• CD는 jenkins로 구축했습니다.
• 배포는 aws ec2에 완료했습니다.

Description

코드 변경사항

1. next.js에서 next/images를 사용할 때, dev 환경에서 사용하는 image 압축 프로그램인 sqoosh 대신에 실제 production 단계에서는 sharp라는 압축 프로그램을 사용하는데 그 sharp 패키지를 설치했습니다.
2. 서버에서 카카오 인가코드를 가져올때 query string에 있는 값을 추출해야 하는데 필요한 useSearchParams를 사용할 때 , suspense라는 컴포넌트로 감싸주지 않아서 build error가 발생했고, 그 부분을 수정했습니다.
   -> next js에서 정의햔 규칙이라고 하네요. useSearchParams 를 사용하면 CSR을 하게 되는데 그때 렌더링 될 동안 필요한 페이지를 정의해달라고 부탁하는 것 같습니다.

CI - github action

github action으로 CI작업을 수행합니다.

1. build, lint 작업을 해보고 에러가 나면 CI가 중단되어 PR을 올릴 수 없습니다.
2. 모든 테스트를 통과하면 Jenkins를 호출해서 CD 를 수행합니다.

CD - Jenkins

1. 제 서버에 있는 .env를 jenkins contiainer로 복사합니다.
2. 파일을 docker image로 build합니다
3. 이미지를 dockerhub에 push 합니다.
4. 서버에 원격 접속에서 push한 이미지를 pull합니다.
5. 기존 컨테이너를 삭제합니다.
6. 새로운 이미지로 컨테이너를 생성합니다.
7. 기존 이미지를 삭제합니다.

주의사항

• 이제 build 할 때 마다 build check가 들어가는데, 에러가 날때마다 담당자 issue만들어서 해결하도록 하겠습니다. @ldh019 @1lsang @causyj

참고자료

https://nextjs.org/docs/messages/sharp-missing-in-production
https://nextjs.org/docs/messages/missing-suspense-with-csr-bailout
https://devnm.tistory.com/m/38
https://velog.io/@chamny20/TIL-Suspense-%EC%95%8C%EC%95%84%EB%B3%B4%EA%B8%B0-%EA%B7%B8%EB%A6%AC%EA%B3%A0-Next.js-useSearchParams

[yugenius0213]

우왓 너무 고생많으셨습니다 ~~
서버 켜지는대로 수정해서 PR 올리겠습니다 !!

[yymin1022]

조와요
Docker 컨테이너 오픈할 때 3030 포트만 열면 되는거 확인했습니다~