S3 버킷에서 호스팅되는 React 애플리케이션용 CI/CD 파이프라인을 생성하기 위한 CloudFormation 템플릿

이 기사에서는 S3 버킷에서 정적 웹 사이트로 호스팅되는 React 웹 앱용 CI/CD 파이프라인을 생성하는 방법에 대한 단계별 가이드를 제공합니다.

아래는 이 솔루션을 구축하는 데 사용된 AWS 서비스를 보여주는 아키텍처 다이어그램입니다.



이제 아키텍처를 검토했으므로 바로 시작하겠습니다.

반응 앱 만들기

자신의 반응 응용 프로그램을 따라하고 싶다면 자유롭게 그렇게 하십시오. 그렇지 않은 경우 GitHub로 이동하여 repo 을 복제합니다.

빌드 사양 파일 생성

리포지토리를 복제한 후 잠시 시간을 내어 buildspec.yml 파일을 검토합니다. 이 파일은 애플리케이션 빌드 방법에 대한 AWS CodeBuild 지침을 제공하는 데 사용됩니다. 설치, pre_build, 빌드 및 post_build의 4단계가 있으며 마지막으로 아티팩트 파일을 출력합니다.
참고: buildspec 파일은 디렉터리 내부의 루트 수준에서 생성됩니다.

version: 0.2

phases:
  install:
    runtime-versions:
      nodejs: 16

  pre_build:
    commands:
      # install dependencies
      - echo installing dependencies...
      - yarn install

  build:
    commands:
      # run build script
      - echo Build started on `date`
      - echo Building React Application...
      - yarn build

  post_build:
    commands:
      - echo Build completed on `date`

artifacts:
  # include all files required to run application
  # we include only the static build files
  files:
    - "**/*"
   # reference directory where build file is located
  base-directory: "build"

CloudFormation 템플릿 생성

다음으로 파이프라인에 대한 리소스를 생성하는 CloudFormation 템플릿을 살펴보겠습니다.

먼저 매개변수를 정의합니다. 이들은 나중에 코드에서 참조로 사용됩니다.

AWSTemplateFormatVersion: 2010-09-09
Description: This template is used to create a CI/CD Pipeline that deploys a React Web app to S3 for static website hosting.

# Parameters to be used through out the template
Parameters:
  Stage:
    Type: String
    Default: dev
  AppName: 
    Type: String
    Default: <APP NAME>
  GithubUserName:
    Type: String
    Default: <GITHUB USERNAME>
  GithubRepo:
    Type: String
    Default: <GITHUB REPO>
  GithubBranch:
    Type: String
    Default: <GITHUB BRANCH>
  GithubOAuthToken:
    Type: String
    Default: <GITHUB ACCESS TOKEN>

다음으로 IAM 정책을 생성하여 리소스에 적절한 권한을 부여합니다.

