개요

정적 사이트 생성기 HUGO 을 사용하여 자기 사이트(https://www.요코지.jp) 업데이트 작업을 자동화해 보았습니다.
작업은 GitHub 의 master에 병합(push) 하는 것뿐입니다.

HUGO+CloudFront+S3에서 사이트를 게시한 상태라고 가정합니다.

자동화 지점

사이트 업데이트 작업 시작
↓
(수동) 작성/편집 된 파일을 GitHub의 master에 병합 (push)
↓
(자동) 파라미터 스토어로부터 고유의 액세스 키 등을 읽어 파일에 기입한다
↓
(자동) hugo 명령을 실행하여 정적 파일 만들기
↓
(자동) S3에 업로드
↓
(자동) CloudFront의 캐시 지우기
↓
사이트 갱신 작업 완료

구성도

코드(GitHub)

실제 대상 사이트

작성 절차

AWS CodeBuild(webhook 설정)

CodeBuild 에서 GitHub 리포지토리를 대상으로 Build projects 를 작성한다.

Branch filter의 설정에서는 master로 한다.

GitHub

webhook 설정은 push 만으로 설정합니다

AWS SystemManager

매개 변수 저장소 설정

GitHub 위에 게시하지 않으려는 것을 매개 변수 저장소에 등록합니다.
여러 개의 등록이 가능하지만 여기에서는 CloudFront 캐시를 지우는 데 사용할 CloudFrontDistributionID 값을 설정하는 예를 보여줍니다.

AWS CodeBuild(buildspec.yml 설정)

buildspec.yml

version: 0.2

env:
  parameter-store:
    key1: "amazon_search_widget"
    key2: "googleAnalytics"
    key3: "CloudFrontDistributionID"
    key4: "rakuten_motion_widget"
phases:
  install:
    commands:
      - curl -Ls https://github.com/gohugoio/hugo/releases/download/v0.46/hugo_0.46_Linux-64bit.tar.gz -o /tmp/hugo.tar.gz
      - tar xf /tmp/hugo.tar.gz -C /tmp
      - mv /tmp/hugo /usr/bin/hugo
      - rm -rf /tmp/hugo*
  build:
    commands:
      - echo $key1 >> ./themes/nederburg/layouts/partials/header.html
      - echo $key4 >> ./themes/nederburg/layouts/partials/footer.html
      - echo $key2 >> ./config.toml
      - hugo     
  post_build:
    commands:
      - aws s3 sync --exact-timestamps --delete public/ s3://www.yokochi.jp
      - aws cloudfront create-invalidation --distribution-id $key3 --paths "/*"

설명

parameter-store : 매개 변수 저장소의 name을 지정하고 value를 key1 ~ 4로 설정합니다.
install:HUGO를 다운로드하여 설치합니다.
build : 파라미터 스토어의 각 value를 hugo의 각 파이의 말미에 더한 후 hugo 명령으로 정적 파이를 생성한다.
post_build: 정적 파일을 S3에 업로드하여 CloudFront 캐시를 지웁니다.

동작 확인 방법

CodeBuild 실행

GitHub의 master에 병합(push)하면 CodeBuild Build history에 이벤트가 발생합니다. 이 이벤트의 Status가 「Succeeded」가 되면 OK.

CloudFront 캐시 지우기 실행

CloudFront의 Invalidatins 상태가 "Completed"가되면 OK.

사이트가 업데이트되어야 합니다.

결론

처음 작성할 때는 귀찮지만, 기억해 버리면 비교적 간단하므로 꼭 시험해 주세요.

이번, 이하의 설명은 할애했습니다. 또 기회가 있으면 투고하겠습니다.
- HUGO 자체
- ACM을 사용한 SSL 인증서
- IAM 설정
- WAF를 사용한 유지보수 화면 설정

이하 참고로 했습니다. 감사합니다.
htps : // v.ぁsss d. jp / c ぉ d / 코데부이 ld - 엔 v /
h tp // w w. 이 음. xy·포스트/2017-11-24/
htps : // / cs. 아 ws. 아마존. 이 m / 그럼 _ jp / 아마 존 C ぉ dF 롱 t / ㅁ st / ゔ ぇ ぺ ぺ ぐ い / / ゔ ぃ 다치 온. HTML