サイトを如何にしてリニューアルさせたか（AWS＋Terafform＋Hugo）

2017/12/30 22:42

ども、K1です。年末の慌ただしい中皆様いかがお過ごしでしょうか。

今回はこのK1-Styleサイトリニューアル時に何を施したのか、ということをお話させていただきます。 ※今年の9月にリニューアルしました。

主に以下のお話で、あまり具体的な実装方法までは触れませんので予めご了承ください。

Webサイトリニューアルをしようと思ったきっかけ
AWSのサーバーレスと継続的デリバリ向けアーキテクチャ
AWSアーキテクチャの構築にTerraformを採用
Webサイトのコンテンツ作成にHugoを利用

開発環境やインフラ含め構成図は以下の通り。

構成図

Webサイトリニューアルをしようと思ったきっかけ

以前のサイトの表示があからさまに遅いなー、と感じておりました。

その時は某レンタルサーバにWordPressを乗せて運用しておりました。各種ミドルウェアのチューニングもその時は出来たかとは思うのですが、手間が結構かかりそうな印象。あとは、https対応もされていなかったのでセキュリティ的にも難ありでしたね。

上記の解決手段として個人的に注目していたAWSのサーバーレスアーキテクチャを利用し、自分でインフラ含めメンテしやすい形にしようと思い立ちました。https接続用のSSL証明書も、AWSのCertificate Managerを利用すると無料で自動更新も含め利用できるのが魅力でした。

AWSサーバーレスと継続的デリバリアーキテクチャ

いろいろ調べたところ下記の情報にたどり着きました。

Amazon S3 静的ウェブホスティングの継続的デリバリ｜ Developers.IO

なるほど、この環境ならコストそれほどかからずイマドキな運用ができそう、ということで上記を参考にWebサイト環境を作ることにしました。

CodeCommitで用意したGitリポジトリに、ブログ記事やWebサイトテンプレートをpushする
CodePipelineで、pushをトリガーにCodeCommitからコンテンツ取得→CodeBuildでビルド＋公開用S3バケットへアップロード
CDNとしてCloudFrontを利用、オリジンに公開用S3バケットを設定
Route53で当ドメインとCloudFrontを紐付け
AWS Certificate Managerで当ドメインのSSL証明書を作成、Cloudfrontに割り当て

ドメインについては旧サイトから引き続き管理（VALUE-DOMAIN）で、ネームサーバもそちらを利用しています。DNSレコード管理をRoute53で行っています。そのうちドメイン自体もRoute53に移管しようかなと。

AWSアーキテクチャの構築にTerraformを採用

で、上記のAWS構成をTerraformで作りました。

Terraformとは

インフラ構成の定義を記述したテンプレートファイルを元にterraformコマンドを使ってAWS等のクラウド環境に構成反映してくれるツールです。

Terraformでインフラ管理をすると、terraform.tfstateというリソース状態を記録したファイルが出力されます。このファイルをS3のバケットで管理出来る機能もあるため、ローカル開発や後述するGitLabCIでも利用したいためこの機能を利用してます。

【参考】 Backend Type: s3 - Terraform by HashiCorp

GitLab CIを利用

GitLabのCI機能を使って、Terraformの構成ファイルをGitLabで作ったリポジトリにpushしたら、自動でAWS環境に反映するようにしています。

.gitlab-ci.ymlに下記のような感じで定義してます。

image: jonatanblue/gitlab-ci-terraform:latest

# This folder is cached between builds
# http://docs.gitlab.com/ce/ci/yaml/README.html#cache
cache:
  paths:
  - .terraform/
  - terraform.tfstate.d/

before_script:
  - pwd
  - terraform get
  - terraform init -backend=true -force-copy

stages:
  - test
  - deploy

plan:
  stage: test
  script:
    - terraform validate
    - terraform plan

apply:
  stage: deploy
  script:
    - terraform apply
  only:
    - master

尚、AWS Certificate ManagerだけTerraformで構成を作ることは出来ないのでAWSコンソールで作ってます。

Webサイト作成にHugoを利用

Hugoとは

Hugoとは、markdownとテンプレートを使って静的Webサイトを作成することができるジェネレータです。

WordPressで書いていた記事を、プラグインを使ってmarkdownファイル化しました。→SchumacherFM/wordpress-to-hugo-exporter

記事数がさほど多くなかったので、画像や音楽ファイルのパス、HugoのFront Matterを手動で変更。

テンプレートは、Hugo向けに作られたこちらを利用しました。→nishanths/cocoa-hugo-theme Forkして、一部改良を加えて、以下に自サイト用のテンプレートを保管してます。

K1-Style/cocoa-hugo-theme

CodeBuildでの定義

CodeBuildのbuildspec.ymlの中で下記のような感じでHugoを使ったビルドを実施します。

version: 0.2

env:
  variables:
    HUGO_VERSION: "0.31.1"

phases:
  install:
    commands:
      - curl -Ls https://github.com/spf13/hugo/releases/download/v${HUGO_VERSION}/hugo_${HUGO_VERSION}_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*
      - mkdir themes && cd themes
      - git clone https://github.com/K1-Style/cocoa-hugo-theme.git cocoa
      - cd ../
  build:
    commands:
      - hugo
  post_build:
    commands:
      - aws s3 sync --delete public s3://k1-style.net

ビルド後のファイルはpublicフォルダ内に出力されるため、publicフォルダ内のファイルを公開用S3バケットへs3 syncコマンドでアップロードしてます。

実運用してみて

この構成に変えて、表示速度は想定通り劇的に良くなりました。コストも月100円程度です。更新頻度やアクセス数によりけりですが。

アクセス解析ちゃんと出来るようにしたいですね。

あと、Hugoで使ってるテンプレートは既存のものを流用してますが色々テコ入れしたい箇所が多くて、自分で１から作ったほうがいいんじゃないかとも。久々にフロントエンド側をガチで勉強し直そうかな。

Terraformの構成ファイルやHugoを使ったWebサイト構成の具体的な実装方法は後日改めてお話しようと思います。それでは本日はこれにて。

Back to posts

make something of myself