# Create role for CodeBuild
  CodeBuildRole:
    Type: AWS::IAM::Role
    Properties:
      AssumeRolePolicyDocument:
        Version: "2012-10-17"
        Statement:
          - 
            Effect: Allow
            Principal:
              Service:
                - "codebuild.amazonaws.com"
            Action:
              - "sts:AssumeRole"
      Path: /service-role/
      Policies:
        - PolicyName: root
          PolicyDocument:
            Version: "2012-10-17"
            Statement: 
              - 
                Effect: Allow
                Action:
                  - "s3:GetObject"
                  - "s3:GetObjectVersion"
                  - "s3:GetBucketVersioning"
                  - "s3:PutObject"
                  - "s3:PutObjectAcl"
                  - "s3:PutObjectVersionAcl"
                Resource: 
                  - !GetAtt PipelineBucket.Arn
                  - !Join ['', [!GetAtt PipelineBucket.Arn, "/*"]]
              - 
                Effect: Allow
                Action:
                  - "s3:GetObject"
                  - "s3:GetObjectVersion"
                  - "s3:GetBucketVersioning"
                  - "s3:PutObject"
                  - "s3:PutObjectAcl"
                  - "s3:PutObjectVersionAcl"
                Resource: 
                  - !GetAtt DeployBucket.Arn
                  - !Join ['', [!GetAtt DeployBucket.Arn, "/*"]]
              -
                Effect: Allow
                Action:
                  - "logs:CreateLogGroup"
                  - "logs:CreateLogStream"
                  - "logs:PutLogEvents"
                  - "cloudfront:CreateInvalidation"
                Resource:
                  - "*"
      Tags:
        - Key: Name
          Value: !Join ['-', [!Ref AppName, !Ref 'AWS::AccountId', 'BuildRole', !Ref Stage]]


  # Create role for CodePipeline
  CodePipeLineRole:
    Type: AWS::IAM::Role
    Properties:
      AssumeRolePolicyDocument:
        Version: "2012-10-17"
        Statement:
          - 
            Effect: Allow
            Principal:
              Service:
                - "codepipeline.amazonaws.com"
            Action:
              - "sts:AssumeRole"
      Policies:
        - PolicyName: root
          PolicyDocument:
            Version: "2012-10-17"
            Statement: 
              - 
                Effect: Allow
                Action:
                  - "s3:GetObject"
                  - "s3:GetObjectVersion"
                  - "s3:GetBucketVersioning"
                  - "s3:GetObjectAcl"
                  - "s3:PutObject"
                  - "s3:PutObjectAcl"
                  - "s3:PutObjectVersionAcl"                  
                Resource: 
                  - !GetAtt PipelineBucket.Arn
                  - !Join ['', [!GetAtt PipelineBucket.Arn, "/*"]]
              - 
                Effect: Allow  
                Action:
                  - "codebuild:BatchGetBuilds"
                  - "codebuild:StartBuild"
                Resource: "*"
              - 
                Effect: Allow  
                Action:
                  - "codecommit:GetRepository"
                  - "codecommit:GetBranch"
                  - "codecommit:GetCommit"
                  - "codecommit:UploadArchive"
                  - "codecommit:GetUploadArchiveStatus"
                  - "codecommit:CancelUploadArchive"
                Resource: "*"                
      Tags:
        - Key: Name
          Value: !Join ['-', [!Ref AppName, !Ref 'AWS::AccountId', 'PipelineRole', !Ref Stage]]

정책 후에 우리는 codebuild가 사용할 빌드 프로젝트를 생성할 것입니다.

  # Create Code Build Project
  CodeBuild:
    Type: 'AWS::CodeBuild::Project'
    Properties:
      Name: !Sub ${AWS::StackName}-CodeBuild
      ServiceRole: !GetAtt CodeBuildRole.Arn
      Artifacts:
        Type: CODEPIPELINE
        Name: MyProject
      Source: 
        Type: CODEPIPELINE
      Environment:
        ComputeType: BUILD_GENERAL1_SMALL
        Type: LINUX_CONTAINER
        Image: aws/codebuild/amazonlinux2-x86_64-standard:3.0
      Source:
        Type: CODEPIPELINE
        # This file (buildspec.yml In Source code) contains commands to Create and Push a docker image to the ECR_REPOSITORY_URI
        BuildSpec: buildspec.yml

      Tags:
        - Key: Name
          Value: !Join ['-', [!Ref AppName, !Ref 'AWS::AccountId', 'BuildProj', !Ref Stage]]

그런 다음 3단계 소스, 빌드 및 배포가 있는 파이프라인을 만듭니다.
참고: 소스 선언의 경우 GitHub인 타사 공급자를 사용하고 있습니다. AWS에서 사용할 인증 토큰을 GitHub에서 생성해야 합니다.

# Create CodePipeline with 3 stages (Source, Build and Deploy)
  CodePipeline:
    Type: 'AWS::CodePipeline::Pipeline'
    Properties:
      RoleArn: !GetAtt CodePipeLineRole.Arn
      Name: !Join ['-', [!Ref AppName, !Ref 'AWS::AccountId', 'CodePipeLine',!Ref Stage]]
      ArtifactStore:
        Location: !Ref PipelineBucket
        Type: S3

      # Stages declaration
      Stages:
     # Download source code from Github Repo to source-output-artifacts path in S3 Bucket
        - 
          Name: Source
          Actions: 
            - 
              Name: SourceAction
              ActionTypeId: 
                 Category: Source
                 Owner: ThirdParty
                 Provider: GitHub
                 Version: 1
              OutputArtifacts: 
                - 
                  Name: MyApp
              Configuration:                
                 Repo: !Ref GithubRepo
                 Branch: !Ref GithubBranch
                 Owner: !Ref GithubUserName
                 OAuthToken: !Ref GithubOAuthToken

        # Build the project using the BuildProject and Output build artifacts to build-output-artifacts path in S3 Bucket
        - 
          Name: Build
          Actions: 
            - 
              Name: BuildAction
              ActionTypeId: 
                Category: Build
                Owner: AWS
                Version: 1
                Provider: CodeBuild
              InputArtifacts: 
                - 
                  Name: MyApp
              OutputArtifacts: 
                - 
                  Name: MyAppBuild
              Configuration:
                ProjectName: !Ref CodeBuild

        # Deploy the project to S3 Bucket for website hosting.
        - 
          Name: Deploy
          Actions: 
            - 
              Name: DeployAction
              ActionTypeId: 
                Category: Deploy
                Owner: AWS
                Version: 1
                Provider: S3
              InputArtifacts: 
                - 
                  Name: MyAppBuild  
              Configuration:                
                BucketName: !Ref DeployBucket
                Extract: 'true'                
      # Create a name tag for the pipeline
      Tags:
        - Key: Name
          Value: !Join ['-', [!Ref AppName, !Ref 'AWS::AccountId', 'CodePipeLine',!Ref Stage]]

