クラスター開発者ブログ

MiddlmanでつくったブログをS3にデプロイしてサブドメインと紐付ける

エンジニアの溝口です。

cluster.を開発する上で得た知見を蓄積するためブログを立ち上げました。

このブログはMiddlemanを使用して生成したHTMLをAWS S3にデプロイし、AWSの設定にはTerraformを使用しています。

TL; DR

  • Middlemanのインストール
  • TerraformでS3をウェブサイト用に設定する
  • fredjean/middleman-s3_syncでデプロイする

Middleman

なぜMiddleman

Middlemanによるブログの運用には下記のようなメリットがあります。

  • 静的サイトをS3に置くことでサーバーのメンテナンスから解放される
  • Markdownで記事が書ける
  • プルリクエストで新規記事のレビューがしやすい

Middlemanのインストール

下記のチュートリアルの通りにインストールします。

Markdownに対応する

ローカル確認時のContent-Type対応

パーマリンクによってはローカルで確認するときに記事のContent-Typeがtext/plainで返ってきます。

これを防ぐため拡張子を.html.mdにして記事を作成するよう設定します。

Posts are being served as text/plain · Issue #277 · middleman/middleman-blog

config.rb
1
2
3
4
5
6
activate :blog do |blog|
  blog.sources = 'posts/{year}/{month}/{day}-{title}'
  blog.permalink = '{year}/{month}/{title}'
  blog.default_extension = '.html.md'
  # ...
end

Markdownのレンダリング設定

vmg/redcarpetのデフォルトではテーブルや打ち消し線などが無効になっているのでもろもろ有効に設定します。

config.rb
1
2
3
4
5
6
7
8
9
10
11
12
13
14
activate :syntax, line_numbers: true
set :markdown_engine, :redcarpet
set(
  :markdown,
  tables: true,
  gh_blockcode: true,
  fenced_code_blocks: true,
  autolink: true,
  strikethrough: true,
  no_intra_emphasis: true,
  lax_html_blocks: true,
  space_after_headers: true,
  superscript: true
)

TerraformでS3をウェブサイト用に設定する

弊社ではAWSの設定にTerraformを使用しています。

今回は、サブドメインにblogを使用して、S3のバケットと紐付けます。

すでにcluster.muはRoute53で運用しています。

tfファイル
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
resource "aws_route53_zone" "primary" {
  name = "cluster.mu"
}

resource "aws_route53_record" "blog" {
  zone_id = "${aws_route53_zone.primary.zone_id}"
  name = "blog.cluster.mu"
  type = "A"

  alias {
    name = "${aws_s3_bucket.blog.website_domain}"
    zone_id = "${aws_s3_bucket.blog.hosted_zone_id}"
    evaluate_target_health = true
  }
}

resource "aws_s3_bucket" "blog" {
    bucket = "(バケット名)"
    acl = "public-read"
    policy = "${file("blog_s3_policy.json")}"

    website {
        index_document = "index.html"
        error_document = "404.html"
    }
}
blog_s3_policy.json
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
{
  "Version": "2012-10-17",
  "Statement": [
    {
      "Sid": "AddPerm",
      "Effect": "Allow",
      "Principal": "*",
      "Action": [
        "s3:GetObject"
      ],
      "Resource": [
        "arn:aws:s3:::(バケット名)/*"
      ]
    }
  ]
}

fredjean/middleman-s3_syncでデプロイする

Middlemanで生成したサイトをS3にアップロードするプラグインfredjean/middleman-s3_syncを利用してデプロイします。

config.rb
1
2
3
4
5
activate :s3_sync do |s3_sync|
  s3_sync.bucket                     = '(バケット名)'
  s3_sync.region                     = 'ap-northeast-1'
  s3_sync.path_style                 = true
end

環境変数AWS_ACCESS_KEY_IDAWS_SECRET_ACCESS_KEYを設定し下記のコマンドを実行するとデプロイされます。

1
2
$ bundle exec middleman build
$ bundle exec middleman s3_sync

masterへのプッシュをきっかけに上記のコマンドを実行するCIを設定すれば、プルリクエストによるレビューとマージ時のデプロイの自動化ができます。

参考サイト

このエントリーをはてなブックマークに追加