Nextjs 배포 문제

netlify에 Nextjs 프로젝트를 배포하는 과정에서 배포가 되지 않는 문제가 발생하였다.

 

첫 번째 시도

 

React나 Vue를 netlify에 배포를 할 경우 _redirects 파일을 생성하여 이동 경로를 잡아주었었다.

그래서 Nextjs에서도 동일한 방법으로 해주면 될 줄 알았는데 실패..

그래서 찾던 중에 _redirects 파일을 생성하는 대신 next.config.js 안에 rewrite() 를 설정을 해주어 배포하라는 글을 보게되어 배포해보았아.

이전에는 build 자체가 되지 않았었는데 이번엔 build를 성공했고, 배포까지 정상적으로 이루어졌으나 라우터 문제는 그대로 해결되지 않았다..

 

module.exports = {
  async rewrites() {
    return [
      {
        source: "/",
        destination: "/",
      },
      {
        source: "/quizzes",
        destination: "/quizzes",
      },
    ];
  },
        .
        .
        .
}

 

이 rewrites는 말 그대로 source에 명시된 경로를 destination에 명시한 경로로 변경해주는 것이다 보니 현재의 이슈와 상관이 없다고 생각이 들었다.

그래서 rewrites를 지우고 public 디렉토리에 _redirects 파일을 생성하고 그 안에 루트 경로를 지정해주었다.

 

// public > _redirects


