CI/CD with React and Next

[3주차] GitHub Action 환경에서의 AWS API Gateway, Lambda 배포 설정 및 배포 자동화 (Next SSR) - Console

[월간-CS][24년 4월] React, Next 배포와 배포 자동화 A부터 Z
이민석's avatar
이민석
Apr 23, 2024
[3주차] GitHub Action 환경에서의 AWS API Gateway, Lambda 배포 설정 및 배포 자동화 (Next SSR) - Console
Contents
인프라 소개하기사전 지식사전 환경 구성Docker 설치하기실습 진행하기네트워크 리소스 생성하기프로젝트 포크(Fork)하기Amazon ECR 리포지토리 생성하기Amazon ECR 초기 이미지 배포하기AWS Lambda를 위한 IAM 역할 배포하기AWS Lambda를 위한 보안 그룹 배포하기AWS Lambda 배포하기Amazon API Gateway 생성하기AWS Certificate Manager 생성하기Amazon CloudFront 생성하기Amazon Route53 A 레코드 생성하기테스트배포 자동화참고자료

이 문서는 [월간-CS][24년 4월] React, Next 배포와 배포 자동화 A부터 Z를 위해서 작성된 문서입니다. 이 문서에는 그 어떤 저작권이 없으며, 편하게 참고 및 사용하셔도 됩니다.

인프라 소개하기

3주차 실습에서 사용될 인프라는 [3주차] AWS API Gateway, Lambda에 대한 이해를 기반으로 구현되었습니다.

사전 지식

  1. 사전 환경 구성

  2. Docker 설치하기

사전 환경 구성

이 문서를 진행하기 위해서 [1주차] CloudFront, S3 쉽게 배포하기 # 프로그램 설치 부분을 모두 진행해야 합니다. 최종적으로 적합한 권한이 포함된 aws profile 설정이 완료되어야 합니다.

해당 설정을 완료한 이후, 이 문서를 진행해주세요.

Docker 설치하기

Install Docker Engine을 따라서 각 운영 체제에 맞는 Docker를 설치해주세요.

실습 진행하기

  1. 네트워크 리소스 생성하기

  2. 프로젝트 포크(Fork)하기

  3. Amazon ECR 리포지토리 생성하기

  4. Amazon ECR 초기 이미지 배포하기

  5. AWS Lambda를 위한 IAM 역할 배포하기

  6. AWS Lambda를 위한 보안 그룹 배포하기

  7. AWS Lambda 배포하기

네트워크 리소스 생성하기

[2주차] GitHub Action 환경에서의 AWS ELB, EC2 배포 설정 및 배포 자동화 (Next SSR) - Console # 네트워크 리소스 생성하기와 동일하게 네트워크를 생성해주세요.

프로젝트 포크(Fork)하기

샘플용 프로젝트, Monthly-CS (GitHub) | 2024-04-cicd-week-3-template를 포크 떠주세요. 해당 프로젝트를 이용해서 이번 주차 실습이 진행됩니다.

Amazon ECR 리포지토리 생성하기

  1. AWS Console에서 ECR 검색해서 클릭하기

  2. 좌측 슬라이드에서 [Private Repository] - [Repositories] 클릭하기

  3. 우상 주황색의 [리포지토리 생성] 클릭하기

  4. [Amazon ECR] - [프라이빗 레지스트리] - [리포지토리] - [리포지토리 생성]에서 주요 설정값들을 아래 미리 보기 이미지를 참고하여 생성하기

    1. 주요 설정값

      1. 표시 여부 설정 : 프라이빗

      2. 리포지 토리 이름 : monthly-cs-ecr-next-server

    2. 미리 보기 이미지

Amazon ECR 초기 이미지 배포하기

