reactjs env 동적 사용

Docker로 동적 환경 설정 관리하기

서버 URL 같은 환경 변수를 자주 바꿔야 할 때, 매번 Docker 이미지를 새로 만들면 너무 비효율적이어서 웹 애플리케이션은 용량도 크고, 자주 이미지를 재생성하는 건 낭비가 클 수밖에 없었다. 그래서 Docker 이미지와는 별도로 설정 파일을 동적으로 생성해서 사용하는 방법을 적용했다

구성 내용

1. generate-config.js: 환경 변수에서 값을 읽어와서 config.js 파일을 생성하는 스크립트

// generate-config.js
const fs = require('fs');

// 환경 변수에서 값을 읽어와서 config 파일 생성
const configContent = `
const config = {
  apiUrl: process.env.REACT_APP_BASE_URL || 'http://localhost:8088/api'
};

module.exports = config;
`;

fs.writeFileSync('./config.js', configContent);

이 스크립트는 환경 변수에서 값을 읽어와 config.js라는 설정 파일을 만들어. 기본값은 로컬 개발 환경에 맞춰져 있음

2. Dockerfile: Docker 이미지를 만들 때, generate-config.js를 실행해서 동적 설정 파일을 생성

# Use an official Node.js runtime as a parent image
FROM node:20.10.0-alpine

# Set the working directory in the container
WORKDIR /app

# Copy package.json and package-lock.json
COPY package.json package-lock.json ./

# Set npm configurations
RUN npm config set 

# Install the latest version of npm globally
RUN npm install --location=global npm@latest

# Install build dependencies
RUN apk add --no-cache python3 make g++

# Install dependencies
RUN npm ci

# Copy the rest of the application code
COPY . .

# npm 스크립트 실행
RUN npm run generate-config

# npm 스크립트 실행을 위한 환경 변수 설정
ARG REACT_APP_BASE_URL

ENV REACT_APP_BASE_URL=$REACT_APP_BASE_URL

# 3008번 포트 노출
EXPOSE 3008

# npm start 스크립트 실행
CMD ["npm", "start"]

이 Dockerfile은 generate-config.js를 실행해서 설정 파일을 동적으로 생성해. 이 설정 파일은 Docker 이미지 빌드 시점에 생성되고, 설정된 환경 변수에 따라 내용이 달라져.

장점
동적 설정: 환경 변수를 Docker 이미지와는 독립적으로 관리할 수 있어서, 이미지를 새로 만들지 않고도 설정을 쉽게 바꿀 수 있다.
효율적인 빌드: 설정 파일을 동적으로 생성하니까, 빈번한 이미지 재생성 없이도 변경 사항을 반영할 수 있다.
유연성: Docker Compose에서 설정을 쉽게 바꿀 수 있어서, 다양한 환경에서 유연하게 대응할 수 있다.
이렇게 하면 Docker 환경에서 설정 관리가 훨씬 더 효율적이고 유연해졌다.