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

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

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

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

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

当ブログアーキテクチャ

f:id:mori_morix:20180613225445p:plain

ドメインは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）を利用しているため表示も爆速で、
はてなブログでの不満が一気に解消しました！

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

ハラミTech

技術系ブログです

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

当ブログアーキテクチャ

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

必要なものを用意する

最後に