이번 챕터는 프로젝트 포크(Fork) 단계에서 가져온 저장소를 기반으로 진행됩니다.

  1. 아래 명령어를 입력하여 Amazon ECR 사용을 위한 인증 처리

    1. 주요 입력값

      1. <AWS_ACCOUNT_ID> 조회하기

        aws sts get-caller-identity --query "Account" --output text --profile monthly-cs

      2. <STS_PASSWORD> 조회하기

        aws ecr get-login-password --region us-east-1 --profile monthly-cs

    2. 명령어

      docker login --username AWS <AWS_ACCOUNT_ID>.dkr.ecr.us-east-1.amazonaws.com

    3. 명령어 미리보기

  2. 도커 이미지 빌드하기

    docker build -t monthly-cs-ecr-next-server .

  3. 도커 이미지 태깅하기

    docker tag monthly-cs-ecr-next-server:latest <AWS_ACCOUNT_ID>.dkr.ecr.us-east-1.amazonaws.com/monthly-cs-ecr-next-server:latest

  4. 도커 이미지 푸쉬하기

    docker push <AWS_ACCOUNT_ID>.dkr.ecr.us-east-1.amazonaws.com/monthly-cs-ecr-next-server:latest

AWS Lambda를 위한 IAM 역할 배포하기

  1. AWS Console에서 IAM 검색해서 클릭하기

  2. 좌측 슬라이드에서 [엑세스 관리] - [역할] 클릭하기

  3. 우상단 주황색의 [역할 생성] 클릭하기

  4. [IAM] - [역할] - [역할 생성] - [1단계, 신뢰할 수 있는 엔티티 선택]에서 주요 설정값을 아래 이미지에 맞춰서 선택해주세요.

  5. [IAM] - [역할] - [역할 생성] - [2단계, 권한 추가]에서는 아무 것도 선택하지 말고 [다음]을 클릭해주세요.

  6. [IAM] - [역할] - [역할 생성] - [3단계, 이름 지정, 검토 및 생성]에서 주요 설정값을 아래 미리보기 이미지에 맞춰서 생성해주세요.

    1. 주요 설정

      1. 이름 : monthly-cs-iam-role-next-server

      2. 설명 : monthly-cs-iam-role-next-server

    2. 미리보기 이미지

  7. 좌측 슬라이드에서 [엑세스 관리] - [정책] 클릭하기

  8. 우상단 주황색의 [정책 생성] 클릭하기

  9. [IAM] - [정책] - [정책 생성] - [1단계, 권한 지정]에서 편집 모드를 JSON으로 하고 아래 정책 붙여넣기

    1. 권한 편집기

      여기서 말하는 <AWS_ACCOUNT_ID>는 우상단의 본인 닉네임을 클릭하면 계정 ID 항목에서 확인할 수 있습니다.

      {
	"Version": "2012-10-17",
	"Statement": [
		{
			"Effect": "Allow",
			"Action": "logs:CreateLogGroup",
			"Resource": "arn:aws:logs:us-east-1:<AWS_ACCOUNT_ID>:*"
		},
		{
			"Effect": "Allow",
			"Action": [
				"logs:CreateLogStream",
				"logs:PutLogEvents"
			],
			"Resource": [
				"arn:aws:logs:us-east-1:<AWS_ACCOUNT_ID>:log-group:/aws/lambda/sample:*"
			]
		},
		{
			"Effect": "Allow",
			"Action": [
				"ec2:CreateNetworkInterface",
				"ec2:DescribeNetworkInterfaces",
				"ec2:DeleteNetworkInterface"
			],
			"Resource": "*"
		}
	]
}

  10. [IAM] - [정책] - [정책 생성] - [2단계, 검토 및 생성]에서 주요 설정값을 아래 이미지를 참고하여 수정하고 [정책 생성]을 클릭해주세요.

    1. 이름 : monthly-cs-iam-policy-next-server

    2. 설명 : monthly-cs-iam-policy-next-server

  11. 좌측 슬라이드에서 [엑세스 관리] - [역할] 클릭하기

  12. 챕터 [람다를 위한 IAM 역할 배포하기]에서 6번째 단계에서 만든 monthly-cs-iam-role-next-server을 찾아서 클릭하기

  13. [IAM] - [역할] - [monthly-cs-iam-role-next-server] 우하단 하얀색 [권한 추가] - [정책 연결]을 클릭하기

  14. [IAM] - [역할] - [monthly-cs-iam-role-next-server] - [권한 추가]에서 챕터 [람다를 위한 IAM 역할 배포하기]에서 10번째 단계에서 만든 monthly-cs-iam-policy-next-server를 찾아서 클릭하고 [권한 추가] 클릭하기

