👒내 포트폴리오 웹사이트 만들기👒 : CICD 구축

퇴원한 기념 꼬모 모자선물~~~~

믕믕

---

👒  CICD 구축 👒

뀨업에 적용했던 거 그대로 한다

이슈 생성!

꼬이는 바람에 #2이미써서... real2다. ㅋㅋ

---

🍋‍🟩 .github 푸시 권한 해결

refusing to allow a Personal Access Token to create or update workflow `.github/workflows/deploy.yaml` without `workflow` scope

 

현재 사용 중인 Personal Access Token(PAT)이 GitHub에서 워크플로우 파일(예: .github/workflows/deploy.yaml)을 업데이트할 수 있는 권한(workflow scope)을 가지고 있지 않기 때문에 발생

 

GitHub Actions 워크플로우를 추가하거나 업데이트하려면 토큰에 workflow 권한이 필요합니다.

1. Personal Access Token(PAT) 업데이트

repo (전체적인 저장소 권한) / workflow (워크플로우 업데이트 권한) 포함하기

2. 새로운 토큰으로 Git Push 재시도

---

🍋‍🟩 docker

도커 허브 레포 생성

dockerfile 생성

# 1단계: React 애플리케이션 빌드
FROM node:18-alpine as build

# 작업 디렉토리 설정
WORKDIR /app

# 패키지 파일 복사 및 의존성 설치
COPY package.json package-lock.json ./
RUN npm install

# 소스 코드 복사 및 애플리케이션 빌드
COPY . .
RUN npm run build

# 2단계: Nginx로 빌드된 파일 제공
FROM nginx:alpine

# 빌드된 파일을 Nginx의 html 디렉토리로 복사
COPY --from=build /app/dist /usr/share/nginx/html

# 포트 80 노출
EXPOSE 80

# Nginx 시작
CMD ["nginx", "-g", "daemon off;"]

이미지 빌드

docker build -t my-react-app .

실행

docker run -p 80:80 my-react-app

잘됨

+

Nginx

고성능의 웹 서버이자 리버스 프록시 서버, 메일 프록시 서버, 그리고 로드 밸런서로 널리 사용되는 오픈 소스 소프트웨어

가볍고 빠르며, 높은 동시성을 제공하는 웹 서버로 많은 웹 사이트와 서비스에서 사용

1. 웹 서버

• 정적 파일 제공: HTML, CSS, JavaScript, 이미지와 같은 정적 파일을 빠르게 제공하는 데 특화/ 높은 성능과 가벼운 메모리 사용량
• 동적 콘텐츠 처리: 동적 콘텐츠를 처리할 수 있는 애플리케이션 서버(예: Node.js, PHP-FPM)로 요청을 전달하는 역할
• 캐싱: 웹 사이트의 정적 콘텐츠를 캐싱하여 빠르게 제공
• 압축: 클라이언트로 전송하는 데이터를 압축하여 전송 속도를 향상

2. 리버스 프록시 서버

• 클라이언트로부터 들어오는 요청을 받아 백엔드 서버로 전달하는 리버스 프록시 역할
• 백엔드 서버의 IP와 포트를 노출하지 않고도 요청을 SSL/TLS를 적용해 안전하게 통신

3. 로드 밸런서

• 여러 대의 서버에 들어오는 요청을 분산시키는 로드 밸런서로 사용
• 이때 다양한 분산 방식(라운드 로빈, IP 해시, 가중치 분배 등)을 지원하여 부하를 고르게 분산

 

사용 사례

• 정적 웹 사이트 호스팅: React, Vue, Angular 등 프론트엔드 애플리케이션을 Nginx로 정적 파일로 배포
• 리버스 프록시 및 API 게이트웨이: 백엔드 서버(Node.js, Django, Flask 등) 앞단에 위치해 클라이언트와 백엔드 서버 사이의 중계 역할을 하며, 보안 및 부하 분산을 담당

---

🍋‍🟩 AWS ec2 인스턴스 생성

우분투 t2로

포트 3024

+ 탄력적 ip 할당

 

+ cat으로 pem 파일 내용 확인

 

로컬로 인스턴스 접속하기

~/.ssh/

chmod 400 pofolAction.pem

ssh -i pofolAction.pem ubuntu@<EC2-Instance-Public-IP>

- 도커 깔기

에에~근데 인스턴스에 도커를 항상 켜 놓은 상태로 잇어야 하나? 액션으로 킬 수는 없나

---

🍋‍🟩 GitHub Secrets 설정

AWS_ACCESS_KEY_ID - AWS 액세스 키
AWS_SECRET_ACCESS_KEY - AWS 비밀 키
EC2_SSH_PRIVATE_KEY - EC2 인스턴스에 로그인하는 데 사용되는 SSH 개인 키
EC2_HOST - EC2 인스턴스의 IP 주소나 도메인 이름
EC2_USER - EC2 인스턴스에 로그인할 때 사용하는 사용자 이름(기본적으로 ec2-user)

DOCKER_USERNAME - 도커 유저네임
DOCKER_PASSWORD - 도커 비밀번호

---

🍋‍🟩 deploy.yaml

name: Deploy to AWS EC2 using Docker  # 워크플로우 이름

