[Front] 프론트 도커 배포 및 백엔드와 연동

[ 순서 ]

1. react 프로젝트 git clone으로 가져옴

2. Dockerfile 생성

• 컨테이너에 node, nginx 설치
• react 프로젝트 Build

3. 도커 이미지 생성: moivo-front-img

4. 도커 컨테이너 생성: moivo-front-container

 

 

[ Git Clone ]

이번엔 Git Hub 활용해서 구현하기로 도커 배포해보기 위해 깃 클론했다.

 

[ Docker Image 생성 ]

1. Dockerfile

node 가져오기

react 프로젝트 build

nginx 가져오기

build 폴더를 이미지로 이동

nginx 환경파일 변경하기

컨테이너 실행 시, nginx 실행

# ----- 1단계: 빌더 (Builder) -----
# Node.js 환경에서 애플리케이션을 빌드하는 단계
FROM node:18-alpine AS builder

# 작업 디렉터리를 /app으로 설정합니다.
WORKDIR /app

# package.json과 package-lock.json 파일을 복사하여 의존성을 먼저 설치합니다.
# 이 단계는 캐시 레이어를 효과적으로 활용하여 빌드 속도를 높입니다.
COPY package*.json ./

# 모든 의존성 패키지를 설치합니다.
RUN npm install

# 나머지 모든 소스 코드를 작업 디렉터리로 복사합니다.
COPY . .

# 프로덕션용으로 React 애플리케이션을 빌드합니다.
RUN npm run build

# ----- 2단계: 프로덕션 (Production) -----
# 빌드된 정적 파일을 Nginx를 통해 서빙하는 단계
FROM nginx:stable-alpine

# 빌드 단계에서 생성된 빌드 결과물(build 폴더)을 Nginx의 웹 루트 디렉터리로 복사합니다.
# 여기서 `build`는 vite.config.js의 outDir 값과 일치해야 합니다.
COPY --from=builder /app/build /usr/share/nginx/html

# 이전에 작성한 nginx.conf 파일을 컨테이너의 Nginx 설정 파일 위치로 복사합니다.
COPY ./nginx.conf /etc/nginx/conf.d/default.conf

# 컨테이너가 80번 포트로 통신할 것임을 외부에 알립니다.
EXPOSE 80

# 컨테이너가 시작될 때 Nginx를 포그라운드에서 실행하도록 합니다.
CMD ["nginx", "-g", "daemon off;"]

 

2. nginx.conf

# Docker에 최적화된 nginx.conf 예시
server {
    listen 80;
    server_name localhost;

    # 로그를 컨테이너의 표준 출력으로 보냅니다.
    access_log /dev/stdout;
    error_log /dev/stderr;

    location / {
        root   /usr/share/nginx/html;
        index  index.html;
        try_files $uri $uri/ /index.html;
    }
    
    # API 프록시 설정 (선택 사항, 필요 시 추가)
    location /api {
        proxy_pass http://moivo-back-container:8080;
    }
}

 

 

3. 도커 이미지 생성

명령어: docker build -t moivo-front-img .

 

npm install 에서 오류 발생했다... 그래서 aws ec2에서 테스트해볼려고 한다!

 

 

node 설치

# node 설치 명령어
curl -fsSL https://deb.nodesource.com/setup_18.x | sudo -E bash -
sudo apt-get install -y nodejs

 

npm install -> 오류 발생했다. 버전 이슈인듯 하다

 

그래서 삭제했다가 오류 로그에서 제시한 버전으로 설치하려고 한다.

 

재설치 완료

 

build 성공...!

 

npm install 오류는 node 버전임을 깨달았으니 도커파일에서 노드 가져올때 20으로 변경해주면 된다.

FROM node:18-alpine AS builder -> FROM node:20-alpine AS builder

 

근데 또 오류 npm install 에서 오류가 발생하여 script 폴더도 붙여넣었다. 따라서 최종 Dockerfile은 아래와 같다.

# ----- 1단계: 빌더 (Builder) -----
# Node.js 환경에서 애플리케이션을 빌드하는 단계
FROM node:20-alpine AS builder

# 작업 디렉터리를 /app으로 설정합니다.
WORKDIR /app

# package.json과 package-lock.json 파일을 복사하여 의존성을 먼저 설치합니다.
# 이 단계는 캐시 레이어를 효과적으로 활용하여 빌드 속도를 높입니다.
COPY package*.json ./

# npm install이 의존하는 scripts 폴더를 먼저 복사합니다.
COPY scripts ./scripts

# 모든 의존성 패키지를 설치합니다.
RUN npm install

# 나머지 모든 소스 코드를 작업 디렉터리로 복사합니다.
COPY . .

# 프로덕션용으로 React 애플리케이션을 빌드합니다.
RUN npm run build

# ----- 2단계: 프로덕션 (Production) -----
# 빌드된 정적 파일을 Nginx를 통해 서빙하는 단계
FROM nginx:stable-alpine

