궁금한 이야기 IT

[도커(docker)] docker-compose를 이용하여 react app 서버 설치 및 개발 환경 구성하기

🖥️ Dockerfile를 이용하여 react app 서버 설치 및 개발 환경 구성하기

💡이전글에서 Dockerfile 파일과 docker build 명령어와 docker run 명령어를 이용하여  서버 설치 및 환경 구성했는데 docker-compose를 이용하면 한번에 설치 및 구성을 할 수 있습니다. 

📌docker-compose를 이용하여 react app 서버 설치 및 개발 환경 구성하기

📝 docker-compose.yml 파일 생성

version: '3'
services:
  react:
    build: 
      context: .
      dockerfile: Dockerfile.dev
    ports:
      - "3000:3000"
    volumes:
      - /usr/src/app/node_modules
      - .:/usr/src/app
    stdin_open: true

👉  파일내용에 대한 설명입니다. 

version: '3'  # 사용할 Docker Compose 파일의 버전 (v3)

services:
  react:  # 'react'라는 이름의 서비스 정의
    build: 
      context: .  # 현재 디렉터리를 빌드 컨텍스트로 사용
      dockerfile: Dockerfile  # React 개발을 위한 Dockerfile 지정 (Dockerfile)

    # 포트 매핑으로 로컬에서 React 개발 서버 접속 가능
    ports:
      - "3000:3000"  # 호스트의 3000번 포트를 컨테이너의 3000번 포트와 연결 (React 개발 서버용)

    # 로컬 코드 변경 사항을 컨테이너에 자동 반영
    # volumes 설정 덕분에 이미지 빌드를 하지 않고 코드를 수정하면 바로 반영됩니다.
    # 단, 서버는 재실행해야 반영됩니다.
    volumes:
      # 컨테이너 내부의 node_modules 폴더는 유지하여, 로컬 파일과 충돌 방지
      - /usr/src/app/node_modules  
      # 현재 디렉터리의 모든 파일을 컨테이너의 /usr/src/app에 마운트 (소스 코드 실시간 반영)
      - .:/usr/src/app  

	# 컨테이너를 실행할 때 표준 입력을 열어 인터랙티브 모드 활성화
    # react 서버 구성시 사용
    stdin_open: true

📝 이미지 빌드 및 서버 실행

docker-compose up

👉 실행결과입니다.

🚀 지금까지 docker compose를 이용한 방법에 대해 알아봤습니다. 

[도커(docker)] Dockerfile를 이용하여 react app 서버 설치 및 개발 환경 구성하기

📌로컬에서 react app 설치 및 환경구성  

📌  Dockerfile 파일 작성

✔ 루트 폴더에서  Dockerfile 파일을 작성한다. 

FROM node:alpine

WORKDIR /usr/src/app

COPY package*.json ./

RUN npm install

COPY . .

CMD ["npm", "start"]

📌  Docker image 빌드 

✔ docker build 명령을 이용하여 image를 생성한다. 

# react-app 이름으로 이미지를 빌드한다. 
docker build -t react-app .

📌  Docker에서 react app 실행

✔ docker run 명령을 이용하여 react app를 실행한다.

docker run -it -p 3000:3000 -v /usr/src/app/node_modules -v %cd%:/usr/src/app react-app

👉 명령에 대한 설명입니다.

docker run 
  # 인터랙티브 모드(-i)와 터미널(-t)을 활성화하여 컨테이너 내에서 명령어 입력 가능하게 함
  -it   
  
  # 호스트의 3000번 포트를 컨테이너의 3000번 포트에 연결
  -p 3000:3000   
  
  # 컨테이너의 node_modules 디렉터리를 볼륨으로 유지하여 로컬파일을 참조하지 않도록 함
  # 로컬 파일과 충돌 방지
  -v /usr/src/app/node_modules  
  
  # 현재 디렉터리(%cd%)를 컨테이너의 /usr/src/app에 마운트하여 실시간 코드 변경 반영
  -v %cd%:/usr/src/app 
  
  # 실행할 도커 이미지 (React 앱을 포함한 이미지)
  react-app

👉 실행결과입니다.

