Next.js 프론트엔드 nginx로 배포하기
SSR은 왜... 그런건가요?
호기롭게 스스로 배포를 해보겠다고 선언헀다.
그동안은 다른 선임 개발자분이 맡아서 해주셨는데
어깨너머로 보니 할 수 있을 것 같았다.
물론 현실은 쉽지 않았지만...
이번 프로젝트의 어벤저스는 TypeScrip , Next , Yarn berry 이다.
참고로 나의 주력은 JS, React, yarn (1.0)이다.
나의 예상
1. Next는 리액트 프레임워크니까 쉽게 개발/적응 가능할 것이다
2. 그럼 TypeScript를 연습해봐야지
3. nginx 설정 파일을 복붙+수정한다
4. 개발이 끝나면 빌드된 최종 html파일을 nginx에 물린다
5. 배포 성공
하지만 단 하나도 예상대로 흘러가지 않았다.
가장 큰 패착은 익숙하지 않은 기술스택을 선택하였다는 것이었고,
SSR에 대한 이해없이 프로젝트를 구성했다는 것이다.
결론적으로 배포를 성공했지만, 스스로는 만족스럽지 않다.
내가 만난 이슈
1. 빌드가 왜 안돼...?
빌드를 하면 이런류의 메세지가 뜨면서 빌드가 중단되었다.
Type error: Property 'href' does not exist on type '{ name: string; }'.
왜 안돼?라고 적었지만 안되는 이유를 어렴풋이 안다.
타입스크립트가 바라는대로 사용했어야했는데, 나는 자바스크립트처럼 사용하고 있었다.
그렇다고 빌드를 안해줄거라고는 생각 못했다.
나는 배포테스트가 더 우선이었기 때문에 코드를 수정하고 있을 시간이 없었다.
결국엔 코드를 수정해야하겠지만, 데드라인이 일주일 남짓 남은 시점에서 우선순위가 아니라고 판단했다.
공식문서에 아래 옵션을 추가하면 저런 타입 체크하는 단계를 건너 뛸 수 있다고 나와있다.
2. 빌드는 성공했지만 index.html을 못찾겠다...
yarn build라는 명령어를 사용하면 .next라는 디렉토리가 생성된다.
리액트는 build 디렉토리가 생겼고 그 안에 idex.html이 있었는데
.next에는 아무리 찾아도 그런 파일이 없는 것이다.
ssr은 서버에서 html 문서를 보내주기 때문에 당연한 것이었다.
내가 nginx에 대한 깊은 이해가 있는 것도 아니고,
그리고 배포 방법을 내가 맘대로 변경할 수도 없기 때문에 멘붕에 빠졌다.
next는 vercel을 이용하여 배포하는게 일반적이고, 권장되는데 나는 아쉽게도 기존 배포 방법을 벗어날 수는 없었다. 여러가지 이유가 있었지만 가장 큰 이유는 팀버전은 무료가 아니었다.
결론적으로 나는 어떻게든 index.html을 찾아야한다는 결론에 이르렀다.
나는 이 블로그에서 도움을 받았는데, 공식문서에도 정적 배포할 수 있는 방법이 있었다.
next.config.js 파일에 저렇게 옵션을 추가하면 정적으로 배포된다.
(13으로 업데이트 되면서 next export 라는 명령어를 사용하지 않고 옵션 설정으로 변경되었다.)
그리고 다시 yarn build를 하면 이렇게 out이라는 디렉토리가 생성된다.
yarn start를 하면 out이라는 디렉토리가 생성된다.
그리고 out/index.html을 찾을 수 있었다!!!!! 이 디렉토리를 회사 리눅스 서버에 올리면 될 것 같다.
사실 기존 내 프로젝트는 동적 라우팅으로 구성되어 있었다. 예를들어 "/report/{코드번호}" 라는 주소에서 코드번호가 변경될 때마다 그에 맞는 html을 생성해야했는데 정적배포를 하면 생성되지 않는다. 그래서 url구조를 query를 포함하게 변경했다. "/report?code={코드번호}" 이렇게 변경하면 report.html 하나만 있어도 되기 때문이다.
결론만 요약하자만, 나는 정적배포를 선택했고 url을 쿼리스트링 형태로 변경해서 빌드했다.
3. nginx conf.d 파일 생성했는데, 왜 nginx 실행이 안되는걸까?
nginx의 디렉토리를 찾는 것부터 쉽지 않았다.
ubuntu APT 패키지를 통해서 설치했다면 /etc/nginx 디렉토리에 위치한다길래 확인해봤더니 있었다.
conf 파일을 추가/수정하는 것은 어렵지 않았다.
root만 제대로 설정해주고, 포트 번호만 변경해주면 되었으니까.
하지만 내가 생성하자마자 nginx 서버가 내려가버려서 당황했다....
포트 번호도 맞게 쓰고, 디렉토리 경로도 여러번이나 확인했는데,
선임 개발자분이 쓴 것과 1도 다르지 않은데 왜 나는 안되는거지...?
결론적으로는 중괄호 하나가 빠져있었다. :(
nginx -t 명령어로 무슨 문제인지 확인할 수 있는데 아래와 같은 오류를 확인했다.
0000/00/00 01:23:45 [emerg] 26092#26092: unexpected end of file, expecting "}" in /etc/nginx/conf.d/파일명.conf:30
nginx: configuration file /etc/nginx/nginx.conf test failed
이런걸보면 세상에서 가장 확인하기 어려운 디버깅이 괄호와 오타같다.
요약
next.config.js 파일을 아래와 같이 수정하고 yarn bulld를 입력하면 out, .next 디렉토리 2개가 생성된다.
out 디렉토리 안에 index.html 파일이 존재하고, 정적 배포여서 url 쿼리 형태로 라우팅 방법을 변경했다.
const nextConfig = {
output: 'export',
typescript: {
ignoreBuildErrors: true, // 빌드 중 에러를 무시
},
}
module.exports = nextConfig
