🎯 단위 테스트부터 컨테이너화, 로컬 클러스터 배포까지 전 과정을 자동화합니다.

📗 Today I Learned

단위 테스트

단위 테스트는 각각의 함수나 메서드 등 최소 단위의 코드 조각이 의도한 대로 작동하는지 독립적으로 확인하는 테스트입니다.

백엔드의 경우 DB, 쿠키, 인증 등 외부 상태와 연결되어 있는 경우가 많아 Mocking(진짜 데이터 대신, 테스트용으로 만든 가짜 데이터나 동작을 사용하는 것)이 중요합니다.

BE 단위 테스트

라이브러리 설치

npm install cookie-parser jsonwebtoken
npm install --save-dev jest ts-jest supertest @types/jest @types/supertest @types/jsonwebtoken @types/cookie-parser

BE 파일 구성

📁 backend
├── 📁 src                     # 메인 소스코드
│   ├── 📁 models              # 실제 모델 정의 (DB 연동)
│   │   └── user.ts
│   ├── 📁 models/__mocks__    # 테스트용 mock 모델
│   │   └── user.ts
│   ├── 📁 middlewares         # 인증 등의 미들웨어
│   │   └── authentication.ts
│   ├── 📁 routes              # API 라우트 및 테스트 파일
│   │   ├── users.ts          # 실제 users 라우터
│   │   └── users.test.ts     # 해당 라우터에 대한 테스트
│   ├── app.ts                # express 앱 설정
│   └── server.ts             # 서버 실행부 (선택사항)
├── 📄 jest.config.js         # Jest 설정
├── 📄 tsconfig.json          # TypeScript 설정
├── 📄 package.json           # 의존성 및 스크립트
├── 📄 Makefile               # 테스트 자동화 명령어

설정 파일

• jest.config.js : Jest 테스트 실행을 위한 설정 파일

/** @type {import('ts-jest').JestConfigWithTsJest} */
module.exports = {
  preset: "ts-jest", // TypeScript 기반 설정
  testEnvironment: "node", // Node.js 환경에서 테스트 실행
};

• tsconfig.json

{
  "compilerOptions": {
    // 생략
  },
  "include": ["src"],
  "exclude": ["src/**/*.test.ts", "src/**/__mocks__/*.ts"] // 테스트 실행 시 실제 테스트 및 목(mock) 파일은 제외
}

Mock 객체

• src/models/__mocks__/user.ts : DB 없이 테스트가 가능하도록 만든 user 모델에 대한 목(mock) 객체 파일

export class User {
  constructor(
    public readonly id: number,
    public email: string,
    public encryptedPassword: string
  ) {}

  static async findOne(params: { email: string }) {
    return MOCK_USERS.find((user) => user.email === params.email) || null;
  }
}

export const MOCK_USERS: User[] = []; // 테스트용 유저 배열

• __mocks__/jsonwebtoken.ts

import { jest } from "@jest/globals";

const jwt = {
  sign: jest.fn(({ email }: { email: string }) => "mock_jwt_" + email),
  verify: jest.fn((token: string) => {
    if (!token.startsWith("mock_jwt_")) throw new Error("Invalid token");
  }),
  decode: jest.fn((token: string) => {
    if (!token.startsWith("mock_jwt_")) throw new Error("Invalid token");
    return { email: token.replace("mock_jwt_", "") };
  }),
};

export default jwt;

미들웨어

• src/middlewares/authentication.ts : 쿠키에 저장된 JWT 토큰을 검증하고 사용자 정보를 조회하는 미들웨어

import jwt from "jsonwebtoken";

export async function authenticateUser(req, res, next) {
  const accessToken = req.cookies["access-token"];
  if (!accessToken) return res.sendStatus(401);

  jwt.verify(accessToken, "secret");
  const payload = jwt.decode(accessToken);
  const user = await User.findOne({ email: payload.email });

  if (!user) return res.sendStatus(401);

  req.user = user;
  next();
}

테스트 라우터

• src/routes/users.test.ts : JWT 인증 및 유저 조회 API 테스트

import request from "supertest";
import { app } from "../app";
import { User, MOCK_USERS } from "../models/__mocks__/user";

jest.mock("../models/user", () => jest.requireActual("../models/__mocks__/user"));

afterEach(() => {
  MOCK_USERS.splice(0);
});