[도커(docker)] docker build 명령어 사용법 - Dockerfile 

⚙ docker build 명령어는 Docker 이미지를 빌드하는 데 사용됩니다. 보통 Dockerfile을 기반으로 하며, 해당 디렉터리에서 지정된 명령어를 실행하여 이미지를 생성합니다.

🟢  기본 명령어 

# 해당 폴더의 Dockerfile파일을 이용하여 이미지를 생성합니다.
docker build .

🟢  이미지 이름 지정 ( -t)

# 이미지 이름을 myapp으로 지정
docker build -t myapp .

🟢  Dockerfile 이름 및 경로 지정 ( -f)

# Dockerfile의 이름이 다르거나 경로가 다른경우 
docker build -f ./app/Dockerfile.dev .

[도커(docker)] Docker Compose로 Node.js Express 서버와 Redis 연동하기

💻 참고 페이지 

📝 [도커(docker)] Dockerfile를 이용하여 nodejs & express 서버 설치 및 개발 환경 구성하기

📌  프로젝트 디렉터리 구조

📝 프로젝트 폴더 아래처럼 구성하겠습니다.

express-redis-app/
│── docker-compose.yml    # Docker Compose 설정 파일
│── app/                  # Node.js Express 서버 코드
│   ├── Dockerfile        # dockerfile
│   ├── server.js         # Express 서버 코드
│   ├── package.json      # Node.js 패키지 설정 파일

📌  Express 서버 구성 

📝 package.json 파일 생성 

✔ /app 폴더에서 아래의 명령어를 이용해서 package.json 파일을 생성한다.

npm init -y

✔ 생성된 파일 내용을 아래와 같이 변경한다.

{
  "name": "express-redis-app",  // 프로젝트 이름
  "version": "1.0.0",  // 프로젝트 버전
  "main": "index.js",  // 기본 실행 파일 (사용되지 않음, "start" 스크립트에서 server.js 사용)
  "scripts": {
    "start": "node server.js",  // 서버 실행 명령어 (server.js 파일을 실행)
    "test": "echo \"Error: no test specified\" && exit 1"  // 테스트 스크립트 (현재 테스트 없음)
  },
  "keywords": [],  // 프로젝트 관련 키워드 (비어 있음)
  "author": "",  // 작성자 정보 (비어 있음)
  "license": "ISC",  // 오픈소스 라이선스 (ISC 라이선스 적용)
  "description": "",  // 프로젝트 설명 (비어 있음)
  "dependencies": {
    "express": "^4.21.2",  // Express.js 최신 버전 (4.21.2 이상)
    "redis": "^4.7.0"  // Redis 클라이언트 최신 버전 (4.7.0 이상)
  }  
}

🙌 local에서 구현하는 방법은 상단에 Dockerfile를 이용하여 nodejs & express 서버 설치 및 개발 환경 구성하기 링크를 이용하여 확인하세요

📝 server.js 파일 생성 

✔ /app 폴더에 editor(vscode등)을 이용하여 Redis 연동코드를 server.js파일에 작성한다. 

const express = require('express'); // Express.js 프레임워크 모듈 불러오기
const redis = require('redis'); // Redis 클라이언트 모듈 불러오기

const app = express();
const PORT = 3000; // 서버가 실행될 포트 번호

// Redis 클라이언트 설정
const redisClient  = redis.createClient({
    socket: {
        host: 'redis', // Docker Compose에서 정의한 Redis 컨테이너의 이름
        port: 6379 // Redis 기본 포트
    }
});

// Redis 서버에 연결
redisClient.connect()
    .then(() => console.log('Redis connected')) // 연결 성공 시 메시지 출력
    .catch((err) => console.error("❌ Redis 연결 실패:", err)); // 연결 실패 시 오류 출력

// 기본 라우트 설정
app.get('/', async (req, res) => {     
    let count = await redisClient.get('count'); // Redis에서 'count' 키의 값을 가져옴
    if (!count) {
        count = 0; // 값이 없으면 기본값 0으로 설정
    } 

    count = parseInt(count) + 1; // 방문자 수 증가
    await redisClient.set('count', count); // 증가된 값을 Redis에 저장
    res.send(`Hello World! ${count}`); // 응답으로 방문 횟수 출력
});

