개요

Nuxt.js에서 만든 프로젝트를 gulp, CodeBuild를 사용하여 자동 배포하는 단계를 요약합니다.

참고 URL

아래 URL을 참고하여 CodeBuild 설정을 변경하고 있습니다.

사전 준비

yarn 명령을 사용할 수 있도록 한다

절차

1. gulp 설치

yarn add gulp
이번에는 로컬 환경에 yarn을 사용하여 설치

gulpfile에서 사용하는 모듈 추가
yarn add gulp-awspublishyarn add gulp-cloudfront-invalidate-aws-publishyarn add concurrent-transform

2. gulpfile.js 만들기

gulpfile.js를 프로젝트의 루트 디렉토리에 만듭니다.
여기에서는 공식 페이지 에서 복사하여 다음을 변경합니다.

credentials 삭제 (CodeBuild의 IAM 정책을 사용하기 위해 필요하지 않음)

deleteOldVersions를 true로 변경 (S3에서 오래된 파일 삭제)

headers에 'x-amz-acl': 'private' 추가 ( S3의 공개 액세스 블록에 대처 )

const gulp = require('gulp')
const awspublish = require('gulp-awspublish')
const cloudfront = require('gulp-cloudfront-invalidate-aws-publish')
const parallelize = require('concurrent-transform')

// https://docs.aws.amazon.com/cli/latest/userguide/cli-environment.html

const config = {
  // Required
  params: {
    Bucket: process.env.AWS_BUCKET_NAME,
  },

  // Optional
  deleteOldVersions: true, // S3上の古いファイルを削除する
  distribution: process.env.AWS_CLOUDFRONT, // CloudFront distribution ID
  region: process.env.AWS_DEFAULT_REGION,
  headers: {
    /* 'Cache-Control': 'max-age=315360000, no-transform, public', */
    'x-amz-acl': 'private',
  },

  // Sensible Defaults - gitignore these Files and Dirs
  distDir: 'dist',
  indexRootPath: true,
  cacheFileName: '.awspublish',
  concurrentUploads: 10,
  wait: true, // wait for CloudFront invalidation to complete (about 30-60 seconds)
}

gulp.task('deploy', function () {
  // create a new publisher using S3 options
  // http://docs.aws.amazon.com/AWSJavaScriptSDK/latest/AWS/S3.html#constructor-property
  const publisher = awspublish.create(config)

  let g = gulp.src('./' + config.distDir + '/**')
  // publisher will add Content-Length, Content-Type and headers specified above
  // If not specified it will set x-amz-acl to public-read by default
  g = g.pipe(
    parallelize(publisher.publish(config.headers), config.concurrentUploads)
  )

  // Invalidate CDN
  if (config.distribution) {
    console.log('Configured with CloudFront distribution')
    g = g.pipe(cloudfront(config))
  } else {
    console.log(
      'No CloudFront distribution configured - skipping CDN invalidation'
    )
  }

  // Delete removed files
  if (config.deleteOldVersions) {
    g = g.pipe(publisher.sync())
  }
  // create a cache file to speed up consecutive uploads
  g = g.pipe(publisher.cache())
  // print upload updates to console
  g = g.pipe(awspublish.reporter())
  return g
})

3. 소스 설정

사용 중인 리포지토리에 맞게 CodePipeline에서 설정합니다.
여기에서는 설명을 생략합니다.

4. buildspec.yml 만들기

프로젝트 파일의 루트 디렉토리에서 buildspec.yml을 만듭니다.
참고 URL 그대로(Ubuntu의 이미지를 이용)라면, 잘 할 수 없었기 때문에, AmazonLinux를 이용하도록 변경하고 있습니다.
Node.js 버전은 10 이상이 권장되는 것 같습니다 (2021년 5월 현재)

version: 0.2

phases:
  install:
    runtime-versions:
      nodejs: 12
  pre_build:
    commands:
      - echo 'Start pre_build phase'
      - yum update -y
      - yum -y install wget
      - wget https://dl.yarnpkg.com/rpm/yarn.repo -O /etc/yum.repos.d/yarn.repo
      - curl --silent --location https://rpm.nodesource.com/setup_12.x | bash -
      - yum install yarn
      - yarn install
  build:
    commands:
      - echo 'Start build phase'
      - yarn generate
  post_build:
    commands:
      - echo 'Start post_build phase'
      - ./node_modules/.bin/gulp deploy

5. CodePipeline, CodeBuild 설정

환경을 다음과 같이 설정합니다.
CodeBuild 환경 변수는
- DEPLOY_ENV: S3
- AWS_CLOUDFRONT: 배포할 CloudFront 배포의 ID
- AWS_BUCKET_NAME: 배포 대상 S3의 버킷 이름
을 설정합니다.

보충

Codebuild를 사용할 때는 이미지와 런타임 대응 을 조사해 두면 좋을 것 같습니다.

권한 부여가 필요하지 않을 수 있습니다.