# 빌드 단계에서 생성된 빌드 결과물(build 폴더)을 Nginx의 웹 루트 디렉터리로 복사합니다.
# 여기서 `build`는 vite.config.js의 outDir 값과 일치해야 합니다.
COPY --from=builder /app/build /usr/share/nginx/html

# 이전에 작성한 nginx.conf 파일을 컨테이너의 Nginx 설정 파일 위치로 복사합니다.
COPY ./nginx.conf /etc/nginx/conf.d/default.conf

# 컨테이너가 80번 포트로 통신할 것임을 외부에 알립니다.
EXPOSE 80

# 컨테이너가 시작될 때 Nginx를 포그라운드에서 실행하도록 합니다.
CMD ["nginx", "-g", "daemon off;"]

 

 

[Docker Container 생성]

컨테이너 생성했지만 아래와 같은 종류의 오류 발생....

2025/09/04 07:37:37 
[emerg] 1#1: host not found in upstream "moivo-back-container" in /etc/nginx/conf.d/default.conf:18

해당 오류는 moivo-front-container와 moivo-back-container가 동일한 네트워크에 있지 않다는 뜻이다.

 

이를 하나의 네트워크에 위치하게 하여야 하고 이를 위해서는 docker-compose.yml 파일이 필요하다. 그래서 아래와 같이 파일을 만들었다.

version: '3.8'

services:
  # 프론트엔드 서비스
  frontend:
    container_name: moivo-front-container
    build:
      context: ./Front/Moivo_project/src/main/moivo_react # React 프로젝트 경로
    ports:
      - "80:80"
    networks:
      - moivo-network

  # 백엔드 서비스
  backend:
    container_name: moivo-back-container
    build:
      context: ./Back # Spring Boot 프로젝트 경로
    ports:
      - "8080:8080"
    depends_on:
      - redis
    networks:
      - my-network
    # 백엔드 환경변수 설정 등 추가 가능
 
  # 데이터베이스 서비스 (Redis)
  redis:
    container_name: moivo-redis
    image: redis:latest
    ports:
      - "6379:6379"
    networks:
      - moivo-network
networks:
  my-network:
    driver: bridge

 

해당 파일은 Back과 Front 모두를 포함하고 있는 경로에 위치하여야 한다고 하여, 여기에 만들었다.

그리고 docker-compose.yml 파일이 있는 경로에서 아래와 같은 명령어 보내면 된다.

• dokcer-compose up --build -d

 

해당 파일을 사용하는 정확한 이유를 제미나이한테 물어봤다.

docker-compose.yml을 사용하는 이유

docker-compose.yml 파일은 여러 개의 도커 컨테이너를 함께 정의하고 실행하기 위한 설정 파일입니다. 이 파일을 사용하면 다음과 같은 주요 장점들이 있습니다.

---

1. 쉬운 컨테이너 간 통신

docker-compose는 파일에 정의된 모든 서비스(컨테이너)를 하나의 공통 네트워크에 자동으로 연결합니다. 이 네트워크 덕분에 컨테이너들은 서로의 서비스 이름으로 통신할 수 있습니다. 예를 들어, moivo-front-container는 백엔드 컨테이너의 IP 주소를 몰라도 moivo-back-container라는 이름만으로 API 요청을 보낼 수 있습니다. 이 기능은 Docker Compose가 각 서비스 이름에 대한 내부 DNS를 제공하기 때문에 가능합니다.

---

2. 간편한 관리 및 실행

프로젝트에 여러 개의 컨테이너가 필요할 때, 각 컨테이너마다 docker run 명령어를 일일이 입력하는 것은 번거롭습니다. docker-compose.yml 파일 하나만 있으면, sudo docker-compose up -d 명령어 한 줄로 프론트엔드, 백엔드, 데이터베이스 등 모든 컨테이너를 한 번에 실행하고 관리할 수 있습니다.

---

3. 환경의 일관성 및 재현성

docker-compose.yml 파일은 컨테이너를 실행하는 모든 설정을 코드화하여 저장합니다. 따라서 팀원 모두가 이 파일을 공유하면, 각자의 개발 환경에서 동일한 설정으로 컨테이너를 실행할 수 있습니다. 이는 "내 컴퓨터에서는 잘 되는데..."와 같은 문제를 방지해줍니다.

---

정리

docker-compose.yml 파일은 단순히 컨테이너를 실행하는 명령어를 모아둔 것 이상입니다. 컨테이너들을 하나의 논리적인 서비스 그룹으로 묶어주고, 서로 통신할 수 있는 환경을 제공하며, 배포 및 관리 프로세스를 간소화하는 핵심적인 도구입니다. 백엔드와 프론트엔드 컨테이너가 서로 통신해야 하는 상황에서는 이 파일을 사용하는 것이 필수적입니다.

 

 

 

 

도메인 연결만 다시하면 될듯!!