React 애플리케이션 Docker 및 AWS 배포 가이드

React 애플리케이션을 Docker를 통해 컨테이너화하고, AWS EC2에 배포하는 방법을 정리합니다. 이 과정은 CI/CD 환경을 구축하여 GitHub Actions로 자동화 배포까지 구현합니다.

---

 

목차

1. 프로젝트 준비
   1.1 필요한 파일 생성
2. Docker 이미지 생성
   2.1 Dockerfile 작성
3. Nginx 설정
   3.1 nginx.conf 작성
4. Docker 이미지 빌드 및 푸시
   4.1 Docker 이미지 빌드
   4.2 Docker Hub에 이미지 푸시
5. AWS 서버 설정
   5.1 배포 스크립트 작성
   5.2 Nginx 설정 파일 작성
6. GitHub Actions로 CI/CD 설정
   6.1 GitHub Actions Workflow 작성
   6.2 GitHub Secrets 설정
7. 테스트
8. 결과 화면 

---

1. 프로젝트 준비

1.1 필요한 파일 생성

아래 파일들을 프로젝트 루트에 생성합니다.

• Dockerfile
• nginx.conf
• .github/workflows/ci-cd.yml (GitHub Actions 설정)

---

 

2. Docker 이미지 생성

2.1 Dockerfile 작성

React 애플리케이션을 배포하기 위해 Docker 이미지를 생성합니다.

# Step 1: Build React app
FROM node:16-slim AS builder
WORKDIR /app
COPY package.json package-lock.json ./
RUN npm install
COPY . .
RUN npm run build

# Step 2: Nginx to serve the build
FROM nginx:stable-alpine
WORKDIR /usr/share/nginx/html

# Nginx 설정 파일 복사
COPY nginx.conf /etc/nginx/conf.d/default.conf

# Build 결과물 복사
COPY --from=builder /app/build /usr/share/nginx/html

# Nginx를 3000번 포트에서 실행
EXPOSE 3000
CMD ["nginx", "-g", "daemon off;"]

---

 

3. Nginx 설정

3.1 nginx.conf 작성

React 애플리케이션의 build 디렉토리를 서빙하기 위한 Nginx 설정입니다.

server {
    listen 3000;  # 3000번 포트에서 Nginx가 동작하도록 설정
    server_name localhost;

    location / {
        root /usr/share/nginx/html;
        index index.html;
        try_files $uri /index.html;
    }

    error_page 404 /index.html;
}

 

---

 

4. Docker 이미지 빌드 및 푸시

4.1 Docker 이미지 빌드

docker build -t junuyang/portfolio-react-app:latest .

 

4.2 Dockerhub에 이미지 푸시

docker push junuyang/portfolio-react-app:latest

 

---

 

5. AWS 서버 설정

5.1 deploy-react.sh 생성

AWS 서버에서 컨테이너를 실행하기 위해 배포 스크립트를 작성합니다.

deploy-react.sh:

#!/bin/bash

# 환경 변수 설정
IMAGE_NAME="junuyang/portfolio-react-app:latest"
CONTAINER_NAME="portfolio-react-app"
NETWORK_NAME="my_network"
APP_PORT=3000

# Docker 네트워크 생성 (이미 존재하면 무시)
echo "Creating Docker network..."
docker network create $NETWORK_NAME || true

# 최신 React Docker 이미지 가져오기
echo "Pulling latest React Docker image..."
docker pull $IMAGE_NAME

# 기존 컨테이너 중지 및 삭제
echo "Stopping and removing existing container if it exists..."
docker rm -f $CONTAINER_NAME || true

# 새로운 React 컨테이너 실행
echo "Running new React container on port $APP_PORT..."
docker run -d -p $APP_PORT:$APP_PORT --name $CONTAINER_NAME $IMAGE_NAME

# Docker 네트워크 연결
echo "Connecting container to network..."
docker network connect $NETWORK_NAME $CONTAINER_NAME

# Nginx 서비스 재시작 (필요한 경우)
echo "Restarting Nginx..."
sudo systemctl restart nginx

echo "React application has been deployed successfully on port $APP_PORT."

5.2 nginx 파일 작성

/etc/nginx/sites-available/default 파일을 수정합니다.

~$ sudo nano /etc/nginx/sites-available/default

server {
        listen 80 default_server;
        listen [::]:80 default_server;

        server_name kyleportfolio.site www.kyleportfolio.site;

        # React 개발 서버를 프록시로 연결
           location / {
        proxy_pass http://localhost:3000;  # React 컨테이너가 사용하는 3000번 포트
        proxy_http_version 1.1;
        proxy_set_header Upgrade $http_upgrade;
        proxy_set_header Connection 'upgrade';
        proxy_set_header Host $host;
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
    }

    # 404 에러 발생 시 React 라우팅 처리 (Optional)
    error_page 404 /index.html;
}

---

 

 

6. GitHub Actions로 CI/CD 설정

6.1 GitHub Actions Workflow 파일 작성

.github/workflows/ci-cd.yml 파일을 생성하고 다음 내용을 작성합니다:

name: React CI/CD

on:
  push:
    branches:
      - master # master 브랜치에 Push될 때 실행
  pull_request:
    branches:
      - master # master 브랜치로 PR이 생성될 때 실행

jobs:
  build-and-deploy:
    runs-on: ubuntu-latest

    steps:
      # 1. 코드 체크아웃
      - name: Checkout code
        uses: actions/checkout@v3

      # 2. Node.js 설정
      - name: Set up Node.js
        uses: actions/setup-node@v3
        with:
          node-version: 16

      # 3. 의존성 설치
      - name: Install dependencies
        run: npm install

      # 4. React 애플리케이션 빌드
      - name: Build React app
        run: npm run build

      # 5. Docker 이미지 빌드
      - name: Build Docker image
        run: docker build -t junuyang/portfolio-react-app:latest .

      # 6. Docker Hub 로그인
      - name: Log in to Docker Hub
        uses: docker/login-action@v2
        with:
          username: ${{ secrets.DOCKER_USERNAME }}
          password: ${{ secrets.DOCKER_PASSWORD }}

      # 7. Docker 이미지 푸시
      - name: Push Docker image to Docker Hub
        run: docker push junuyang/portfolio-react-app:latest

      # 8. SSH로 서버에 배포 스크립트 실행
      - name: Deploy to AWS
        uses: appleboy/ssh-action@v0.1.8
        with:
          host: ${{ secrets.AWS_HOST }}
          username: ubuntu
          key: ${{ secrets.AWS_KEY }}
          script: |
            ./deploy-react.sh

6.2 GitHub Secrets 설정

GitHub Repository > Settings > Secrets에서 아래 항목 추가:

• DOCKER_USERNAME: Docker Hub 사용자명
• DOCKER_PASSWORD: Docker Hub 비밀번호
• AWS_HOST: AWS EC2 Public IP
• AWS_KEY: AWS SSH Private Key

---

 

 

7. 테스트

1. 코드를 GitHub main 브랜치에 Push합니다.
2. GitHub Actions에서 Workflow가 실행됩니다.
3. Docker Hub에 최신 이미지가 푸시되고, AWS EC2에 배포됩니다.
4. 브라우저에서 EC2 IP 주소를 입력하여 React 애플리케이션이 정상적으로 작동하는지 확인합니다.

---

 

 

8. 결과 화면

• React 애플리케이션이 배포된 URL: http://<EC2-Public-IP>
• GitHub Actions Workflow 실행 로그에서 CI/CD 성공 여부 확인.