운영환경을 위해 Nginx 말아주기

운영환경에서의 Nginx

개발환경에서는 개발서버가 정적파일을 hot reload시키며 개발자에게 보여준다.

 

운영환경에서는 개발서버가 없어서 build된 파일을 제공해줄 무언가 필요하다.

운영환경에서는 개발환경과 다르게 hot reload등의 개발에 특화된 기능이 필요 없기 때문에 개발 관련 기능이 없는 Nginx가 적합하다.

 

개발환경과 운영환경에서의 Dockerfile 차이

개발환경에서는 다음과 같이 dockerfile.dev를 만들어준다.

FROM node:20

WORKDIR /usr/src/app

COPY package.json ./

RUN npm install -g pnpm
RUN pnpm install

COPY ./ ./

CMD ["pnpm", "run", "dev"]

 

운영환경에서는 builder와 nginx를 실행시키는 두 step이 진행된다.

 

vite.config.ts에서 output 경로를 설정해준다.

import { defineConfig } from "vitest/config";
import react from "@vitejs/plugin-react";

// https://vite.dev/config/
export default defineConfig({
  test: {
    globals: true,
    environment: "jsdom",
  },
  plugins: [react()],
  server: {
    host: "0.0.0.0", // 외부에서 접근 가능하도록 설정

    port: 3000,
  },
  build: {
    outDir: "dist", // 빌드 결과 디렉토리
  },
});

 

그리고 다음과 같이 dockerfile.prod를 만들어준다.

# builder
FROM node:20 as builder

WORKDIR /usr/src/app

COPY package.json ./

RUN npm install -g pnpm
RUN pnpm install

COPY ./ ./

RUN pnpm run build

# builder에서 빌드된 결과물을 /usr/share/nginx/html에 넣어준다.
FROM nginx
COPY --from=builder /usr/src/app/dist /usr/share/nginx/html

 

공식문서에 보면 빌드된 파일을 /usr/share/nginx/html에 넣어주라고 안내한다.

 

builder stage에서 생성된 파일들(/usr/src/app/dist)를 /usr/share/nginx/html로 복사를 시켜주면 nginx에서 웹브라우저의 http요청을 받을때마다 알맞은 파일을 전달해준다.