AWS Lambda를 위한 보안 그룹 배포하기

  1. AWS Console에서 EC2 검색해서 클릭하기

  2. 좌측 슬라이드에서 [네트워크 및 보안] - [보안 그] 클릭하기

  3. 우상단 주황색의 [보안 그룹 생성] 클릭하기

  4. [EC2] - [보안 그룹] - [보안 그룹 생성]에서 주요 설정값을 아래 이미지를 참고하여 수정하고 우하단 주황색의 [보안 그룹 생성] 클릭하기

    1. 이름 : monthly-cs-sg-next-server

    2. 설명 : monthly-cs-sg-next-server

AWS Lambda 배포하기

  1. AWS Console에서 Lambda 검색해서 클릭하기

  2. 좌측 슬라이드에 [함수] 클릭하기

  3. [Lambda] - [함수] - [함수 생성]에서 주요 설정값을 아래 미리 보기 이미지를 참고하여 수정하여 [함수 생성] 클릭하기

    1. 주요 설정값

      1. 함수 유형 : 컨테이너 이미지

      2. 함수 이름 : monthly-cs-lambda-function-next-server

      3. 아키텍처 : x86_64

        일부 MacOS에서 빌드한 도커 이미지의 경우 arm64를 선택해야 한다는 게시글이 존재합니다.

      4. 기존 역할 사용 : monthly-cs-iam-role-next-server

    2. 미리 보기 이미지

  4. [Lambda] - [함수] - [monthly-cs-lambda-function-next-server]에서 [테스트] 탭을 클릭하고 추가로 우측 주황색의 [테스트] 버튼 클릭하기

    반환된 객체의 프로퍼티가 아래와 같다면 Next가 Lambda에 정상적으로 배포된 것입니다.

    1. statusCode : 200

    2. body : HTML 리턴

  5. (옵션) [Lambda] - [함수] - [monthly-cs-lambda-function-next-server]에서 [구성] 탭을 클릭하고 추가로 [VPC] 탭을 선택하고 주요 설정값을 아래 미리 보기 이미지를 참고해서 설정하고 우하단 주황색의 [저장] 클릭하기

    1. 주요 설정값

      1. VPC : monthly-cs-vpc 선택

      2. 서브넷 : monthly-cs-subnet-private1-us-east-1a 그리고 monthly-cs-subnet-private2-us-east-1c 선택

      3. 보안 그룹 : monthly-cs-sg-next-server 선택

    2. 미리 보기 이미지

