Next.js 배포

NCloud Platform

• 프로젝트 기간동안 사용할 수 있는 ncp 무료 크레딧이 있어서, 여러 설정이 용이하도록 직접 배포하였다.
• 이전에 몇 번 배포 경험이 있어서, 이번 기회에 CI / CD까지 직접해볼 수 있는 좋은 기회라는 생각이 들었다.

배포 과정

• 평소에도 배포할 때 github을 ssh key로 연결했기 때문에, CI / CD를 진행한다고 해도 큰 차이는 없었다.
• 인스턴스를 생성하고, ACG를 통해서 사용할 port를 열어준 뒤 인스턴스를 띄웠다.
• 이후에 nvm을 통해 node를 설치하고, ssh key를 통해 github을 연결하여 github에서 코드를 받아서 배포할 수 있었다.

BFF (Backend For Frontend)

• 이번 프로젝트에서 NGinx 서버가 별도로 있지만 클라이언트의 서버를 띄운 이유는 Next.js의 SSR을 위해서였다.
• Next.js에서의 SSR은 HTTP 요청이 들어왔을 때, 필요한 HTML을 서버에서 렌더링해서 응답해주는 방식인데 이를 위해서는 BFF가 필요하다.
• 이를 통해서 클라이언트 기기에 덜 의존적인 렌더링이 가능하며, 여러 보안적인 이점도 있다.

Next.js CI / CD를 위해 산넘고 물건너기

push 이벤트 감지 안됨

꿀잠 잘 기대에 가득찬 CI / CD

• 기대에 가득 차서 push를 했지만, 어림도 없지 push 이벤트는 동작하지 않았다.

이 문제는 잠시 뒤로 미룹시다.

• workflow dispatch 명령어를 yaml 파일에 추가하여 수동으로 먼저 동작했다.
• 수동으로 job 동작을 확인한 뒤, 여러가지 실험을 진행했다.

문제 해결

• 알고보니 이벤트가 발생하는 해당 브랜치에도 workflow 폴더와 yaml 파일이 있어야했다.
• 이를 통해 해결되었다.

github actions에서만 npm이 없다고 뜨는 에러

고난의 시작

• 수동으로 job 동작을 확인하는데, npm이 없다는 에러가 떴다.

원인 파악 - nvm 제거 후 nodejs 수동 설치

• 이전 트러블 때, github actions에서 nvm의 nodejs에는 접근을 할 수 없었다.
• 이를 위해 nvm의 nodejs를 삭제하고, 따로 nodejs를 직접 설치해야했다.
• 이를 통해 nodejs에 접근이 가능해지고, npm install이 정상적으로 동작하는 걸 확인하였다.

다시 찾아온 문제 - nvm 환경변수

• 갑자기 pm2가 동작하지 않았다.
• 확인해보니 클라우드 서버에서는 pm2가 npm global로 설정이 되어있었다.
• github actions에서 npm ls -g를 찍어보니 pm2가 없었다.
• 다시 조사해보니 nvm에서 설정해둔 $PATH 환경변수가 남아있었다.
• bashrc에서 $PATH 환경변수를 지우고 putty를 재실행해서 환경변수를 초기화하였다.

문제 해결

• 이후 nvm의 $PATH가 아닌 새로 설치한 nodejs의 $PATH가 되며 해결되었다.