Hugo で作ったサイトを CloudFront + S3 で公開する

2018-10-25

Gatsby と同様に、CodeCommit に push したら CodeBuild でビルドして S3 にデプロイして公開される、というところまでを自動化します。

概要

基本的には Gatsby の場合と同じなので、異なる部分について書いていきます。

やること

S3 のバケットポリシーを変更
CloudFront の Origin Domain Name を変更
CodeBuild の環境、 Buildspec を変更

1. S3 のバケットポリシーを変更

まず、S3 のバケットポリシーを下記のように変更します。

{
    "Version": "2012-10-17",
    "Statement": [
        {
            "Sid": "AddPerm",
            "Effect": "Allow",
            "Principal": {
                "AWS": "*"
            },
            "Action": "s3:GetObject",
            "Resource": "arn:aws:s3:::{バケット名}/*"
        }
    ]
}

Gatsby と Hugo の大きな違いとして、生成されるサイトがシングルページかどうかという点があります。

CloudFront で Default Root Object に index.html を指定しておけば、https://michimani.net/ でのアクセスで https://michimani.net/index.html が表示されます。
Gatsby ではここから画面遷移しないのでこれで問題なかったのですが、Hugo では https://michimani.net/post/some-post/ のような個別のページへ遷移することになります。この場合、https://michimani.net/post/some-post/index.html が表示されるかと思いきや、Access Denied と言われてしまいます。
これを回避するために、バケットポリシーを上記のように変更します。

2. CloudFront の Origin Domain Name を変更

上記の問題解決に関連して、CloudFront の Origin Domain Name を変更します。
新しい値としては、S3 の Static website hosting で確認できるエンドポイントの http:// を除いた部分 です。

3. CodeBuild の環境、 Buildspec を変更

Hugo は Go 言語で作られているので、 CodeBuild の環境 (イメージ) を aws/codebuild/golang:1.10 に変更します。
また、ビルド時のコマンドも変わるため、 Buildspec を下記のように変更します。

version: 0.2

phases:
  install:
    commands:
      - curl -Ls https://github.com/gohugoio/hugo/releases/download/v0.49/hugo_0.49_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:
      - hugo
  post_build:
    commands:
      - aws s3 sync "public/" "s3://{バケット名}" --delete --acl "public-read"
      - aws cloudfront create-invalidation --distribution-id {ディストリビューションのID} --paths "/*"