Posted at

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

More than 1 year has passed since last update.


概要

静的サイトジェネレータの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