cPanel에 Next.js 애플리케이션 배포하기 - 초보자를 위한 완벽 가이드

2024-09-26 08:36:10

webdevnextjscpanelbeginners

소개

웹 애플리케이션 개발의 세계에서 Next.js는 많은 개발자들에게 사랑받는 프레임워크입니다. 서버 사이드 렌더링(SSR)과 정적 사이트 생성(SSG) 기능을 모두 지원하여 유연하게 사용할 수 있는 것이 큰 장점입니다. 하지만 개발자라면 언젠가는 자신의 애플리케이션을 실제 환경에 배포해야 한다는 과제가 주어질 것입니다. 특히 cPanel을 이용한 배포는 비기술적인 사용자에게도 친숙한 방법이어서, 이번 블로그에서는 Step-by-step 방식으로 Next.js를 cPanel에 배포하는 방법을 알아보겠습니다.

배경 및 필요성

cPanel은 많은 호스팅 서비스에서 제공하는 일반적인 관리 패널입니다. 사용자는 이 환경을 통해 웹사이트 관리, 파일 업로드, 데이터베이스 설정 등을 보다 간편하게 수행할 수 있습니다. 그러나 Next.js와 같은 현대적인 프레임워크는 전통적인 PHP 기반 호스팅 환경과는 차별화된 설정을 요구합니다. 따라서 "Next.js를 cPanel에 배포한다"는 것은 이전의 전통적인 웹 애플리케이션 배포와는 조금 다른 접근법을 필요로 합니다. 이러한 과정을 통해서 보다 많은 개발자들이 Next.js의 기능을 활용하고, 자신의 프로젝트를 실제로 운영할 수 있는 기회를 제공하고자 합니다.

핵심 내용

이번 글에서는 다음과 같은 단계로 cPanel에 Next.js 애플리케이션을 배포하는 방법을 설명합니다.

폴더 설정
cPanel에서 Node.js 설정
데이터베이스 및 사용자 설정
애플리케이션 세팅
배포 완료 확인

1. 폴더 설정

먼저, Next.js 프로젝트의 루트 디렉토리에 server.js 파일을 생성합니다. 이 파일은 Next.js의 커스텀 서버 설정을 담고 있습니다. 아래의 코드를 참고하여 server.js 파일을 작성합니다.

import { createServer } from "http";
import { parse } from "url";
import next from "next";

const port = parseInt(process.env.PORT || "3000", 10);
const dev = process.env.NODE_ENV !== "production";
const app = next({ dev });
const handle = app.getRequestHandler();

app.prepare().then(() => {
  createServer((req, res) => {
    const parsedUrl = parse(req.url, true);
    handle(req, res, parsedUrl);
  }).listen(port);

  console.log(
    `> Server listening at http://localhost:${port} as ${dev ? "development" : process.env.NODE_ENV}`
  );
});

이후 package.json 파일을 수정하여 아래의 스크립트를 추가합니다.

{
  "scripts": {
    "dev": "node server.js",
    "build": "next build",
    "start": "NODE_ENV=production node server.js"
  }
}

모든 설정이 완료되면 npm run build 명령을 실행하여 프로젝트 폴더를 준비합니다. 성공적으로 빌드가 완료되면 .next 폴더가 생성됩니다. 이후 노드 모듈을 제외한 모든 파일을 압축합니다. 이 때, Finder(맥) 또는 파일 관리자에서 숨긴 파일 설정을 확인하세요.

2. cPanel에서 Node.js 설정

이제 cPanel에 로그인하여 Node.js 설정을 시작합니다. 하위 도메인을 사용하고, 프로젝트의 루트 폴더를 nextjs-crud로 설정합니다. Node.js가 설정되면 로컬에서 준비한 파일들을 해당 폴더에 업로드합니다.

3. 데이터베이스 및 사용자 설정

이번 튜토리얼에서는 PostgreSQL을 사용하는 방법을 다룹니다. cPanel에서 데이터베이스와 사용자를 생성하고 필요한 권한을 설정합니다. 생성 후, 프로젝트의 .env 파일을 수정하여 올바른 데이터베이스 정보를 입력합니다.

DATABASE_URL=postgres://username:password@hostname:port/database

4. 애플리케이션 세팅

cPanel의 터미널 또는 SSH를 통해 다음과 같이 필요한 명령어를 실행합니다.

npm install
npx prisma db push

이 단계는 모든 종속성을 설치하고 데이터베이스를 설정하기 위한 것입니다.

5. 배포 완료 확인

모든 과정이 마무리되면 배포된 웹사이트에 접속하여 정상적으로 작동하는지 확인합니다. 여기서 설정한 URL을 통해 애플리케이션에 접속할 수 있습니다.

https://nextjs-crud.codesync.id/

예시

위에서 설명한 단계를 순서대로 수행하면, 본인의 Next.js 애플리케이션이 온라인에 성공적으로 배포됩니다. 예를 들어, https://nextjs-crud.codesync.id/contacts와 같은 URL로 접근하여 프로젝트의 기능을 확인할 수 있습니다.

결론

cPanel에 Next.js 애플리케이션을 배포하는 과정이 다소 복잡할 수 있지만, 각 단계를 세심하게 따르면 충분히 해낼 수 있습니다. 이 글이 시작하는 모든 개발자들에게 큰 도움이 되었으면 합니다. 추후 더 많은 자료를 통해 Next.js와 관련된 다양한 노하우와 팁을 공유할 계획입니다. 배포한 애플리케이션에 많은 트래픽이 생기기를 바랍니다!