이제 IAM 정책, 파이프라인 및 빌드 프로젝트가 있으므로 S3 버킷(스토어 파이프라인 아티팩트, 웹 사이트 호스트)을 정의할 차례입니다.

# Create S3 Buckets (Store Pipeline Artifacts, Website Host)
  PipelineBucket: 
    Type: 'AWS::S3::Bucket'
    Properties:
      BucketName: !Join ['-', [!Ref AppName, !Ref 'AWS::AccountId', 'pipelineartifacts', !Ref Stage]]

  DeployBucket:
    Type: 'AWS::S3::Bucket'
    Properties:
      BucketName: !Join ['-', [!Ref AppName, !Ref 'AWS::AccountId', 'website', !Ref Stage]]
      WebsiteConfiguration:
        IndexDocument: index.html
      AccessControl: PublicReadWrite
      CorsConfiguration:
        CorsRules:
        - AllowedOrigins: ['*']
          AllowedMethods: [GET]

  # Bucket policy that hosts the website
  DeploymentBucketPolicy: 
    Type: AWS::S3::BucketPolicy
    Properties: 
      Bucket: !Ref DeployBucket
      PolicyDocument: 
        Statement: 
          - 
            Action: 
              - "s3:GetObject"
            Effect: "Allow"
            Resource: 
              Fn::Join: 
                - ""
                - 
                  - "arn:aws:s3:::"
                  - 
                    Ref: DeployBucket
                  - "/*"
            Principal: "*"

AWS에 CloudFormation 템플릿 업로드

엄청난! 이제 CloudFormation 템플릿을 생성했으므로
이제 템플릿을 AWS에 업로드할 차례입니다.

1단계: AWS 콘솔에 로그인하고 CloudFormation으로 이동합니다. 아래와 비슷한 화면이 나타납니다. 스택 생성을 클릭합니다.



2단계: 템플릿 파일 업로드를 선택하고 Cloudformation 템플릿을 업로드합니다.



3단계: 스택에 적절한 이름을 지정하고 스택 매개변수에 적절한 값을 지정합니다.



4단계: 마지막 단계가 될 때까지 다음을 클릭합니다. 마지막 단계에서 확인란을 선택합니다. 이렇게 하면 AWS에서 템플릿이 IAM 리소스를 생성할 수 있습니다.



5단계: 스택을 생성하면 스택이 구축되는 동안 스택의 이벤트를 모니터링할 수 있습니다. 완전히 완료될 때마다 'CREATE_COMPLETE' 상태가 됩니다.



6단계: CodePipline으로 이동하면 파이프라인이 작동하는 것을 볼 수 있습니다.



7단계: S3로 이동하여 웹 사이트를 호스팅하는 S3 버킷을 봅니다. 속성 탭을 클릭하고 맨 아래까지 스크롤합니다. 웹사이트 URL이 표시되어야 합니다.



URL은 당사 웹 사이트를 로드해야 하며 아래 사이트가 표시되어야 합니다.



이제 웹 사이트 배포를 자동화하는 CI/CD 파이프라인을 구축했습니다.

마지막으로 파이프라인이 제대로 작동하는지 테스트하려면 git 분기에 커밋을 푸시합니다. 이렇게 하면 파이프라인이 자동으로 트리거됩니다.

모두 즐거운 코딩하세요. 👨🏾‍💻