// 서버 실행
app.listen(PORT, () => {
    console.log(`Server is running on port ${PORT}`); // 서버 실행 메시지 출력
});

📌  Express 서버용 Dockerfile 만들기

📝 /app 폴더에 Dockerfile를 생성한다. 

# Node.js 18 버전의 공식 이미지를 기반으로 함
FROM node:18

# 작업 디렉터리 설정
WORKDIR /usr/src/app

# package.json과 package-lock.json을 복사
COPY package*.json .

# 의존성 설치
RUN npm install 

# 모든 파일을 컨테이너로 복사
COPY . .

# 애플리케이션 실행
CMD ["npm", "start"]

📌  Docker Compose 설정

📝 Root 폴더에 docker-compose.yml을 작성해서 Express와 Redis 서버를 하나의 네트워크에서 실행하자

version: '3'  # Docker Compose 파일의 버전 지정

services:
  redis:
    image: "redis:latest"  # 최신 Redis 이미지를 사용하여 컨테이너 실행
    container_name: "redis-server"  # 컨테이너의 이름을 "redis-server"로 지정
    ports:
      - "6379:6379"  # 호스트의 6379 포트를 컨테이너의 6379 포트에 매핑 (Redis 기본 포트)

  app:
    build: ./app  # ./app 디렉터리에 있는 Dockerfile을 기반으로 애플리케이션 빌드
    container_name: "express-server"  # 컨테이너의 이름을 "express-server"로 지정
    ports:
      - "3000:3000"  # 호스트의 3000 포트를 컨테이너의 3000 포트에 매핑
    depends_on:
      - redis  # "redis" 서비스가 먼저 실행된 후 "app" 서비스가 실행됨
    volumes:
      - ./app:/usr/src/app  # 로컬의 "./app" 디렉터리를 컨테이너의 "/usr/src/app"에 매핑
      - /usr/src/app/node_modules  # "node_modules" 디렉터리는 호스트와 공유하지 않음 (컨테이너 내부에서만 유지)
    environment:
      - REDIS_HOST=redis  # Redis 서버의 호스트명을 "redis"로 설정 (Docker Compose 내 서비스 이름 사용 가능)
      - REDIS_PORT=6379  # Redis 포트를 6379로 설정

📌  Docker Compose 실행

📝 docker-compose up 명령을 실행해서 Redis와 Express 서버를 함께 실행하자.

docker-compose up --build

👉 터미널 출력결과

👉 docker images 화면

👉 docker containers 화면

👉 브라우저 접속 화면

👉 새로고침을 할때마다 숫자가 1씩 증가합니다.

🚀 지금까지 Docker Compose를 이용하여 Node.js Express 서버와 Redis서버 두개의 docker를 연동하는 방법을 알아보았습니다 

[도커(docker)] Dockerfile를 이용하여 nodejs & express 서버 설치 및 개발 환경 구성하기 

📌  Node.js Express 서버 코드 작성

📝 프로젝트 디렉토리 생성

✔ 터미널에서 아래 명령어를 실행하여 프로젝트 디렉토리를 만든다

mkdir docker-nodejs
cd docker-nodejs

📝 Node.js 프로젝트 초기화

✔ 아래 명령어를 실행하여 package.json 파일을 생성한다.

npm init -y

📝 Express 설치

✔ 아래 명령어를 실행하여  Express 프레임워크를 설치한다.

npm install express

🛠  package.json 파일 내용을 확인합니다.

📝 Express 서버 코드 작성

✔ server.js 파일을 생성하고 아래 코드를 입력한다.

const express = require('express');

const PORT = 8080;
const HOST = '0.0.0.0';

const app = express();

app.get('/', (req, res) => {
  res.send('Hello World');
});

app.listen(PORT, HOST);
console.log(`Server running at http://${HOST}:${PORT}/`);

📝 Express 서버 실행 

✔ 터미널에서 아래 명령어를 입력하여 서버를 실행합니다.

node server.js
결과 > Server running at http://0.0.0.0:8080/

🛠  브라우저를 이용해 실행 화면을 확인합니다.

