Ec2+Docker+github Action+React 배포

리액트 애플리케이션에 대해 Docker를 사용하여 CI/CD를 설정하려면, GitHub Actions와 Docker를 조합해 클라이언트 빌드 및 배포를 자동화할 수 있습니다. 아래는 리액트 애플리케이션만을 위한 단계별 설정입니다.

---

1. React 프로젝트용 Dockerfile 작성

React 프로젝트 루트 디렉토리에 Dockerfile을 생성합니다:

# 1단계: Node.js 환경에서 React 빌드
FROM node:16 AS build
WORKDIR /app
COPY package.json package-lock.json ./
RUN npm install
COPY . .
RUN npm run build

# 2단계: Nginx로 빌드 결과 제공
FROM nginx:alpine
COPY --from=build /app/build /usr/share/nginx/html
EXPOSE 80
CMD ["nginx", "-g", "daemon off;"]

---

2. GitHub Actions 설정

리액트 애플리케이션을 Docker 이미지로 빌드하고 EC2에 배포하는 GitHub Actions 워크플로우를 생성합니다.

GitHub Actions Workflow 파일 생성

.github/workflows/react-deploy.yml 파일 작성:

name: React CI/CD without Docker Hub

on:

  push:

    branches:

      - main # main 브랜치에 푸시될 때 실행

jobs:

  build-and-deploy:

    runs-on: ubuntu-latest

    steps:

      # 1. GitHub Repository 체크아웃

      - name: Checkout Repository

        uses: actions/checkout@v3

      # 2. Docker 빌드

      - name: Build Docker Image

        run: |

          docker build -t portfolio_client:latest -f Dockerfile .

      # 3. Docker 이미지 압축

      - name: Save Docker Image

        run: |

          docker save portfolio_client:latest | gzip > portfolio_client.tar.gz

      # 4. EC2 서버로 Docker 이미지 전송

      - name: Transfer Docker Image to EC2

        env:

          EC2_PRIVATE_KEY: ${{ secrets.EC2_PRIVATE_KEY }}

          EC2_PUBLIC_IP: ${{ secrets.EC2_PUBLIC_IP }}

        run: |

          mkdir -p ~/.ssh

          echo "$EC2_PRIVATE_KEY" > ~/.ssh/id_rsa

          chmod 600 ~/.ssh/id_rsa

          scp -o StrictHostKeyChecking=no -i ~/.ssh/id_rsa portfolio_client.tar.gz ubuntu@$EC2_PUBLIC_IP:/home/ubuntu/

      # 5. EC2에서 Docker 이미지 로드 및 실행

      - name: Load and Run Docker Image on EC2

        env:

          EC2_PRIVATE_KEY: ${{ secrets.EC2_PRIVATE_KEY }}

          EC2_PUBLIC_IP: ${{ secrets.EC2_PUBLIC_IP }}

        run: |

          ssh -o StrictHostKeyChecking=no -i ~/.ssh/id_rsa ubuntu@$EC2_PUBLIC_IP << 'EOF'

            docker load < /home/ubuntu/portfolio_client.tar.gz

            docker stop portfolio_client || true && docker rm portfolio_client || true

            docker run -d --name portfolio_client -p 80:80 portfolio_client:latest

          EOF

---

해당 프로젝트 디렉토리 최상위에

Dockerfile생성

# 1단계: Node.js 환경에서 React 빌드

FROM node:16 AS build

WORKDIR /app

COPY package.json package-lock.json ./

RUN npm install

COPY . .

RUN npm run build

# 2단계: Nginx로 빌드 결과 제공

FROM nginx:alpine

COPY --from=build /app/build /usr/share/nginx/html

EXPOSE 80

CMD ["nginx", "-g", "daemon off;"]

3. GitHub Secrets 설정

GitHub Repository의 Settings > Secrets and variables > Actions에서 아래 값을 추가합니다:

1. DOCKER_USERNAME: Docker Hub 사용자 이름.
2. DOCKER_PASSWORD: Docker Hub 비밀번호.
3. EC2_PRIVATE_KEY: EC2 서버에 접근 가능한 SSH 프라이빗 키.(ppm파일 메모장 내용)
4. EC2_PUBLIC_IP: EC2 인스턴스의 퍼블릭 IP.

---

4. EC2 환경 설정

EC2에 Docker 설치

EC2에서 Docker를 설치하고 설정합니다:

sudo apt-get update
sudo apt-get install -y docker.io
sudo systemctl start docker
sudo systemctl enable docker

---

5. 작동 방식

1. 리액트 프로젝트를 수정 후 GitHub의 main 브랜치에 푸시하면 워크플로우가 실행됩니다.
2. Docker 이미지를 빌드하고 Docker Hub에 푸시합니다.
3. EC2에 연결하여 최신 Docker 이미지를 가져오고 컨테이너를 재실행합니다.
4. Nginx가 자동으로 새 컨테이너를 통해 정적 파일을 제공합니다.

---

필요하면 위 내용을 더 구체적으로 확장할 수 있습니다! 😊