도커(Docker)는 애플리케이션을 컨테이너로 패키징하여 배포 및 실행하는 데 사용되는 오픈 소스 플랫폼입니다. 자바스크립트 앱을 개발할 때, 프론트엔드와 백엔드를 분리하여 개발하면 유지보수와 확장성을 향상시킬 수 있습니다. 이 글에서는 도커를 활용하여 자바스크립트 앱의 프론트엔드와 백엔드를 분리하는 방법에 대해 알아보겠습니다.

1. 프론트엔드와 백엔드의 구분

프론트엔드는 사용자 인터페이스와 상호작용하는 부분을 담당하고, 백엔드는 데이터 처리와 저장, 비즈니스 로직을 처리하는 부분을 말합니다. 이렇게 구분함으로써 각각의 역할에 따라 개발을 진행할 수 있습니다. 이제 프론트엔드와 백엔드를 각각 독립적인 컨테이너로 분리해보겠습니다.

2. 프론트엔드 컨테이너 설정

프론트엔드 컨테이너는 자바스크립트 앱의 사용자 인터페이스를 담당합니다. 다음은 프론트엔드 컨테이너를 설정하는 도커 파일(Dockerfile)의 예시입니다.

# 프론트엔드 컨테이너를 위한 도커 파일

# 베이스 이미지 선택
FROM node:14-alpine

# 작업 디렉터리 생성
WORKDIR /app

# 앱 종속성 설치
COPY package*.json ./
RUN npm install

# 소스 코드 복사
COPY . .

# 앱 빌드
RUN npm run build

# 앱 실행
CMD ["npm", "start"]

위의 도커 파일은 Node.js를 기반으로 하는 프론트엔드 앱을 컨테이너로 패키징하는 설정입니다. FROM 명령어를 사용하여 베이스 이미지로 node:14-alpine을 선택하고, 작업 디렉터리를 설정하여 앱 종속성을 설치하고 소스 코드를 복사한 뒤, 앱을 빌드하고 실행합니다.

3. 백엔드 컨테이너 설정

백엔드 컨테이너는 자바스크립트 앱의 데이터 처리와 비즈니스 로직을 담당합니다. 다음은 백엔드 컨테이너를 설정하는 도커 파일(Dockerfile)의 예시입니다.

# 백엔드 컨테이너를 위한 도커 파일

# 베이스 이미지 선택
FROM node:14-alpine

# 작업 디렉터리 생성
WORKDIR /app

# 앱 종속성 설치
COPY package*.json ./
RUN npm install

# 소스 코드 복사
COPY . .

# 앱 실행
CMD ["npm", "start"]

위의 도커 파일은 Node.js를 기반으로 하는 백엔드 앱을 컨테이너로 패키징하는 설정입니다. 프론트엔드 컨테이너의 도커 파일과 유사하지만, 백엔드 앱에 맞게 설정하여 앱을 빌드하고 실행합니다.

4. 컨테이너 실행

프론트엔드와 백엔드 컨테이너가 각각 설정되었으므로, 이제 컨테이너를 실행해보겠습니다. 다음은 도커 컴포즈(docker-compose.yml) 파일의 예시입니다.

version: '3'
services:
  frontend:
    build:
      context: ./frontend
    ports:
      - 3000:3000
    volumes:
      - ./frontend:/app
  backend:
    build:
      context: ./backend
    ports:
      - 8000:8000
    volumes:
      - ./backend:/app

위의 도커 컴포즈 파일은 frontend와 backend라는 두 개의 서비스로 구성되어 있습니다. 각각의 서비스는 앞서 설정한 도커 파일과 연결되어 컨테이너를 빌드하고 실행합니다.

마무리

도커를 활용하여 자바스크립트 앱의 프론트엔드와 백엔드를 분리하는 방법에 대해 알아보았습니다. 이를 통해 유연하고 확장 가능한 애플리케이션을 개발하고 배포할 수 있습니다. 도커와 컨테이너 기술은 현대적인 앱 개발과 배포에 필수적인 도구이므로, 적극적으로 활용하는 것이 좋습니다.

참고자료:

• Docker Documentation
• Docker Compose Documentation