[Next.js] Next.js 프로젝트 배포하기

Next.js는 여러 가지 방법으로 배포가 가능합니다.

대표적인 것들은 다음과 같습니다.

 

1. html, js, css 파일로 이루어진 정적 배포 파일을 만들어서 배포하는 방법

2. 직접 원격 서버(프로덕션 환경)에서 빌드된 파일을 실행시켜 웹 서버를 돌리는 방법

3. Vercel과 같은 서비스를 이용하여 github 등 저장소와 연동 후 자동으로 CI/CD의 이점을 얻는 방법

 

각 방법을 살펴보도록 하겠습니다.

 

1. 정적 파일로 배포

React 프로젝트를 배포하는 방법과 같습니다.

Deploying: Static Exports | Next.js

위의 Next.js 공식 문서에 자세히 나와 있지만, 정적 파일인 만큼 Next.js만의 고유한 기능에 제약이 있습니다.

 

• getServerSideProps처럼 서버 사이드에서 동작하는 함수는 사용이 불가합니다.
• 폴더 라우팅 방법 중 다이나믹 라우트(Dynamic Route)는 사용할 수 없습니다. 모든 페이지는 사전에 정의되어 있어야 합니다.

다이나믹 라우트란 개발자가 정한 라우팅 주소가 아닌, 사용자가 유동적으로 요청한 키워드를 통한 라우팅 방법입니다.

예를 들면 사용자가 hello라는 키워드를 input에 입력하고 검색 버튼을 누르면

http://localhost:3000/search/hello

라는 페이지가 작동하는 형식이지요.

 

• Next.js에서 기본적으로 제공하는 이미지를 최적화하는 기술이 작동하지 않습니다. 이 방법은 <Image> 컴포넌트를 통해 사용합니다. 다만 어디까지나 기본적으로 제공하는 기술만 못 쓴다 뿐이지 외부 서비스를 이용하면 최적화가 가능하다고 하네요. 공식 홈페이지에서는 Cloudinary라는 서비스를 소개하고 있습니다.

 

배포 방법

next.config.mjs에 다음과 같이 output: "export" 라는 요소를 추가해줍니다.

const nextConfig = {
    output: "export"
};

export default nextConfig;

이 이후 next build로 빌드하면 out 폴더 안에 빌드된 정적 파일들이 생성됩니다.

 

이 파일들을 원격 서버의 /project/nextjs에 올린다고 생각합니다.

server {
    listen 80;
    server_name doringri.co.kr;
    
    # doringri.co.kr/ 로 접속했을 때 페이지
    root /project/nextjs;
    
    # doringri.co.kr/login 으로 접속했을 때 페이지
    location /login {
        try_files /login.html /index.html 404;    # 파일명이 index.html이 아니라면 try_files
    }
}

nginx.conf에서 이런 식으로 페이지마다 라우팅 경로를 모두 등록해줘야 합니다.

 

여러모로 불편한 방법이 될 수 있겠네요. 하지만 가벼워서 서버 자원을 적게 사용하고, 모든 페이지가 미리 만들어져 있어서 페이지 로드 시간이 적어진다는 장점도 있습니다.

 

 

2. 프로덕션 환경에서 빌드 후 실행하여 배포

프로젝트를 모두(node_modules는 무거우니 제외) 원격지 서버에 올린 뒤, 서버에 nodejs와 npm을 설치합니다.

그리고 npm install로 node_modules를 깔아준 다음 npm run build로 빌드한 후 npm run start로 실행합니다.

그럼 로컬에서와 같이 기본적으로 3000번 포트에서 next.js가 실행됩니다.

server {
    listen 80;
    server_name doringri.co.kr;
    
    # doringri.co.kr/ 로 접속했을 때 페이지
    location / {
        proxy_pass http://localhost:3000;
    }
}

nginx.conf에서는 proxy_pass를 이용한 리버스 프록시로 내부에서 돌아가는 3000번 포트를 타도록 설정해줍니다.

 

 

3. Vercel로 배포

가장 쉽고 간편한 방법입니다.

 

Vercel 계정을 만들고 프로젝트를 만든 뒤, 해당 프로젝트와 git 레포지토리를 연결시켜 주기만 하면 알아서 next build를 통해 빌드, 실행까지 해 주고, 수정해서 push하면 하는 대로 자동으로 다시 빌드해서 배포합니다.

 

어느 정도 수준까지는 무료로 제공해 주기 때문에 트래픽이 적은 개인 / 소규모 프로젝트를 배포할 때 좋습니다.

 

 

 

 

---

요새 날씨가 왜 이렇게 덥죠?

인류멸망의 날도 머지않은 것일까요???

어쨌든 건강 조심하시길..

 

(틀린 정보는 정정해주시면 감사하겠습니다)