describe("GET /users/me", () => {
  test("올바른 JWT 쿠키가 설정되어있으면 유저 정보와 함께 200 응답", async () => {
    MOCK_USERS.push(new User(1, "apple@example.com", "mock_pw"));

    const response = await request(app)
      .get("/users/me")
      .set("Cookie", "access-token=mock_jwt_apple@example.com");

    expect(response.status).toBe(200);
    expect(response.body).toEqual({ email: "apple@example.com" });
  });

  test("JWT가 없으면 401 Unauthorized", async () => {
    const response = await request(app).get("/users/me");
    expect(response.status).toBe(401);
  });

  test("JWT의 이메일이 존재하지 않는 경우 401 Unauthorized", async () => {
    const response = await request(app)
      .get("/users/me")
      .set("Cookie", "access-token=mock_jwt_unknown@example.com");
    expect(response.status).toBe(401);
  });
});

---

FE 단위 테스트

라이브러리 설치

npm install --save-dev @testing-library/jest-dom @testing-library/react @testing-library/user-event

설정 파일

• package.json

(...)
"jest": {
 "moduleNameMapper": {
 "^@/(.+)": "<rootDir>/src/$1"
 }
}
(...)

HTML 렌더링

• src/utils/test/renderWithRouter.ts

import { render } from "@testing-library/react";
import { BrowserRouter } from "react-router-dom";
export function renderWithRouter(ui: React.ReactElement, { route = "/" } = {}) {
 window.history.pushState({}, "Test page", route);
 render(ui, { wrapper: BrowserRouter });
}

Browser Mocking

• src/setupTests.ts

// jest-dom adds custom jest matchers for asserting on DOM nodes.
// allows you to do things like:
// expect(element).toHaveTextContent(/react/i)
// learn more: https://github.com/testing-library/jest-dom
import "@testing-library/jest-dom";

// window.alert 함수를 모킹
Object.defineProperty(window, "alert", {
 writable: true,
 value: jest.fn(),
});

Test Suite 구현

• src/components/JoinForm.test.tsx

import { fireEvent, screen } from "@testing-library/react";
import { renderWithRouter } from "@/utils/test/renderWithRouter";
import { JoinForm } from "./JoinForm";
describe("JoinForm", () => {
 test("잘 렌더링된다.", () => {
 });
 test("회원정보를 입력하고 회원가입 버튼을 누르면 onSubmit 콜백이 호출된다.", () => {
 });
 test("로그인하기 버튼을 누르면 로그인 URL로 이동한다.", () => {
 });
 test("비밀번호 확인을 다르게 입력하면 alert 창이 뜨고 onSubmit 콜백이 호출되지 않는다.", () => {
 });
});

Case 1: 렌더링

• src/components/JoinForm.test.tsx

test("잘 렌더링된다.", () => {
 renderWithRouter(<JoinForm />);
 expect(screen.getByLabelText("이메일", { selector: "input" })).toBeInTheDocument();
 expect(screen.getByLabelText("비밀번호", { selector: "input" })).toBeInTheDocument();
 expect(screen.getByLabelText("비밀번호 확인", { selector: "input" })).toBeInTheDocument();
 expect(screen.getByText("회원가입", { selector: "button" })).toBeInTheDocument();
 expect(screen.getByText("로그인하기", { selector: "a" })).toBeInTheDocument();
});

Case 2: 버튼 콜백

• src/components/JoinForm.test.tsx

test("회원정보를 입력하고 회원가입 버튼을 누르면 onSubmit 콜백이 호출된다.", () => {
 const onSubmit = jest.fn();
 renderWithRouter(<JoinForm onSubmit={onSubmit} />);
 fireEvent.change(screen.getByLabelText("이메일"), { target: { value: "foo@example.com" } });
 fireEvent.change(screen.getByLabelText("비밀번호"), { target: { value: "1234" } });
 fireEvent.change(screen.getByLabelText("비밀번호 확인"), { target: { value: "1234" } });
 screen.getByText("회원가입", { selector: "button" }).click();
 expect(onSubmit).toBeCalledWith({ email: "foo@example.com", password: "1234" });
});

Case 3: 링크에 의한 이동

• src/components/JoinForm.test.tsx

test("로그인하기 버튼을 누르면 로그인 URL로 이동한다.", () => {
 renderWithRouter(<JoinForm />);
 fireEvent.click(screen.getByText("로그인하기"));
 expect(window.location.pathname).toBe("/login");
});

Case 4: 입력 일치 검사

• src/components/JoinForm.test.tsx