/* /index.html 200

 

어림없지... 🤬

 

 

두 번째 시도

 

첫 번째 시도로 해결이 되지 않아 좀 더 찾아보았다.

netlify 에서 SSR 또는 SSG 를 사용한 페이지가 있다면 SPA에서 하던 방식대로 배포를 할 경우 페이지를 못 불러온다고 한다.

 

그래서 이 부분을 도와주는 라이브러리가 존재했다.

 

https://www.npmjs.com/package/@netlify/plugin-nextjs

 

npm i -D @netlify/plugin-nextjs

 

설치 후 루트 위치에 netlify.toml 파일을 생성해주었다.

 

# netlify.toml 파일

[build]
    base = ""
    command = "npm run build"
    publish = ".next"

[[redirects]]
    from = "/*"
    to = "/index.html"
    status = 200

[[plugins]]
    package = "@netlify/plugin-nextjs"

 

하지만 netlify.toml 파일을 생성한 후로 build 조차 되지 않았다..

 

 

deploy config가 문제인 것 같아 deploy 설정을 변경해주었다.

 

[build]
    base = ""
    command = "next build"  # npm run build -> next bulid 로 변경
    publish = ".next"

[[redirects]]
    from = "/*"
    to = "/index.html"
    status = 200

[[plugins]]
    package = "@netlify/plugin-nextjs"

 

그리고 동일하게 netlify 사이트 내에서도 deploy 설정을 변경해주었다.

 

 

Build Command를 npm run build 에서 next build 로변경하고 설레는 마음을 갖고 build를 해보는데 성공~~👏👏

 

 

배포까지 완료됐고 바로 사이트를 들어가서 확인해보았다.

하지만 날 반기는건 여전히 안된다는 Page Not Found.....🤬🤬🤬🤬🤬🤬🤬🤬🤬🤬🤬🤬

 

 

다시...netlify.toml 파일을 변경

 

[build]
    command = "next build"
    base = "/client"
    publish = "/.next"

[[plugins]]
    package = "@netlify/plugin-nextjs"

 

왜 안될까 생각을 해보다가 build 된 디렉토리를 살펴보는데 아무리 찾아봐도 index.html 이 보이지 않는데 _redirects 에서는 index.html 을 명시해줬고.. 왠지 이 파일이 문제가 되는 것 같다..

 

💡 netlify.toml
루트 위치에 netlify.toml 파일을 생성했었다.이 파일은 netlify 사이트 내의 deploy setting 과 동일한 역할을 하게 된다.그래서 만약 프로젝트 내의 netlify.toml 파일을 생성했다면 사이트 내의 deploy는 아무런 의미가 없게 된다.
(프로젝트 내의 netlify.toml 파일로 덮어씌워지기 때문)
plugins 또한 netlify console 에서 설치 가능하다.

 

해당 이슈는 netlify와 전혀 상관없는 단지 내가 잘못작성한 코드 때문이였다..🤣 (역시 내가 문제지)

 

일단 사이트를 / 로 진입했을 때 접속이 가능했다. (화면 또한 보여짐)

화면이 보여진다는건 build 된 디렉토리를 잘 찾아간것이고 그럼 경로는 맞다는 것.

그리고 network 탭을 열어 확인해 보았을 때 초기 불러오는 경로 또한 정상적인 URL 로 진입하게 된다.

 

근데 페이지에 문제가 생겨 /quizzes 가 사라진 채로 리다이렉트 (status code 304) 되고있었다.

내가 만든 파일 중에 강제로 리다이렉트 시키는 파일은 middleware.ts 뿐인데 왠지 이게 계속 경로를 바꿔주는것 같았다.

 

import {NextFetchEvent, NextRequest, NextResponse} from 'next/server';
import {getToken} from 'next-auth/jwt';

const secret = process.env.NEXT_PUBLIC_SECRET_KEY;

export async function middleware(req: NextRequest, event: NextFetchEvent): Promise<Response> {
  try {
    const token = await getToken({req, secret, raw: true});
    const {pathname} = req.nextUrl
    const confirmedUrl = ['/quizzes']
    if (!confirmedUrl.includes(pathname)) {
      const url = req.nextUrl.clone();
      url.pathname = '/'
      if (token)
        return NextResponse.next();
      else
        return NextResponse.redirect(new URL(url, req.url));
    }
    return middleware(req, event);
  } catch (e) {
    return NextResponse.redirect(new URL('/404', req.url));
  }
}

// MARK: 미들웨어를 실행시켜야할 경로 추가
export const config = {
  matcher: ['/quizzes/:path*'],
}

 

해당 파일을 삭제하고 다시 배포해보았더니 URL이 정상적으로 바뀌는 것을 확인할 수 있었다.

다만 서버 에러가 발생하여 퀴즈 리스트가 불러와지지 않아 또 삽질을 하는건가 했지만~

 

 

배포된 환경에서 localhost 가 짜잔~!!~!

 

 

 

middleware 파일은 필요하기 때문에 뭐가 문제였는지 확인해보았는데

일단 SECRET_KEY 가 서로 일치하지 않았다.

 

// middleware.ts
const secret = process.env.NEXT_PUBLIC_SECRET_KEY;

// [...nextauth].ts
 secret: process.env.NEXT_PUBLIC_OAUTH_SECRET

 

서로 다른 키로 되어있었다.😏

 

(근데 왜 로컬에서는 문제가 없었니.....??)

 

---

정리

 

1. redirects 에러 (Page Not Found)

SPA 프로젝트를 build 했을 때는 index.html 있던 반면에

Nextjs 프로젝트를 build를 할 경우 index.html 파일이 없다. (export 해도 마찬가지)

또한 network 탭에서 페이지 URL 을 확인해보면 domain/_next/data/[filename].json와 같이 javascript 파일이 json 파일이 되어 읽혀지는 것을 알 수 있었다.

 

# Nextjs URL
localhost:3000/_next/data/quizzes.json?size=5

# React URL
localhost:3000/quizzes?size=5

 

이 부분을 보고 next build 환경에서는 흔히 생각했던 경로로 설정하면 안되는구나 라는 생각을 하게 되었고 next build 관련된 글을 찾아보았다.

 

next의 경우 build가 되면 pages 내의 js 파일들이 json 형태로 불러와져 웹팩과 바벨의 도움으로 페이지 경로를 찾아간다고 한다.

(힌트를 얻었던 글이 있었는데 어디였는지 까먹었다...😶)

 

그렇기 때문에  redirects 경로를 index.html로 했기 때문에 올바른 경로로 찾아가지 못했던 것. 

 

 

2. netlify plugins를 사용하는 이유

페이지 내의 SSR 또는 SSG 를 사용하지 않았다면 build 하는데 문제가 되지 않는다. 

하지만 한 페이지라도 사용한 부분이 있다면 build가 되지 않는다.

그래서 서버 환경도 build가 되도록 도와주는 플러그인이다.

 

3. 정적 배포

 

이건 이번 이슈와 관련은 없지만 찾아보니 알게 된 것.

Nextjs에서 정적 페이지를 배포하더라도 React에서 배포했던 방식처럼 단순히 deploy 설정만 해준다고 되는건 아니라고 한다.

next build는 SSR과 SSG 까지 묶여 있는 파일을 내보내는 것이고 (.next), 정적 페이지를 사용하려면 export next를 통하여 정적 페이지를 따로 내보내줘야한다. (별다른 설정을 하지않았다면 out 디렉토리 생성됨)

 

# package.json
{
    .
    .
    .
  "scripts": {
    "build": "next build && next export",
  }
    .
    .
}

 

 

 

Reference

https://www.oooooroblog.com/posts/4-nextjs-to-netlify

getServerSideProps를 사용하는 Next.js 프로젝트를 Netlify에 배포하기

 

https://ui-log.github.io/docs/SEO/2022-11-28-Netlify%EC%97%90-Nextjs-%ED%94%84%EB%A1%9C%EC%A0%9D%ED%8A%B8-out-%EB%94%94%EB%A0%89%ED%86%A0%EB%A6%AC%EB%A1%9C-%EB%B0%B0%ED%8F%AC%ED%95%98%EB%8A%94-%EB%B0%A9%EB%B2%95/#publish-directory-%E1%84%87%E1%85%A7%E1%86%AB%E1%84%80%E1%85%A7%E1%86%BC

Netlify에 Nextjs 프로젝트 배포하는 두 가지 방법 (.next , out) | ui-log

 

 

https://medium.com/@finn.woelm/how-to-deploy-nextjs-on-netlify-with-server-side-rendering-9e8c06a06e77

How to deploy NextJS on Netlify (with Server-Side Rendering)