Hugoでのブログ記事公開をTravis CIで自動化した

ブログをはてなブログからこのサイトに移転しました。
移転した理由は、

  • 画面表示が遅い
  • https対応されてない
  • 好きにデザインできない
  • はてなブログ使っても特にPVの恩恵がない

などです。
特に画面表示が遅いのがすごく気になりました。。

ので、静的サイトジェネレーターである「Hugo」を使用してブログを構築しました。
https://github.com/gohugoio/hugo

当ブログアーキテクチャ

ドメインはRoute53でホスティングして
S3でWebホスティングして、hugoで生成した静的ファイルを配置して、
それをCloudFrontでキャッシュしてます。証明書はACMです。

こんな感じで、AWSを使ってます。
見てもらえればわかる通り、サーバーレスでブログを作ってます。

記事の更新はどうするかは、この記事のタイトルでもある「Travis CI」を使用してます。

記事配信の自動化の仕組み

上記の図中にも記載がある通り、
GitHubとTravis CIを使用してます。

ブログの情報はGItHubのPublic Repositoryに配置しており、
そこに記事データ(MarkDown)をコミットすることでTravis CIを発火させ、S3にデプロイを行います。
https://github.com/morix1500/blog

Travis CIでやらせることは以下の通りです。

  • aws cliのインストール
  • hugoのインストール
  • hugoで静的サイト生成
  • 静的サイトをS3にデプロイ
  • CloudFrontでルートディレクトリ以下すべてのキャッシュを削除

aws cliをインストールするのは、
CloudFrontでInvalidationを実行するためです。(Travis CIでは用意されてなかった)

必要なものを用意する

上記の通り、S3とCloudFrontに対して操作する必要があるため
この2つのサービスを操作する権限を持ったIAM Userを作成する必要があります。

そのユーザで必要なポリシーはこちらです。

{
    "Version": "2012-10-17",
    "Statement": [
        {
            "Effect": "Allow",
            "Action": [
                "s3:Delete*",
                "s3:Get*",
                "s3:Put*",
                "s3:List*"
            ],
            "Resource": [
                "arn:aws:s3:::{Bucket Name}",
                "arn:aws:s3:::{Bucket Name}/*"
            ]
        },
        {
            "Action": [
                "cloudfront:CreateInvalidation",
                "cloudfront:GetDistribution",
                "cloudfront:GetStreamingDistribution",
                "cloudfront:GetDistributionConfig",
                "cloudfront:GetInvalidation",
                "cloudfront:ListInvalidations",
                "cloudfront:ListStreamingDistributions",
                "cloudfront:ListDistributions"
            ],
            "Effect": "Allow",
            "Resource": "*"
        }
    ]
}

このIAM UserをTravis CIで使用するためには
AWSアクセスキーとシークレットキーを設定ファイル内に記載するわけですが、
GitHubにコミットする都合上、なんらかの暗号化処理が必要です。

その辺はTravis CIが用意してくれるので暗号化してみましょう!

$ gem install travis

$ travis encrypt AWS_ACCESS_KEY_ID=xxxxxxxxxxx \
                 AWS_SECRET_ACCESS_KEY=xxxxxxxxxxx

ここで出力されたものを .travis.yml に張り付けると
上記の値が環境変数となります。

では上記処理を行う .travis.yml です。
scriptで使ってるスクリプトは以下リポジトリの同名ファイルを参照してみてください。
https://github.com/morix1500/blog

language: bash
sudo: false

addons:
  apt:
    packages:
      - python-pip
      - python-setuptools

before_install:
  - pip install awscli

before_script:
  - bash ./script/git.sh

script:
  - bash ./script/build.sh
  - bash ./script/deploy.sh

after_script:
  - bash ./script/invalidation.sh

env:
  global:
    secure: "xxxxxxxxxx"

上記ファイルをコミット後、リモートにPushするとTravis CIが実行され
本番にデプロイされます。

最後に

この設定をしてると、ただGitHubに記事をコミットするだけで
記事配信されるのでとても便利です!

サーバーレスで構築してるので、費用も格安です。
あとCDN(CloudFront)を利用しているため表示も爆速で、
はてなブログでの不満が一気に解消しました!

ということで、今後はこの新しいブログで色々書いていこうと思います~~!