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

# 概要
静的サイトジェネレータの[HUGO](https://gohugo.io/)を使用して[自己サイト(hrttps://www.yokochi.jp)](https://www.yokochi.jp/)の更新作業の自動化してみました。
作業は[GitHub](https://github.com/shigeru-yokochi/hugo)のmasterにマージ(push)するだけです。

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


## 自動化箇所

サイト更新作業開始
↓
(手動)　作成/編集したファイルをGitHubのmasterにマージ(push)
↓
(自動)　パラメータストアから固有のアクセスキー等を読み出し、ファイルに書き込む
↓
(自動)　hugoコマンドを実行して静的ファイルを作成する
↓
(自動)　S3にアップロードする
↓
(自動)　CloudFrontのキャッシュをクリアする
↓
サイト更新作業完了　


# 構成図
![yokochi-jp.png](https://qiita-image-store.s3.amazonaws.com/0/146154/902b3907-5904-cbb0-d31c-57415bd5057b.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](https://qiita-image-store.s3.amazonaws.com/0/146154/e869af9d-8616-d105-f5b7-fbb7c22b4e8e.jpeg)

## GitHub
- webhookの設定ではpushのみにする

![github設定1.jpg](https://qiita-image-store.s3.amazonaws.com/0/146154/8bf9eb9d-4830-87db-4977-bd43802199c3.jpeg)



## AWS SystemManager
- パラメータストアの設定

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

![パラメータストア1.jpg](https://qiita-image-store.s3.amazonaws.com/0/146154/80385c03-2697-a8f3-9eea-3bbef23a447a.jpeg)



## AWS CodeBuild　(buildspec.yml の設定)

```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](https://qiita-image-store.s3.amazonaws.com/0/146154/d6622aac-747d-0c1f-d157-57b924ed3f99.jpeg)

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

## CloudFront キャッシュクリア実行
![cloudfront1.jpg](https://qiita-image-store.s3.amazonaws.com/0/146154/d6e621a9-8dd1-11aa-fb83-deb7d4841cdd.jpeg)

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