단일 페이지 애플리케이션을 위한 CodeBuild, Github 및 S3가 포함된 간단한 CICD

목표

이것의 목표는 SPA(단일 페이지 앱)를 구축하고 AWS S3에 배포하기 위한 간단한 CI/CD 시스템을 만드는 것입니다.

요구 사항

개발 분기는 개발 환경에 배포해야 합니다.

마스터 분기의 릴리스는 프로덕션 환경에 배포해야 합니다.

한 곳에서 빌드, 테스트 및 배포할 수 있습니다.

도구

AWS CDK.

TypeScript.

전제 조건

AWS CDK에 익숙합니다.

타이프스크립트 프로젝트를 생성합니다. get started with typescript and the AWS CDK 을 참조하십시오.

lib/your-stack.ts 에 있는 스택을 업데이트할 수 있을 때까지 이에 대해 숙지하십시오.

Typescript에 익숙합니다.

CodeBuild와 로컬 빌드

이것은 수동으로 배포해야 하는 유일한 것입니다. 이 CodeBuild 환경은 SPA의 새 빌드 환경이 됩니다.

로컬 시스템에서 배포한 경우 AWS에서 항상 사용 가능한 환경으로 해당 환경을 효과적으로 대체합니다.

암호

AWS CDK를 사용하면 lib 디렉터리 내에서 스택을 업데이트하여 CodeBuild 환경을 생성할 수 있습니다.

import * as cdk from '@aws-cdk/core'
import * as codebuild from '@aws-cdk/aws-codebuild'
import * as iam from '@aws-cdk/aws-iam'

export class CiCdStack extends cdk.Stack {
  constructor(scope: cdk.Construct, id: string, props?: cdk.StackProps) {
    super(scope, id, props)

    // Define some basics information.
    const org = 'YourGithubOrgName'
    const repo = `YourRepoName`
    const develop = 'YourDevelopmentBranchName'
    // This is the builds spec that is associated with the project being built. This is where you'll deploy to S3 from.branchOrRef: '*', // * Covers all branches, tags, commit IDs, etc...
    const buildSpec = 'buildspec.yaml'
    const releaseFilter = "^refs\/tags\/v(0|[1-9]\d*)\.(0|[1-9]\d*)\.(0|[1-9]\d*).*$"

    // codeBuildIamPrincipal is shared across stacks.
    const codeBuildIamPrincipal = 'site-publisher'

    // Define the source details.
    const gitHubSource = codebuild.Source.gitHub({
      owner: org,
      repo: repo,
      webhook: true,
      // * Covers all branches, tags, commit IDs, etc...
      branchOrRef: '*',
      webhookFilters: [

        // Runs build on release from any target branch (normally master).
codebuild.FilterGroup.inEventOf(codebuild.EventAction.PUSH)
          .andHeadRefIs(`${releaseFilter}`),

        // Runs build on a push to develop branch.
codebuild.FilterGroup.inEventOf(codebuild.EventAction.PUSH)
          .andBranchIs(develop)
      ],
      webhookTriggersBatchBuild: true
    })

    // Create a role for our Codebuild so it can be used by other stacks.branchOrRef: '*', // * Covers all branches, tags, commit IDs, etc...
    const sitePublisherCodeBuild = new iam.Role(this, 'Role', {
      assumedBy: new iam.ServicePrincipal('codebuild.amazonaws.com'),
      roleName: codeBuildIamPrincipal
    })

    // Setup the Codebuild project.
    new codebuild.Project(this, org, {
      source: gitHubSource,
      buildSpec: codebuild.BuildSpec.fromSourceFilename(buildSpec),
      role: sitePublisherCodeBuild
    })
  }branchOrRef: '*', // * Covers all branches, tags, commit IDs, etc...
}

배포

코드가 설정되면 AWS에 배포하기만 하면 됩니다.

npm run build
cdk synth
cdk deploy

이 작업이 완료되면 AWS 콘솔에서 볼 수 있는 CodeBuild 프로젝트가 생성됩니다.

웹훅

이것이 배포되면 CodeBuid 프로젝트와 Github 사이에 웹훅을 설정해야 합니다. settings/hooks 아래의 GitHub 리포지토리를 살펴보면 새 웹훅이 설정되었음을 알 수 있습니다.

이것은 예전보다 훨씬 낫습니다. UI에서 URL과 비밀을 가져와 수동으로 GitHub 설정에 입력해야 했습니다.

빌드 사양

buildspec.yaml에 빌드 및 배포를 수행하는 데 필요한 세부 정보를 추가합니다.

이 경우 우리는 GatsbyJS 프로젝트를 구축하고 있습니다.

version: 0.2

phases:
  install:
    runtime-versions:
      nodejs: 14
    commands:
      - npm install -g gatsby-cli
      - npm --version

  pre_build:
    commands:
      - export FRONTEND_ROOT=${CODEBUILD_SRC_DIR}/PathToYourFrontEndRoot
      - cd ${FRONTEND_ROOT}branchOrRef: '*', // * Covers all branches, tags, commit IDs, etc...
      - echo Installing dependencies...
      - npm install
  build:
    commands:
      - npm run build
  post_build:
    commands:
      - echo Build completed deploying to hosting bucket...
      - npm run deploy

batch:
  fast-fail: true
  build-list:
    - identifier: linux_small
      env:
        compute-type: BUILD_GENERAL1_SMALL
      ignore-failure: false

스크립트 빌드 및 배포

빌드 중인 프로젝트의 package.json 파일 내에서 로컬 환경에서 배포하는 것처럼 이를 처리해야 합니다.

  "scripts": {
    ...,
    "build": "gatsby build",
    "deploy": "aws s3 cp public/ s3://Your-Hosting-Bucket-Name/ --recursive",
    ...
  },

용법

이제 Github에서 태그가 v0.0.1처럼 보이는 릴리스를 자르면 CodeBuild가 트리거됩니다.

개발 분기에 푸시하거나 병합하면 CodeBuild도 트리거됩니다.