Help us understand the problem. What is going on with this article?

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

shigeru-yokochi
やりたいことを自由に発信できる場として活用させていただきます。 なので、内容については個人の見解であり、所属する組織の公式見解ではありません。 何かの参考にしていただけれは光栄です。横地秀
https://www.yokochi.jp
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
No comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
ユーザーは見つかりませんでした