概要

静的サイトジェネレータのHUGOを使用して自己サイト(hrttps://www.yokochi.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 の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