est("비밀번호 확인을 다르게 입력하면 alert 창이 뜨고 onSubmit 콜백이 호출되지 않는다.", () => {
 const alertSpy = jest.spyOn(window, "alert");
 const onSubmit = jest.fn();
 renderWithRouter(<JoinForm onSubmit={onSubmit} />);
 fireEvent.change(screen.getByLabelText("이메일"), { target: { value: "foo@example.com" } });
 fireEvent.change(screen.getByLabelText("비밀번호"), { target: { value: "1234" } });
 fireEvent.change(screen.getByLabelText("비밀번호 확인"), { target: { value: "123456" } });
 screen.getByText("회원가입", { selector: "button" }).click();
 expect(alertSpy).toBeCalledWith("비밀번호가 일치하지 않습니다.");
 expect(onSubmit).not.toBeCalled();
});

테스트 실행

테스트 절차의 재사용성 확보, 테스트 단계의 재현성을 높임

• frontend/Makefile

all: 
	  cat ./Makefile
test: 
	  CI=true npm test

---

컨테이너화

BE 컨테이너화

Dockerfile 작성

• backend/Dockerfile : Node.js 런타임을 기반으로 앱을 실행할 수 있도록 설정

FROM node:18
WORKDIR /var/app
COPY package.json package-lock.json ./
RUN npm ci --omit=dev
COPY ./build/ ./build/
ENV PORT=3031
 CORS_ALLOWED_ORIGIN=(...)
EXPOSE 3031
HEALTHCHECK CMD curl --fail http://localhost:3031/healthcheck || exit 1
ENTRYPOINT ["node", "."]

• backend/Makefile : 도커 이미지 빌드/배포, 쿠버네티스에 적용 및 삭제 자동화

🤔 Makefile은 왜 필요할까?

빌드 → 푸시 → 배포 → 삭제 작업까지 명령어 하나로 일괄 처리할 수 있어 효율적인 자동화가 가능합니다.

ARCH=amd64
IMG_TAG="your-image-name:latest"
all:
 cat ./Makefile
test:
 npm test
node:
 npm ci
 npm run build
image: Dockerfile node
 docker build --platform=linux/${ARCH} --tag ${IMG_TAG} .
up:
  docker-compose down
  docker-compose build
  docker-compose up -d

• docker-compose.yaml

version: "3.8"
services:
 db:
 image: mariadb:11.2.2
 environment:
 MARIADB_ROOT_PASSWORD:
root
 ports:
 - 3032:3306
 networks:
 - notes
 volumes:
 - ./db:/var/lib/mysql
networks:
 notes: {}


services:
 backend:
 image: (...)
 environment:
 DB_HOST: db
 DB_PORT: 3306
 ports:
 - 3031:3031
 networks:
 - notes
(...)

---

FE 컨테이너화

환경 변수의 적용

React 앱은 빌드된 후 .env 파일을 읽을 수 없기 때문에, 컨테이너 실행 시점에 env.js로 변환해 사용하는 방식이 필요합니다.

• frontend/docker-entrypoint.sh

#!/bin/bash
set -e
# REACT_APP_으로 시작하는 환경변수를 window._ENV 객체에 저장하는 env.js 파일 생성
echo -n "" > ./build/env.js
echo "window._ENV={" >> ./build/env.js
for key in $(compgen -v | grep ^REACT_APP_); do
 echo "$key:'${!key}'," >> ./build/env.js
done
echo "}" >> ./build/env.js
# 앱 서버 시작
exec serve -s build

환경변수의 전달

• frontend/public/index.html

<!DOCTYPE html>
<html lang="en">
 <head>
 (...)
 <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
 <!--
 Notice the use of %PUBLIC_URL% in the tags above.
 It will be replaced with the URL of the `public` folder during the build.
 Only files inside the `public` folder can be referenced from the HTML.
 Unlike "/favicon.ico" or "favicon.ico", "%PUBLIC_URL%/favicon.ico" will
 work correctly both with client-side routing and a non-root public URL.
 Learn how to configure a non-root public URL by running `npm run build`.
 -->
 <title>React App</title>
 </head>
 <body>
 <noscript>You need to enable JavaScript to run this app.</noscript>
 <div id="root"></div>
 <script src="%PUBLIC_URL%/env.js"></script>

Dockerfile 작성

• frontend/Dockerfile

FROM node:18
WORKDIR /var/app
RUN npm install -g serve
COPY build ./build
EXPOSE 3000
COPY docker-entrypoint.sh /usr/local/bin/
RUN chmod u+x /usr/local/bin/docker-entrypoint.sh
ENTRYPOINT ["docker-entrypoint.sh"]

Makefile 타겟 추가

