form post 요청을 통한 페이지를 위한 BFF 구축

프로젝트에서 form을 처리해주기 위해 SPA 서비스에 BFF를 구축해줘야할 필요가 생겼습니다.

해당 서버를 구축하는 과정을 적어보겠습니다.

구축 사유

프로젝트 출시가 얼마 남지 않을 상태에서 form post를 통해 페이지를 전달해줘야하는 일이 생겼습니다. 프로젝트를 갑자기 Next등 SSR 프레임워크를 이식하기엔 남은 기간이 너무 촉박해 node server로 BFF를 구축하기로 했습니다.

환경

언어 : nodejs, javascript, typescript

빌더: esbuild

frontend 빌드

배경

기존 프로젝트는 React Router Dom을 사용하고 있었습니다. 하지만 React Router Dom을 사용한다면 Form Post로 페이지를 여는 방식을 사용할 수가 없습니다. 해당 프로젝트의 경우 각 페이지가 새창으로 따로따로 열렸기에 굳이 SPA를 유지할 필요가 없었기에 Html을 분리해주었습니다.

방식

vite의 rollupOptions를 사용하게되면 여러개의 html을 생성할 수 있습니다.

// vite.config.ts
export default defineConfig(
...
 build: {
	 rollupOptions: {
		 input: {
			 page1: resolve(__dirname, 'page1.html'),
	 		 page2: resolve(__dirname, 'page2.html'),
 		 }
		 ...
	 }
 }
JavaScript
복사

Backend 빌드

배경

프론트엔드의 경우 vite를 통해서 빌드를 해주었지만 nodejs서버는 굳이 vite로 빌드를 해줄 필요가 없었기 때문에 esbuild를 통해서 빌드 스크립트를 작성했습니다.

방식

// esbuild.config.cjs
const { resolve } = require('path');
const { config } = require('dotenv');
const { commonjs } = require('@hyrious/esbuild-plugin-commonjs');

config({ path: resolve('.env') });

require('esbuild')
  .build({
    sourcemap: true,
    entryPoints: ['server/index.ts'],
    bundle: true,
    loader: { '.ts': 'ts' },
    platform: 'node',
    target: ['node18'],
    format: 'esm',
    outfile: 'source/index.js',
    plugins: [commonjs()],
    external: ['express', 'express-validator', 'cors', 'compression', 'dotenv'],
  })
  .then(() => console.log('⚡ Done'))
  .catch(() => process.exit(1));

JavaScript
복사

실행

배경

단순 node server만 사용했을 때에 비해 안정성을 높일 수 있을것이란 생각으로 pm2를 사용해 안정성을 높였습니다.

방식

// ecosystem.config.cjs
require('dotenv').config();
const { join, resolve } = require('path');

module.exports = {
  apps: [
    {
      name: 'name',
      script: join(resolve(), 'source/index.js'),
      interpreter: 'node',
      instances: 0,
      exec_mode: 'cluster',
      env: {
        PORT: process.env.PORT,
      },
    },
  ],
};
JavaScript
복사

// package.json
    "dev": "vite --port 5002",
    "dev:server": "tsx watch server/index.ts",
    "lint": "eslint . --ext ts,tsx --report-unused-disable-directives --max-warnings 0",
    "type-check": "tsc --noEmit",
    "start": "pm2-runtime start ecosystem.config.cjs",
    "log": "pm2 log",
    "list": "pm2 list",
    "kill": "pm2 kill",
JavaScript
복사