Amazon API Gateway 생성하기

  1. AWS Console에서 API Gateway 검색해서 클릭하기

  2. 좌측 슬라이드에 [API] 클릭하기

  3. 우상단 주황색의 [API 생성] 클릭하기

  4. [API Gateway] - [API] - [API 생성]에서 [REST API]을 선택해서 [구축] 클릭하기

  5. [API Gateway] - [API] - [API 생성] - [REST API 생성]에서 주요 설정값을 아래 미리 보기 이미지를 참고하여 설정하고 나서 API 생성 클릭하기

    1. 주요 설정값

      1. 유형 : 새 API

      2. API 이름 : monthly-cs-agw-next-server

      3. 설명 : monthly-cs-agw-next-server

      4. API 앤드포인트 유형 : 지역

    2. 미리 보기 이미지

  6. [API Gateway] - [API] - [리소스 - monthly-cs-agw-next-server (고유키)]에서 [리소스 생성] 클릭하기

  7. [API Gateway] - [API] - [리소스 - monthly-cs-agw-next-server (고유키)] - [리소스 생성]에서 주요 설정값을 아래 미리 보기 이미지를 참고하여 설정하고 나서 리소스 생성 클릭하기

    1. 주요 설정값

      1. 프록시 리소스 : 활성화

      2. 리소스 경로 : /

      3. 리소스 이름 : {proxy+}

      4. 오리진 간 리소스 공유(CORS) : 활성

    2. 미리 보기 이미지

  8. [API Gateway] - [API] - [리소스 - monthly-cs-agw-next-server (고유키)]에 있는 [/] - [/{proxy+}] - [ANY]를 클릭하면 보이는 정의되지 않은 통합이라는 경고창의 맨우측의 [통합 편집]을 클릭하기

  9. [API Gateway] - [API] - [리소스 - monthly-cs-agw-next-server (고유키)] - [통합 요청 편집]에서 주요 설정값을 아래 미리 보기 이미지을 참고하여 설정하고 우하단 주황색의 [저장] 클릭하기

    1. 주요 설정값

      1. 통합 유형 : Lambda 함수

      2. Lambda 프록시 통합 : 활성화

      3. Lambda 함수 리전 : us-east-1

      4. Lambda 함수 이름 : monthly-cs-lambda-function-next-server

      5. 기본 제한 시간 : 활성화

    2. 미리 보기 이미지

  10. [API Gateway] - [API] - [리소스 - monthly-cs-agw-next-server (고유키)]에 있는 [/] 경로를 선택하고 우측의 [메서드 생성] 버튼 클릭하기

  11. [API Gateway] - [API] - [리소스 - monthly-cs-agw-next-server (고유키)]에서 9번 단계와 동일하게 monthly-cs-lambda-function-next-server 배포하기

    단, 메서드 유형은 ANY로 선택해주세요.

  12. [API Gateway] - [API] - [리소스 - monthly-cs-agw-next-server (고유키)]에 있는 [/] 경로를 선택하고 우측의 [CORS 활성화] 버튼 클릭하기

  13. [API Gateway] - [API] - [리소스 - monthly-cs-agw-next-server (고유키)] - [CORS 활성화]에서 주요 설정값을 아래 미리 보기 이미지를 참고하여 설정하고 저장 버튼 클릭하기

    1. 주요 설정값(그 외에는 선택 없음)

      1. 게이트 웨이 응답 : 기본 4XX, 기본 5XX

    2. 미리 보기 이미지

  14. [API Gateway] - [API] - [리소스 - monthly-cs-agw-next-server (고유키)]에서 우상단 주황색의 [API 배포] 클릭하기

    1. 스테이지 이름 : app

    2. 스테이지 설명 : app

AWS Certificate Manager 생성하기

week3.<구매한 도메인> 에 맞는 ACM을 생성하고 이를 Route53에 등록할 것입니다.

  1. AWS Console에서 ACM 검색해서 Certificate Manager 클릭하기

  2. 좌측 슬라이드에 [인증서 나열] 클릭하기

  3. 우상단 주황색의 요청 클릭하기

  4. [AWS Certificate Manager] - [인증서] - [인증서 요청]에서 인증서 유형을 퍼블릭 인증서 요청으로 선택하고 주황색 [다음] 버튼 클릭하기

  5. [AWS Certificate Manager] - [인증서] - [인즈엇 요청] - [퍼블릭 인증서 요청]에서 주요 설정값을 아래 미리 보기 이미지를 참고하여 설정하고 우하단 주황색의 요청 버튼 클릭하기

    1. 주요 설정값

      1. 완전히 정규화된 도메인 이름 : week3.<구매한_도메인명>

      2. 검증 방법 : DNS 검증 — 권장

      3. 키 알고리즘 : RSA 2048

    2. 미리 보기 이미지

  6. 좌측 슬라이드에 [인증서 나열] 클릭하기

  7. 생성한 인증서(Certificate)를 클릭하기

  8. [AWS Certificate Manager] - [인증서] - [<인증서 ID>]에서 도메인 박스의 우측에 있는 [Route53에서 레코드 생성] 버튼 클릭하기

Amazon CloudFront 생성하기

바로 위에서 생성한 week3.<구매한_도메인>에 대한 CloudFront 배포를 생성할 것입니다.

  1. AWS Console에서 CloudFront 검색해서 클릭하기

  2. 좌측 슬라이드에 [배포] 클릭하기

  3. 우상단 주황색의 [배포 생성] 클릭하기

  4. [CloudFront] - [배포] - [생성]에서 주요 설정값을 다음 미리 보기 이미지를 참고하여 설정 후, 우하단 주황색의 [배포 생성] 클릭하기

    1. 주요 설정값

    2. 미리 보기 이미지

