React, Next 배포와 배포 자동화 A부터 Z [1주차] [GitHub Action 환경에서의 AWS CF, S3 배포 설정 및 배포자동화 (React CSR)]

 

React, Next 배포와 배포 자동화 A부터 Z [1주차] [GitHub Action 환경에서의 AWS CF, S3 배포 설정 및 배포자동화 (React CSR)]

 

 

 

 

 

 

실습 참고

CloudFront, S3 쉽게 배포하기 

GitHub Action에서 React 지속적 전달 구현하기 (CF, S3)

 

---

 

이번 1주차에 진행했던 내용은 GitHub Action 환경에서의 AWS CF, S3 배포 설정 및 배포자동화 (React CSR)에 대한 내용이였습니다.

 

 

 

이번 주차에서 중점으로 배웠던 항목은 다음과 같습니다.

 

1. GitHub Action의 특성
2. CI/CD 개념
3. aws cli, terraform
4. GH CLI

 

 

이번 주차의 과정을 진행하면서 얻고자하는 역량은 무엇일까요?

 

구매한 도메인을 AWS를 통해 배포를 하는 것 뿐만 아니라 자동화 기능을 통해 main 브랜치에 push시 자동으로 빌드 및 배포까지 진행할 수 있는 GitHub Action을 작성할 수 있는 역량을 기른다.

 

 

 

 

🌐 인프라 구조

 

 

가비아에서 도메인을 구매하여 배포과정을 진행하였습니다. (bmy1320.shop)

 

간단히 인프라 구조에 대해 설명을 해보겠습니다.

 

1. 구매한 도메인 bmy1320.shop을 검색해봅시다.

 

2. 먼저 DNS에 bmy1320.shop 도메인에 대한 IP 주소 요청이 갈 것입니다.

 

3. 도메인의 네임 서버 정보가 AWS Route 53으로 설정되어 있어, DNS는 AWS Route 53 네임 서버에 대한 IP 주소를 반환합니다.

 

4. 이후 웹 브라우저는 AWS Route 53 네임서버에 대한 IP 주소로 HTTPS 요청을 보냅니다.

 

5. AWS Route 53은 bmy1320.shop 도메인에 대한 설정을 확인하고, 해당 도메인에 대한 A 레코드가 있는지 확인합니다.

 

6. AWS Route 53은 CloudFront에 대한 A 레코드를 확인하고, CloudFront로의 요청을 반환합니다.

 

7. ColudFront는 요청을 받고, 설정된 HTTPS 프로토콜을 따르기 위해 사용자의 브라우저에 대한 SSL/TLS 연결을 설정합니다.

    (ACM으로 TLS/SSL 인증서를 발급받고 나면 해당 인증서의 Key & Value 값을 Route 53의 CNAME로 등록해야 하는데, AWS에서 이 과정을 자동으로 등록해줍니다.)

 

8. CloudFront는 요청된 파일을 원본 저장소인 S3에서 가져오고, 설정된 기본 경로인 /index.html에 있는 리액트 파일에 접근합니다.

 

9. CloudFront는 가져온 리액트 파일을 사용자의 브라우저로 전송하여 화면에 렌더링 될 수 있도록 합니다.

 

10. 사용자의 웹 브라우저는 리액트 파일을 해석하여 화면에 표시하고, 사용자는 bmy1320.shop에 접속하여 CSR로 배포된 리액트 애플리케이션을 확인할 수 있습니다.

 

 

 

 

---

 

 

🖥️ 배포 화면

수정 전(왼) 수정 후(오)

 

 

GitHub Action 자동화 모니터링

 

 

 

 

코드를 수정하고 main 브랜치에 푸시하면 자동으로 배포가 수행되는 것을 확인할 수 있다.

 

 

---

느낀점

최근 들어, AWS 배포에 대한 관심이 많아져서 해당 과정에 대한 학습을 필요로 했었다.

(프론트엔드 개발자라면 필수적으로 알아야하지 않을까? 라는 생각이 컸다.)

 

그러다 때마침 열린 이 AWS 배포 스터디를 알게 되어서 고민도 없이 신청하여 학습을 진행하고 있다.

 

이번 주차에서 배운 내용들은 실무에서 실제로 사용하고 있는 과정과 비슷한 부분들이 있어 도움이 많이 되었다.

 

특히, 가비아에서 도메인을 직접 구매하여 연결해보기도 하고 깃헙액션을 등록해보면서 전반적인 자동 배포 프로세스를 이해할 수 있게 되었다.

 

때마침, 리액트 딥다이브 스터디에서 CI 환경 구축하는 법을 배운 것 또한 이번 실습을 이해하는데 도움이 되었다.

 

name: chapter9 build  => 액션의 이름
run-name: ${{ github. actor }} has been added new commit.
=> 액션이 실행될 때 구별할 수 있는 타이틀명
   설정돼 있지 않다면 풀 리퀘스트 이름이나 마지막 커밋 메시지 등이 출력

on: => 필수 값, 언제 이 액션을 실행할지를 정의
  push:
    branches-ignore: 
      - 'main' => 이 브랜치에 푸시가 발생했을 때는 실행하지 않는다.
    paths:
      - ./chapter9/zero-to-next => 이 저장소에 푸시가 되면 실행한다.

jobs: => 필수값, 해당 액션에서 수행할 잡을 정의
  build: => name과 같은 역할
    runs-on: ubuntu-latest => 어느 환경에서 해당 작업이 실행될지를 결정
                              ubuntu-latest를 선언하면 깃허브에서 제공하는 서버를 씀.
                              
    steps: => 해당 잡에서 순차적으로 수행할 작업을 정의한다.
      - uses: actions/checkout@v3 => 깃허브에서 제공하는 기본 액션으로 이 액션을 사용해서 작업한다.
      - uses: actions/setup-node@v3
        with: => 노드 최신 버전을 같이 설치
          node-version: 16
      - name: 'install dependencies' => 해당 스텝의 명칭을 지정
        working-directory: ./chapter9/zero-to-next => 뒤이어 수행할 작업을 해당 디렉토리에서 수행
        run: npm ci => 수행할 작업을 명시
      - name: 'build'
        working-directory: ./chapter9/zero-to-next
        run: npm run build

 

딥다이브에서 작성했었던 깃헙 액션 파일인데, 이 흐름을 이해하는 것이 크게 도움이 되었다. 

 

참고용으로 올려본다.

 

 

 

 

최종적으로 이 경험들을 통해 내가 갖추고 싶은 역량은 AWS 배포 사이클에 대한 완벽한 이해, GitHub Action을 자유롭게 작성할 수 있는 능력이다.

 

추후, JenKins로 배포하는 것 또한 배울 예정인데 기대가 된다.