devsungyeon

You only live once.
개발 일지

AWS EC2 + Docker + Github Actions + React + CI/CD

궁금한 점이나 오류는 댓글로 달아주시면, 답변 혹은 수정하겠습니다! “:)”

EC2 + Docker + Nginx + GitHub Actions CI/CD 매뉴얼

1. EC2 설정

1.1 EC2 인스턴스 생성

  1. AWS Management Console에 로그인합니다.
  2. EC2 > 인스턴스 시작을 선택합니다.
  3. 아래 설정으로 인스턴스를 생성합니다:
    • AMI: Amazon Linux 2 또는 Ubuntu 20.04 LTS
    • 인스턴스 유형: t2.micro (Free Tier)
    • 보안 그룹:
      • HTTP (80), HTTPS (443), SSH (22) 인바운드 규칙 추가.

1.2 EC2에 연결

로컬 머신에서 EC2에 SSH로 연결합니다:

ssh -i <your-key.pem> ubuntu@<your-ec2-public-ip>

2. Docker 및 필수 도구 설치

2.1 시스템 업데이트

sudo apt update -y && sudo apt upgrade -y

2.2 Docker 설치

sudo apt install -y docker.io
sudo systemctl start docker
sudo systemctl enable docker
sudo usermod -aG docker $USER
logout  # 이후 다시 로그인

2.3 Git 및 Node.js 설치

sudo apt install -y git
curl -fsSL https://deb.nodesource.com/setup_20.x | sudo -E bash -
sudo apt install -y nodejs

3. React 프로젝트 생성 및 테스트

3.1 React 앱 생성

npx create-react-app my-react-app
cd my-react-app

3.2 앱 실행 및 테스트

npm start

브라우저에서 http://:3000로 접속하여 앱을 확인합니다.

4. Docker로 React 앱 설정

4.1 Dockerfile 생성

React 앱 디렉토리 my-react-app에서 Dockerfile을 작성합니다:

nano Dockerfile

다음 내용을 추가합니다:

# Stage 1: Build the React app
FROM node:20 AS build
WORKDIR /app
COPY package.json ./
RUN npm install
COPY . ./
RUN npm run build

# Stage 2: Serve the app with Nginx
FROM nginx:alpine
COPY --from=build /app/build /usr/share/nginx/html
EXPOSE 80
CMD ["nginx", "-g", "daemon off;"]

4.2 Docker 이미지 빌드 및 테스트

docker build -t my-react-app:latest .
docker run --name react-app -d -p 3000:80 my-react-app:latest

브라우저에서 http://:3000로 접속하여 앱을 확인합니다.

5. Docker Hub 설정

5.1 Docker Hub 로그인

docker login

5.2 이미지 태그 및 푸시

docker tag my-react-app:latest devsungyeon1103/my-react-app:latest
docker push devsungyeon1103/my-react-app:latest
Docker Hub에서 my-react-app 이미지를 확인합니다.

6. Nginx와 Docker Compose 설정

6.1 프로젝트 디렉토리 생성

mkdir -p ~/my-project/nginx-config
cd ~/my-project

6.2 docker-compose.yml 생성

nano docker-compose.yml

다음 내용을 추가합니다:

version: '3.3'
services:
  nginx:
    image: nginx:latest
    container_name: nginx-container
    ports:
      - "80:80"
    volumes:
      - ./nginx-config/nginx.conf:/etc/nginx/conf.d/default.conf:ro
    networks:
      - react-network

  react-app-3001:
    image: devsungyeon1103/my-react-app:latest
    container_name: react-app-3001
    ports:
      - "3001:80"
    networks:
      - react-network

  react-app-3002:
    image: devsungyeon1103/my-react-app:latest
    container_name: react-app-3002
    ports:
      - "3002:80"
    networks:
      - react-network

networks:
  react-network:
    driver: bridge

6.3 Nginx 설정 파일 추가

nano nginx-config/nginx.conf

다음 내용을 추가합니다:

upstream react_servers {
    server react-app-3001:80;
    server react-app-3002:80;
}

server {
    listen 80;

    location / {
        proxy_pass http://react_servers;
        proxy_set_header Host $host;
        proxy_set_header X-Real-IP $remote_addr;
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
        proxy_set_header X-Forwarded-Proto $scheme;
    }
}

7. Docker Compose 실행 및 테스트

7.1 Docker Compose 실행

docker-compose up -d

7.2 확인

브라우저에서 http://로 접속하여 React 앱을 확인합니다.

8. GitHub Actions 설정

8.1 GitHub Actions Workflow 파일 작성

리포지토리의 .github/workflows/main.yml 파일을 생성합니다:

name: CI/CD for React App

on:
  push:
    branches:
      - main

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

    steps:
      - name: Checkout code
        uses: actions/checkout@v3
    
      - name: Set up Node.js
        uses: actions/setup-node@v3
        with:
          node-version: 20
    
      - name: Install dependencies
        run: npm install
    
      - name: Build React app
        run: npm run build
    
      - name: Login to Docker Hub
        run: echo "$" | docker login -u "$" --password-stdin
    
      - name: Build and Push Docker Image
        uses: docker/build-push-action@v4
        with:
          context: .
          file: ./Dockerfile
          push: true
          tags: devsungyeon1103/my-react-app:latest
    
      - name: Deploy to EC2
        uses: appleboy/ssh-action@v0.1.8
        with:
          host: $
          username: ubuntu
          key: $
          port: 22
          script: |
            cd ~/my-project
            git pull origin main
            docker-compose down
            docker-compose pull
            docker-compose up -d

9. GitHub Secrets 설정

GitHub에서 다음 Secrets를 추가합니다:

DOCKER_USERNAME: devsungyeon1103 DOCKER_PASSWORD: Docker Hub 비밀번호 또는 토큰. EC2_HOST: EC2 퍼블릭 IP. EC2_PRIVATE_KEY: .pem 파일 내용.

10. 전체 테스트

10.1 코드를 GitHub에 푸시

git add .
git commit -m "Set up CI/CD pipeline"
git push origin main

10.2 GitHub Actions 실행 확인

GitHub의 Actions 탭에서 실행 상태를 확인합니다.

10.3 EC2에서 최신 React 앱 확인

docker ps

추가 질문이나 도움이 필요하면 언제든 문의해주세요! 😊

top

댓글남기기

참고