✔ 터미널에서 확인 후 종료한다(Ctrl + C) 

📌  Docker 설정 파일 작성

📝 Dockerfile 파일 생성

✔ Dockerfile의 이름으로 파일을 만들고 다음 내용을 추가한다.

FROM node

WORKDIR /usr/src/app

COPY package*.json ./

RUN npm install 

COPY ./ ./

EXPOSE 8080 

CMD ["node", "server.js"]

🛠  Dockerfile 작성에 사용된 명령어 설명

# 1. Node.js 베이스 이미지 사용
FROM node:18

# 2. 작업 디렉토리 생성
WORKDIR /usr/src/app

# 3. package.json과 package-lock.json 복사
# 3, 4, 5번 순서 주의!!! 
# 불필요한 npm install 작업을 줄여준다. 
COPY package*.json ./

# 4. npm 패키지 설치
RUN npm install

# 5. 애플리케이션 소스 코드 복사
COPY . .

# 6. 컨테이너에서 사용할 포트 지정
EXPOSE 3000

# 7. 서버 실행
CMD ["node", "server.js"]

📌  Docker 컨테이너 실행

📝 Docker 이미지 빌드

✔  아래 명령어를 실행하여 도커 이미지를 빌드한다.

docker build -t my-express-app .

📝 컨테이너 실행

✔  이미지를 빌드한 후 컨테이너를 실행한다.

docker run -p 3000:8080 my-express-app

🛠 이제 http://localhost:3000에 접속하면 Docker 컨테이너에서 Express 서버가 실행된다.

📝 volume 설정 

✔  volume를 설정하면 이미지를 재생성하지 않아도 프로그램 소스를 변경할 수 있습니다.

docker run -p 3000:8080 -v /usr/src/app/node_modules -v %cd%:/usr/src/app my-express-app

🛠 명령에 대한 설명입니다. 

docker run \
  -p 3000:8080 \                     
  # 로컬 호스트의 3000번 포트를 컨테이너의 8080 포트에 매핑
  # 로컬 호스트의 3000번 포트로 접속하면 컨테이너 내부의 8080 포트로 요청이 전달됨.
  
  -v /usr/src/app/node_modules \      
  # 컨테이너 내부의 'node_modules' 디렉토리를 호스트와 공유하지 않음 (빈 볼륨 마운트)
  # 이렇게 하면 node_modules가 호스트의 영향을 받지 않고 컨테이너 내에서만 유지됨.
  
  -v %cd%:/usr/src/app \              
  # 현재 디렉터리 (%cd%)를 컨테이너의 '/usr/src/app' 디렉터리에 마운트 (윈도우 기준)
  # 이를 통해 로컬에서 파일을 수정하면 컨테이너 내부에서도 반영됨.
  # %cd%는 Windows cmd에서 현재 디렉토리를 의미함.
  # Linux/macOS에서는 $PWD를 사용하여 대체
  
  my-express-app                      
  # 'my-express-app'이라는 이름의 도커 이미지로 컨테이너 실행
  # 사전에 docker build -t my-express-app . 같은 명령어로 빌드되었어야 함.

✔  소스 수정후 컨테이너를 재시작하면 변경사항이 적용됩니다. 

docker restart 컨테이너-이름

[도커(docker)] 도커에 MariaDB 설치 및 실행하기

📝 MariaDB 이미지 다운로드

✔ 먼저, Docker Hub에서 MariaDB 이미지를 다운로드합니다.

docker pull mariadb

📝 컨테이너 생성 및 실행

✔ 먼저, Docker Hub에서 MariaDB 이미지를 다운로드합니다.

docker run -p 3306:3306 --name mariadb-container -e MARIADB_ROOT_PASSWORD=1234 -d mariadb

🛠 명령어 설명

