Vue.js 사이트를 AWS S3에 CodePipline으로 자동 배포

이번에는 최근 Vue.js를 시작했으므로 사이트 공개에 걸리는 고정비를 싸게 억제하려고 AWS S3의 웹 사이트 호스팅 기능을 사용합니다. 그리고 자동 배포도 하고 싶었으므로 AWS의 CodePipline을 사용합니다. 구성은 아래 그림과 같습니다.

Vue.js 프로젝트 아래에 buildspec.yml을 배치합니다.

이 파일에서 CodeBuild는 파일을 기반으로 빌드를 실행합니다. 들여 쓰기를 제대로하지 않으면 빌드시 오류가 발생합니다.

buildspec.yml

version: 0.2

phases:
  pre_build:
    commands:
      - if [ -e /tmp/node_modules.tar ]; then tar xf /tmp/node_modules.tar; fi
      - npm install
  build:
    commands:
      - npm run build
  post_build:
    commands:
      - tar cf /tmp/node_modules.tar node_modules
artifacts:
  files:
    - '**/*'
  base-directory: dist
cache:
  paths:
    - /tmp/node_modules.tar

S3 설정

먼저 버킷을 임의의 이름으로 만듭니다. 그리고 속성 입력란에 정적 웹사이트 호스팅을 활성화합니다.

그런 다음 사용 권한 필드에서 블록 공개 액세스를 사용 중지합니다.

그런 다음 버킷 정책을 편집합시다. 버킷 이름은 자신의 버킷 이름으로 수정합시다.

{
    "Version": "2012-10-17",
    "Statement": [
        {
            "Sid": "PublicReadForGetBucketObjects",
            "Effect": "Allow",
            "Principal": "*",
            "Action": "s3:GetObject",
            "Resource": "arn:aws:s3:::バケット名/*"
        }
    ]
}

CodePipeline 만들기

임의의 이름으로 파이프라인 이름을 작성하십시오.



소스 공급자에게 Github를 선택하고 Github에 연결을 클릭하여 자신의 리포지토리와 연결합니다.



공급자 빌드를 AWS CodeBuild를 선택하여 원하는 이름으로 프로젝트 이름을 생성합니다.



배포 공급자에게 Amazon S3를 선택하고 저장할 버킷 이름을 선택하고 버킷을 비워 두고 배포하기 전에 파일 추출을 선택합니다.



그리고 실제로 Github에 push하면 자동으로 배포되는 것을 알 수 있습니다. 배포가 성공하면 S3의 정적 웹사이트 호스팅에 작성된 URL을 열면 사이트가 공개됩니다!