• frontend/Makefile

ARCH=amd64
IMG_TAG="..."
all:
 cat ./Makefile
test:
 CI=true npm test
node:
 npm ci
 npm run build
image: Dockerfile node
 docker build --platform=linux/${ARCH} --tag ${IMG_TAG} .

• docker-compose.yaml

services:
 frontend:
 image: (...)
 environment:
 REACT_APP_API_BASE_URL: http://localhost:3031
 ports:
 - 3000:3000
 networks:
 - notes
(...)
networks:
 notes: {}
up:
 docker-compose down
 docker-compose build
 docker-compose up -d

---

로컬 클러스터에 시험 배포

프로덕션 배포 환경

• 프론트엔드 URL: https://notes.prgms-fullcycle.com
• 백엔드 URL: https://notes.prmgs-fullcycle.com/api
• 데이터베이스: notes.prgms-fullcycle.com:3306

로컬 테스트 배포 환경

• 프론트엔드 URL: http://localhost:30030

• 백엔드 URL: http://localhost:30031
  

• 데이터베이스: notes-db.db:3306

환경 구성 및 배포 방식

구분	프로덕션	로컬 테스트
DB 접근 방식	DNS (인터넷 접근)	k8s service discovery
JWT 쿠키 설정	SSL 있음(도메인 네임과 인증서 있음), sameSite: "lax", secure: false	SSL 없음(동일한 localhost에서 접근), sameSite: "none", secure: true
배포 적용 방법	Terraform IaC	kubectl + manifest

BE 실행 환경 적용

• k8s의 ConfigMap 사용 : DB 접속 정보나 프론트 도메인 설정(CORS)은 코드에 직접 넣기보다 외부 설정(ConfigMap)으로 관리하는 게 보안과 유지보수 측면에서 유리함

apiVersion: v1
kind: ConfigMap
metadata:
 name: notes-be-config
 namespace: prgms-notes
data:
 DB_HOST: notes-db.db
 DB_USER: prgms
 DB_PASSWD: <Database password for user
prgms>
 DB_NAME: prgms_notes
 CORS_ALLOWED_ORIGIN: http://localhost:30030

• backend/notes-be.yaml

apiVersion: apps/v1
kind: Deployment
metadata:
 name: notes-be
 namespace: prgms-notes
spec:
 replicas: 1
 selector:
 matchLabels:
 run: notes-be
 template:
 metadata:
 labels:
 run: notes-be
 spec:
 containers:
 - name: notes-backend
 image: <Image to pull>
 imagePullPolicy: Always
 envFrom:
 - configMapRef:
 name: notes-be-config # 환경변수 주입 (ConfigMap)

apiVersion: v1
kind: Service
metadata:
 name: notes-be
 labels:
 run: notes-be
 namespace: prgms-notes
spec:
 type: NodePort
 selector:
 run: notes-be
 ports:
 - port: 3031
 targetPort: 3031
 nodePort: 30031

---

FE 실행 환경 적용

• frontend/notes-fe.yaml

apiVersion: apps/v1
kind: Deployment
metadata:
 name: notes-fe
 namespace: prgms-notes
spec:
 selector:
 matchLabels:
 run: notes-fe
 replicas: 1
 template:
 metadata:
 labels:
 run: notes-fe
 spec:
 containers:
 - name: notes-frontend
 image: <Image to pull>
 imagePullPolicy: Always
 ports:
 - containerPort: 3000
 env:
 - name:
REACT_APP_API_BASE_URL
 value: http://localhost:30031
 
 apiVersion: v1
kind: Service
metadata:
 name: notes-fe
 labels:
 run: notes-fe
 namespace: prgms-notes
spec:
 type: NodePort
 selector:
 run: notes-fe
 ports:
 - port: 3000
 nodePort: 30030

• frontend/Makefile

IMG_TAG="..."
(...)
image: Dockerfile node
 docker build --platform=linux/${ARCH} --tag ${IMG_TAG} .
push:
 docker push ${IMG_TAG}
deploy: notes-fe.yaml
 kubectl apply –f notes-fe.yaml
undeploy:
 kubectl delete –f notes-fe.yaml
clean:
 \rm –rf build
 docker rmi ${IMG_TAG}

---

✏️ 회고

기존에는 수동으로 하는 빌드, 이미지 푸시, 쿠버네티스 배포 작업들을 테스트와 배포 과정까지 자동화하면서 작업 흐름이 훨씬 수월한 거 같다. 앞으로 더 많은 작업들을 자동화해보고 싶다.