Amazon Route53 A 레코드 생성하기

  1. AWS Console에서 Route53 검색해서 클릭하기

  2. 좌측 슬라이드에서 호스팅 영역 클릭하기

  3. 구매한 도메인 클릭하기

  4. [Route53] - [호스팅 영역] - [<도메인 명>]에서 우측 주황색의 [레코드 생성] 클릭하기

  5. [Route53] - [호스팅 영역] - [<도메인 명>] - [레코드 생성]에서 주요 설정값을 다음 미리 보기 이미지를 참고하여 설정 후 우하단 주황색의 레코드 생성 클릭하기

    1. 주요 설정값

      1. 레코드 이름 : week3

      2. 레코드 유형 : A

      3. 별칭 : 활성화

      4. 트래픽 라우팅 대상 (유형) : CloudFront 배포에 대한 별칭

      5. 트래픽 라우팅 대상 (값) : CloudFront 배포 아이디

    2. 미리 보기 이미지

테스트

  • week3.<구매인 도메인>으로 접속하고 실제로 Next 페이지가 나오는지 확인해봅시다.

배포 자동화

  1. 환경 변수 등록하기

    1. AWS_ACCESS_KEY

    2. AWS_SECRET_ACCESS_KEY

    3. AWS_ACCOUNT_ID

    4. AWS_CF_DIST_ID

  2. .github/workflows/deploy.yml 파일생성하기

  3. 아래 내용 붙여넣기

    name: 배포 자동화

on:
  push:
    branches: ["*"]

jobs:
  build:
    runs-on: ubuntu-latest
    steps:
      - name: Check Node v
        run: node -v
    
      - name: setup-node
        uses: actions/setup-node@v4
        with:
          node-version: 20
          
      - name: Install Dependencies
        run : yarn install
      
      - name: Build 
        run : yarn build
      
      - name: Upload to S3
        env:
          AWS_ACCESS_KEY_ID: ${{ secrets.AWS_ACCESS_KEY  }}
          AWS_SECRET_ACCESS_KEY: ${{ secrets.AWS_SECRET_ACCESS_KEY  }}
        run:
          aws ecr get-login-password --region us-east-1 | docker login --username AWS --password-stdin ${{ secrets.AWS_ACCOUNT_ID }}.dkr.ecr.us-east-1.amazonaws.com

      - name: Build Docker Image
        run:
          docker build -t monthly-cs-ecr-next-server .

      - name: Tag Docker Image
        run:
          docker tag monthly-cs-ecr-next-server:latest ${{ secrets.AWS_ACCOUNT_ID }}.dkr.ecr.us-east-1.amazonaws.com/monthly-cs-ecr-next-server:latest

      - name: Push Docker Image
        run:
          docker push ${{ secrets.AWS_ACCOUNT_ID }}.dkr.ecr.us-east-1.amazonaws.com/monthly-cs-ecr-next-server:latest

      - name: Deploy Lambda
        run:
          aws lambda update-function-code \
            --function-name monhtly-cs-lambda-function-next-server \
            --image-uri ${{ secrets.AWS_ACCOUNT_ID }}.dkr.ecr.region.amazonaws.com/monthly-cs-ecr-next-server:latest

          # aws ecr list-images --repository-name monthly-cs-ecr-next-server --query imageIds[0].imageTag --region us-east-1

      - name: Invalidate CloudFront Cache
        env:
          AWS_ACCESS_KEY_ID: ${{ secrets.AWS_ACCESS_KEY }}
          AWS_SECRET_ACCESS_KEY: ${{ secrets.AWS_SECRET_ACCESS_KEY }}
          AWS_EC2_METADATA_DISABLED: true
        run: aws cloudfront create-invalidation --distribution-id ${{ secrets.AWS_CF_DIST_ID  }} --paths "/*"

참고자료

Share article

More articles

See more posts

노트북 원격 접속하기 : Windows 11 -> Ubuntu 22.04

이민석's avatar
April 25, 2024
노트북 원격 접속하기 : Windows 11 -> Ubuntu 22.04

노트북 운영체제 변경하기 : Windows 11 -> Ubuntu 22.04

이민석's avatar
April 25, 2024
노트북 운영체제 변경하기 : Windows 11 -> Ubuntu 22.04

[3주차] AWS API Gateway, Lambda에 대한 이해

이민석's avatar
April 23, 2024
[3주차] AWS API Gateway, Lambda에 대한 이해

AWS ECS Deep Dive

이민석's avatar
April 22, 2024
AWS ECS Deep Dive
RSSPowered by inblog