on:
  push:
    branches:
      - main  # main 브랜치에 푸시될 때 이 워크플로우를 실행

env:
  DOCKER_IMAGE: celina324/goldchaeportfolio  # 사용할 Docker 이미지 이름을 환경 변수로 설정

jobs:
  build-and-push-docker:  # Docker 이미지를 빌드하고 푸시하는 작업
    runs-on: ubuntu-latest  # 워크플로우가 실행될 GitHub Actions 호스트 환경

    steps:
      - uses: actions/checkout@v3  # 리포지토리의 코드를 체크아웃하여 사용할 수 있도록 함

      - name: Set up Docker Buildx
        uses: docker/setup-buildx-action@v2  # Docker Buildx를 설정하여 멀티 플랫폼 빌드를 가능하게 함

      - name: Log in to Docker Hub
        uses: docker/login-action@v2  # Docker Hub에 로그인
        with:
          username: ${{ secrets.DOCKER_USERNAME }}  # GitHub Secrets에 저장된 Docker Hub 사용자 이름
          password: ${{ secrets.DOCKER_PASSWORD }}  # GitHub Secrets에 저장된 Docker Hub 비밀번호

      - name: Build and push Docker image
        uses: docker/build-push-action@v3  # Docker 이미지를 빌드하고 Docker Hub에 푸시
        with:
          context: .  # Docker 빌드 컨텍스트 설정, 현재 디렉토리를 사용
          file: ./Dockerfile  # 사용할 Dockerfile 경로
          push: true  # Docker 이미지를 빌드한 후 푸시할지 여부
          tags: ${{ env.DOCKER_IMAGE }}:latest, ${{ env.DOCKER_IMAGE }}:${{ github.sha }}  # Docker 이미지에 태그 추가 (latest와 GitHub SHA)

  deploy_to_ec2:  # Docker 이미지를 EC2 인스턴스에 배포하는 작업
    needs: build-and-push-docker  # 이 작업은 앞선 'build-and-push-docker' 작업이 완료된 후에 실행됨
    runs-on: ubuntu-latest  # 워크플로우가 실행될 GitHub Actions 호스트 환경

    steps:
      - name: Deploy to EC2
        uses: appleboy/ssh-action@master  # SSH를 사용하여 원격 서버에 연결하고 스크립트를 실행할 수 있는 액션
        with:
          host: ${{ secrets.EC2_HOST }}  # GitHub Secrets에 저장된 EC2 인스턴스의 퍼블릭 IP 주소
          username: ${{ secrets.EC2_USER }}  # GitHub Secrets에 저장된 EC2 사용자 이름 (예: ec2-user)
          key: ${{ secrets.EC2_SSH_PRIVATE_KEY }}  # GitHub Secrets에 저장된 SSH 프라이빗 키

          # EC2 인스턴스에서 실행할 스크립트
          script: |
            if ! docker pull ${{ env.DOCKER_IMAGE }}:latest; then  # Docker Hub에서 최신 이미지를 가져옴
              echo "Failed to pull the latest image."  # 실패 시 메시지 출력
              exit 1  # 스크립트 종료
            fi
            docker stop qup-frontend || true  # 실행 중인 컨테이너가 있으면 중지
            docker rm qup-frontend || true  # 중지된 컨테이너가 있으면 제거
            docker run -d -p 80:80 --name qup-frontend ${{ env.DOCKER_IMAGE }}:latest  # 새 컨테이너를 백그라운드에서 실행, 포트 80을 호스트에 노출하고 이름을 'qup-frontend'로 지정

하하! 12트의 난 이제 없다 

2트성공

이미지푸시도잘되었꾼..

---

🍋‍🟩 배포 화면

는....또 안 보이는데..

인스턴스 들어가서 보자..

 

<현재 상태>

Dockerfile:

EXPOSE 80: Docker 컨테이너 내부에서 80번 포트를 노출하도록 설정

vite.config.ts:

server: { port: 3024 }: Vite 개발 서버가 3024번 포트에서 실행되도록 설정

EC2 인스턴스의 보안 그룹:

인바운드 규칙에 3024번 포트와 80번 포트에 대한 허용 규칙

3024 포트에 대한 인바운드 트래픽이 0.0.0.0/0으로 설정되어 있어, 모든 IP에서 접근 가능

 

<문제>

포트 불일치:

Docker 컨테이너의 EXPOSE는 80번 포트로 설정되어 있지만, vite.config.ts에서는 3024번 포트를 사용

이로 인해 컨테이너 내부에서 Vite 서버가 3024번 포트에서 실행되지만, 외부에서는 80번 포트로 노출되고 있어 연결이 실패

포트 매핑 필요:

Docker 컨테이너 실행 시 호스트의 3024번 포트를 컨테이너 내부의 3024번 포트와 매핑해야 합니다.

 

<해결>

Vite 서버를 80번 포트로 설정

docker run -d -p 3024:80 ~~~ 로 실행

 

으아악 안 되는데

http://<EC2-Public-IP>:3024 이건되는데 http://<EC2-Public-IP>이건안된,ㄴ데

으앙 3024 내 생일 넣고 싶은데 그냥 80:80

 

 

아이고 드디어 되네 

본 게임 시작도 안 했는데 지쳤다...