GitHub
AWS
CloudFront
Hugo
CodeBuild

HUGOの更新作業をAWS CodeBuildを使って自動化する

概要

静的サイトジェネレータのHUGOを使用して自己サイト(hrttps://www.yokochi.jp)の更新作業の自動化してみました。
作業はGitHubのmasterにマージ(push)するだけです。

HUGO+CloudFront+S3でサイトを公開している状態であることが前提で説明します。

自動化箇所

サイト更新作業開始

(手動) 作成/編集したファイルをGitHubのmasterにマージ(push)

(自動) パラメータストアから固有のアクセスキー等を読み出し、ファイルに書き込む

(自動) hugoコマンドを実行して静的ファイルを作成する

(自動) S3にアップロードする

(自動) CloudFrontのキャッシュをクリアする

サイト更新作業完了 

構成図

yokochi-jp.png

コード(GitHub)

https://github.com/shigeru-yokochi/hugo

実際の対象サイト

https://www.yokochi.jp/

作成手順

AWS CodeBuild (webhookの設定)

  • CodeBuild で GitHubリポジトリを対象としてBuild projects を作成する。
  • Branch filterの設定ではmasterにする。

codebuild設定1.JPG

GitHub

  • webhookの設定ではpushのみにする

github設定1.jpg

AWS SystemManager

  • パラメータストアの設定

GitHubの上に公開したくないためのものをパラメータストアに登録します。
複数登録可能ですが、ここではCloudFrontのキャッシュクリアに使用するCloudFrontDistributionIDの値を設定した例を示します。

パラメータストア1.jpg

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実行

codebuild実行1.jpg

GitHubのmasterにマージ(push)するとCodeBuild Build history にイベントが発生します。このイベントのStatusが「Succeeded」になればOK。

CloudFront キャッシュクリア実行

cloudfront1.jpg

CloudFrontのInvalidatins のstatusが「Completed」になるとOK。

サイトが更新されてるはずです。

おわりに

初めて作成するときは面倒ですが、覚えてしまうと割と簡単ですので是非お試しください。

今回、以下の説明は割愛させていただきました。また機会があれば投稿いたします。
- HUGOそのものの
- ACMを使ったSSL証明書
- IAM設定
- WAFを使ったメンテナンス画面の設定

以下参考にさせていただきました。ありがとうございます。
https://dev.classmethod.jp/cloud/codebuild-env/
http://www.konoui.xyz/post/2017-11-24/
https://docs.aws.amazon.com/ja_jp/AmazonCloudFront/latest/DeveloperGuide/Invalidation.html