nginx를 사용해서 next.js 정적서빙 할 때 생긴 문제

next.js를 실행하는 방법은 아주 간단하다. next start 이 명령어로 끝나니까. 이렇게 하고 nginx 설정에서 리버스 프록시를 next.js로 설정하면 nginx와 연결하는것도 어렵지 않다.

 

그런데 정적서빙이 필요하다면? 나같은 경우는 SEO가 필요해서는 아니고 호스팅하는 서버에서 node.js를 사용하기 어려웠다. 그래서 정적 파일을 export해서 nginx나 apache를 사용해 서빙을 할 필요가 있었다.

 

next build 명령어를 통해 정적 파일을 export할 수 있는데 여기서 next.config의 수정이 필요하다.

// next.config.ts
import type { NextConfig } from "next"

const nextConfig: NextConfig = {
  // 해당 옵션이 필요함.
  output: "export",
}

export default nextConfig

 

물론 package.json에도 npm run build를 통해 next build를 할 수 있도록 만들어뒀다.

// package.json
{
   ...
  "scripts": {
    "build": "next build",
    ...
  },
}

npm run build하면 out디렉토리에 결과물이 들어간다. 이걸 docker의 nginx이미지로 빌드해서 테스트해봤다.

• docker run -d --name nginx-out-server -p 8080:80 -v $(pwd)/out:/usr/share/nginx/html:ro nginx

근데 문제가 생겼다. 개발할때는 /profile 라우팅으로 잘 접속됐는데 nginx로 서빙할때는 안된다. 사실 당연한 결과이다. nginx는 정적 파일만 서빙하는데 out 디렉토리는 아래와 같이 구성되어 있다.

그렇기 때문에 /profile.html 으로 접속해보면 잘 나오는걸 확인할수 있다. 그런데 html 확장자가 붙는건 내가 원하는 타입의 라우팅이 아니다. 이것도 해결할수 있는 방법이 있었다. 아래와 같이 next.config를 설정해준다.

// next.config.ts
import type { NextConfig } from "next"

const nextConfig: NextConfig = {
  output: "export",
  // trailingSlash 옵션을 설정해준다
  trailingSlash: true,
}

export default nextConfig

이렇게 설정하고 npm run build를 해주면 out 디렉토리가 아래와 같이 구성된다.

/profile 경로로도 잘 접속되는걸 확인할수 있다.