NextJS Custom Server 구축하기

NextJS를 사용해서 채팅 웹을 구현하려고 SocKetIO 예제를 보다가 Custom Server를 알게 되었습니다.

SocKetIO 글: https://socket.io/how-to/use-with-nextjs NextJS Custom Server 글: https://nextjs.org/docs/pages/building-your-application/configuring/custom-server

NextJS Custom Server 예제: https://github.com/vercel/next.js/tree/canary/examples/custom-server

Custom Server를 사용하면 middleware, NextAuth, LuciaAuth를 사용해서 구현 했던 로그인 코드를 수정해야 하고, 따라서 가능하면 Custom Server를 구축하기 보다는 가능하면 NextJS를 그대로 사용하는게 좋다고 생각했습니다.

저의 경우에는 채팅 서버를 구축하기 위해서 Socket io와 결합을 Custom Server를 구축하려고 했던 것인데 Custom Server를 사용하지 않는 방법도 있다는 것을 찾았습니다. 따라서 글을 작성해서 남기지만 Custom Server를 사용하지는 않을 거 같습니다.

저는 예제를 그대로 사용 했습니다.

tsconfig.server.json 파일 생성 및 작성

{
  "extends": "./tsconfig.json",
  "compilerOptions": {
    "module": "commonjs",
    "outDir": "dist",
    "lib": [
      "es2019"
    ],
    "target": "es2019",
    "isolatedModules": false,
    "noEmit": false,
  },
  "include": [
    "src/server/**/*.ts",
  ]
}

server.js 파일 생성 및 작성

tsconfig.server.json 파일에 include 부분에 해당 파일을 포함 시켜야 합니다.

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
    }`,
  );
});

nodemon.json 파일 생성 및 작성

{
  "watch": ["src/server/main.ts"],
  "exec": "ts-node --project tsconfig.server.json src/server/main.ts",
  "ext": "js ts"
}

cross-env 패키지 설치

npm i cross-env

package.json 파일 scripts 부분 수정

"scripts": {
    "dev": "nodemon",
    "build": "next build && tsc --project tsconfig.server.json",
    "start": "cross-env NODE_ENV=production node dist/main.js",
    ...
}

감사합니다.