[Node.js] webpack 을 통한 Node.js express 서버 build

STEVELOPER·2023년 4월 7일
0

Node.js

목록 보기
9/9

Nest.js 등 기본적으로 build 를 제공하는 서버 프레임워크도 있지만
나 같은 경우 생짜로 Node.js 서버를 생성해서 build 를 직접 해야했다.
webpack 을 사용할 경우 특정 파일 확장자에 따라 등등 규칙을 지정해 하나의 파일 또는 단순화된 형태로 난독화를 해주어 build 를 할 수 있다.

우선 npm 으로 webpack 을 install 한다.

npm install -D webpack webpack-cli

webpack.config.js 를 작성한다.

const nodeExternals = require("webpack-node-externals");
const path = require("path");

module.exports = {
  mode: "production",
  entry: {
    bundle: path.resolve(__dirname, "index.js"),
  },
  output: {
    path: path.resolve(__dirname, "build"),
    filename: "bundle.js",
  },
  module: {
    rules: [
      {
        test: /\.js$/,
        use: {
          loader: "babel-loader",
          options: {
            presets: ["@babel/preset-env"],
          },
        },
        exclude: /node_modules/,
      },
    ],
  },
  target: "node",
  externalsPresets: {
    node: true,
  },
  externals: [nodeExternals()],
};

아주 간단한 webpack 설정 파일이다.

mode 는 webpack 방식으로 development 와 production 이 있는데
development 는 production 에 비해 비교적 이해하기 쉬울 정도로 bundle 화 한다고 한다.

entry 는 bundle 화 할 때 시작하는 파일을 지정한다.

output 은 bundle 화 된 파일의 위치와 이름을 지정한다.

module 의 rules 부분에서 test 는 난독화시 처리할 대상 파일의 규칙을 지정한다.
정규표현식을 통해 해당 정규표현식에 해당하는 모든 파일이 같은 처리 방식을 따르게 된다.
es6 방식을 처리하기 위해 use 에서 babel-loader 를 사용했고 option 으로 @babel/preset-env 를 사용하여 파일을 변환하도록 설정했다.
이 때 방대한 크기인 node_modules 폴더는 제외하도록 설정했다.
html 이나 css 등도 처리할 수 있다.

하기 부분은 module 의 rules 부분에서 지정을 해도 node_modules 폴더가 제대로 제외되지 않는 현상을 해결하기 위해 설정했다.

...
target: "node",
externalsPresets: {
  node: true,
},
externals: [nodeExternals()],

nodeExternals 함수의 경우 npm 패키지인 webpack-node-externals 를 install 하면 된다.

npm install -D webpack-node-externals

이외에도 bundle 화 시 문제가 발생하면 webpack 에서 에러를 알려주므로 차근차근 필요한 것들을 설치하면 제대로 bundle 화 시킬 수 있다.

마지막으로 bundle 화 를 실행한다.

npx webpack

output 에 지정한 위치에 bundle.js 파일이 생성되는 것을 확인할 수 있다.
외부 또는 다른 위치에서 해당 bundle 을 실행 시키려면 package.json 로 npm install 을 하여 node_modules 를 생성한 다음 실행시켜야 제대로 작동한다.
만약 webpack.config.js 의 rules 등에 지정하지 않은 파일의 확장자가 있다면, 예를 들어 .env 와 같은 파일들이 있다면 이 파일들 또한 같이 이동해서 실행해야한다.

결과적으로 build 된 server bundle 을 다른 위치에서 실행한다면
구조는 하기와 같을 것이다.
┌ bundle.js
├ node_modules/
├ package.json
└ .env

cf)
나의 경우 실행은 pm2 를 통해 실행했으며, ecosystem.config.js 사용했다.

npm install -g pm2
//ecosystem.config.js
module.exports = {
  apps: [
    {
      name: "server", // 실행 프로세스 이름
      script: "./bundle.js", // 실행 파일명
      instances: 8, // 프로세스 수
      exec_mode: "cluster", // 실행 모드
      merge_logs: true, // 로그 병합
      cron_restart: "0 6 * * *", // 재시작 시간 설정
      watch: false,
      instance_var: "INSTANCE_ID",
    },
  ],
};
profile
JavaScript, Node.js, Express, React, React Native, GraphQL, Apollo, Prisma, MySQL

0개의 댓글