docker run                # 새로운 컨테이너를 생성하고 실행
    -p 3306:3306          
    # 호스트의 3306 포트를 컨테이너의 3306 포트와 연결 (MySQL/MariaDB 기본 포트)
    # MariaDB의 기본 포트(3306번)를 호스트와 컨테이너에서 동일하게 연결하여 외부에서 접근할 수 있도록 함.
    
    --name mariadb-container   
    # 컨테이너의 이름을 'mariadb-container'로 지정
    # 컨테이너에 mariadb-container라는 이름을 부여하여 관리하기 쉽게 만듦.
    
    -e MARIADB_ROOT_PASSWORD=1234   
    # MariaDB의 root 계정 비밀번호를 '1234'로 설정
    
    -d                    
    # 컨테이너를 백그라운드에서 실행 (detached mode)
    # 컨테이너를 백그라운드에서 실행하여 터미널을 차단하지 않음.
    
    mariadb                # 사용할 이미지 이름 (MariaDB 공식 이미지)

📝 컨테이너 상태 확인

✔ 실행 중인 컨테이너 목록을 확인하여 MariaDB 컨테이너가 정상적으로 실행되고 있는지 확인합니다.

docker ps

📝 컨테이너 내부 접속 및 MariaDB 사용

✔ 컨테이너 내부로 접속하여 MariaDB를 사용할 수 있습니다.

docker exec -it mariadb-container mariadb -uroot -p

✔ DBeaver와 같은 툴을 이용하여 접근 & 관리도 가능합니다. 

이러한 과정을 통해 Docker 환경에서 MariaDB를 설치하고 사용할 수 있습니다.

[도커(docker)] 도커로 RabbitMQ 설치 및 실행하기

docker run -d --hostname my-rabbit --name some-rabbit -p 5672:5672 -p 15672:15672 rabbitmq:3-management

♣ 명령어 설명

docker run
새로운 컨테이너를 실행하는 명령어입니다.

-d (Detached mode)
컨테이너를 백그라운드에서 실행합니다.
즉, 터미널을 차지하지 않고 백그라운드에서 실행됩니다.

--hostname my-rabbitmq
컨테이너 내부에서 사용할 호스트 이름을 my-rabbitmq으로 설정합니다.
네트워크에서 my-rabbit이라는 이름으로 컨테이너를 찾을 수 있습니다.

--name some-rabbitmq
컨테이너의 이름을 some-rabbitmq으로 설정합니다.
docker ps로 실행 중인 컨테이너 목록을 볼 때 이 이름이 표시됩니다.

-p 5672:5672 (메시징 포트 개방)
호스트의 5672 포트를 컨테이너의 5672 포트와 연결(포트 매핑)합니다.
**RabbitMQ의 기본 메시지 브로커 포트(5672)**를 호스트의 5672 포트와 연결합니다.
애플리케이션이 RabbitMQ와 메시지를 주고받을 때 이 포트를 사용합니다.
예를 들어, Python, Java, Node.js 애플리케이션이 RabbitMQ에 연결할 때 이 포트를 통해 통신합니다.

-p 15672:15672 (관리 UI 포트 개방)
호스트의 15672 포트를 컨테이너의 15672 포트와 연결(포트 매핑)합니다.
15672 포트는 **RabbitMQ 관리 웹 인터페이스 (Management Plugin)**에 사용됩니다.
브라우저에서 http://localhost:15672로 접속하면 RabbitMQ 웹 UI에 접근할 수 있습니다.

rabbitmq:3-management
rabbitmq:3-management 이미지로 컨테이너를 실행합니다.
rabbitmq:3-management 태그는 RabbitMQ 3.x 버전 + 관리 플러그인이 포함된 버전입니다.
기본 RabbitMQ는 웹 UI가 없지만, -management 태그가 붙은 이미지는 관리 기능을 포함하고 있습니다.

♣ 컨테이너가 정상 실행 중인지 확인하는 방법

docker ps

♣  RabbitMQ 기본 계정 정보

기본 사용자: guest
기본 비밀번호: guest
웹 UI 접속: http://localhost:15672

♣ 웹 UI 접속 화면 : http://localhost:15672

♣ 로그인후 화면 - 기본 아이디 패스워드 : guest/guest

♣ RabbitMQ 컨테이너를 종료하는 방법

docker stop some-rabbitmq

♣ RabbitMQ 컨테이너를 삭제하는 방법

docker rm some-rabbitmq

- some-rabbitmq 컨테이너를 삭제합니다.
- 삭제 전에 컨테이너를 stop해야 합니다.