S3
bitbucket
route53
CloudFront
Hugo

Hugo, Bitbucket, S3, CloudFrontで独自ドメインのhttpsブログをホスティングする(Part3)

はじめに

この記事は下記のブログ記事のクローンです。
https://okash1n.io/2018/01/07/hugo-blog-with-bitbucket-s3-cloudfront-part3/

Hugo, Bitbucket, S3, CloudFrontで独自ドメインのhttpsブログをホスティングする(Part2)の続きです。今回で最終回となります。

最終目標

  • ソースをBitbucketのprivateリポジトリで管理
  • Bitbucketにpush すると 自動ビルドされてS3でホスティング
  • Route53, CertificateManager, CloudFrontにより独自ドメインかつhttps化

Part3の目標

  • IAMの設定
  • Pipelines用のDockerfileを用意する
  • bitbucket-pipelines.ymlの準備
  • Pipelinesの設定
  • 自動ビルド
  • 記事の作成

IAMの設定

BitbucketでPipelinesを使う為のIAMの設定を行います。

ポリシーの作成

IAM -> Policies -> Create policy より以下の二つのポリシーを作成する(名前は何でもよい)

DataManagement

S3へのアップロードや削除などを行う為のポリシー。使いまわすことを想定しているのでResource*にしている。

{
    "Version": "2012-10-17",
    "Statement": [
        {
            "Sid": "DataManagement",
            "Effect": "Allow",
            "Action": [
                "s3:PutObject",
                "s3:GetObject",
                "s3:ListBucket",
                "s3:DeleteObject",
                "s3:GetBucketLocation",
                "s3:ListObjects",
                "s3:GetObjectVersion"
            ],
            "Resource": "*"
        }
    ]
}

CacheManagement

CloudFrontのキャッシュをクリアしてpushした後に即時反映されるようにする為に、PipelinesにCloudFrontの権限を持たせる為のもの。

{
    "Version": "2012-10-17",
    "Statement": [
        {
            "Sid": "CacheManagement",
            "Effect": "Allow",
            "Action": [
                "cloudfront:CreateInvalidation"
            ],
            "Resource": "*"
        }
    ]
}

グループの作成

  • IAM -> Groups -> Create New GroupよりGroup NameBlogとしてNext Step
  • Attach Policyで先程作ったDataManagementCacheManagementにチェックを入れNext Step
  • グループ名とポリシーが正しいことを確認してCreate Group

ユーザーの作成

  • IAM -> Users -> Add user
  • User nameBitbucketPipelinesAccess typeProgrammatic accessとしNext: Permissions
  • Blogグループにチェックを入れNext: Review -> Create user
  • Access key IDSecret access keyを必ずメモしておくこと

Pipelines用のDockerfileを用意する

FROM alpine:latest
MAINTAINER Shintaro Okamura <info@okash1n.com>

# 必要なパッケージ
RUN apk add --update --no-cache \
    bash \
    ca-certificates \
    curl \
    python \
    py-pip \
    wget \
  && pip install --upgrade pip \
  && pip install -U awscli

# hugoのインストール
ARG HUGO_VERSION=0.32.2
ARG HUGO_SHA256=83e40dd976371f41acfe611051e965600a9143faceb74c8c0e0621fa37aa004c

RUN curl -Ls https://github.com/gohugoio/hugo/releases/download/v${HUGO_VERSION}/hugo_${HUGO_VERSION}_Linux-64bit.tar.gz \
       -o /tmp/hugo.tar.gz \
  && echo "${HUGO_SHA256}  /tmp/hugo.tar.gz" | sha256sum -c - \
  && tar xf /tmp/hugo.tar.gz -C /tmp \
  && mv /tmp/hugo /usr/bin/hugo \
  && rm -rf /tmp/hugo* \

今回はリポジトリにPushした後のCloudFrontへの反映を早める為に、Alpine Linuxを使って出来る限りミニマムに近いイメージを作成しました。ソースとイメージは下記にありますので、改変するなりご自由にお使いください。

bitbucket-pipelines.ymlの準備

  • Hugoサイトのルート(config.tomlがあるところ)にbitbucket-pipelines.ymlを作成します。
$ pwd
/Users/oash1n/bitbucket.org/okash1n/blog
$ tree
.
├── archetypes
│   └── default.md
├── bitbucket-pipelines.yml
├── config.toml
├── content

bitbucket-pipelines.yml

image: okash1n/docker-hugo-alpine

pipelines:
  default:
    - step:
        script:
          - hugo #ビルド
          - aws configure set preview.cloudfront true #awscliでのCloudFrontの操作を有効化
          - aws s3 sync --delete public s3://${BUCKET_NAME} #s3にアップロード
          - aws cloudfront create-invalidation --distribution-id ${DIST_ID} --paths '/*' #CloudFrontのキャッシュを削除

${BUCKET_NAME}${DIST_ID}はこの後BitbucketのPipelinesに環境変数として設定します。

Pipelinesの設定

予めPipelinesを有効にしておかないとEnvironment variablesの設定が出来ないので、先に有効化しておくこと。

  • リポジトリのSettings -> PIPELINES -> Environment variablesより下記の変数を追加する
    • AWS_ACCESS_KEY_ID : IAMのBitbucketPipelinesユーザーのAccess key (Secured)
    • AWS_DEFAULT_REGION : ap-northeast-1
    • AWS_SECRET_ACCESS_KEY : IAMのBitbucketPipelinesユーザーのSecret access key (Secured)
    • BUCKET_NAME : blog.okash1n.com
    • DIST_ID : CloudFrontのディストリビューションID (Secured)

image.png (365.8 kB)

自動ビルド

pushすると自動ビルドが始まる

$ git add .
$ git commit -m "add bitbucket-pipelines.yml"
$ git push origin master

image.png (231.0 kB)

13 secとなかなかの速度でビルドとホスティングが出来ました。

記事の作成

hugo new post/title.mdしてからhugoroot/content/post/title.mdを編集してpushすると自動でビルドされて公開されます。

---
title: "Makeblog"
date: 2018-01-08T03:35:18+09:00
draft: false
---

# ブログ

はじめました。

デフォルトではdraft: trueになっていますが、これをdraft: falseに変更しないと公開されないので注意してください。

Hugoで新規記事を作成するときのTips的なメモ - Qiita
こちらを参考にdraft: falseにしたarchetypes/default.mdを作っておけば、hugo new postで作成したファイルが最初からdraft: falseになります。

今回作成したサイトがこちらです。Pipelinesを使うことで簡単にHugoサイトをS3にホスティングできました。今後同じことをAWSのCodeCommitとCodeBuildを使ってやってみたいです。Hugo自体のカスタマイズやテーマ作成についても今後記事を書く予定なので、良かったらみてくださいね。