CircleCI 2.0 を使って Middleman で作ったサイトを AWS S3 + CloudFront にデプロイ

自分の会社のサイトは創立以来 Middleman で管理運用しています。これまでは CircleCI 1.0 の機能を利用して AWS S3 にデプロイし CloudFront のキャッシュをクリアする構成になっていました。 CircleCI 1.0 が 2018 年 8 月末日で利用できなくなるため 2.0 に変更する必要がありました。 CircleCI 1.0 End of Life on August 31, 2018 CircleCI 2.0 対応にやったこと CircleCI 2.0 のドキュメントの確認 Middleman がビルドできる Docker イメージ作成 circle.yml を .circleci/config.yml に変更 CircleCI 2.0 を利用するには Docker イメージが必要です。CircleCI が用意しているイメージを利用する方法もあります。 Pre-Built CircleCI Docker Images - CircleCI 今回は Docker の学習も兼ねて自分で Docker イメージを用意することにしました。 Docker イメージの作り方 できたもの: Docker Hub: yuya-matsushima/middleman GitHub yuya-matsushima/docker-middleman 依存イメージ: yuya-matsushima/docker-ruby 今回は Ubuntu 16....

2018/05/04 · Yuya MATSUSHIMA

middleman-s3_sync で Cache-Control ヘッダを設定する

会社の Web サイト の内容を少し見直し, ついでに諸々調整をしました。具体的には事業内容を整理, 子ページができたのでデザインの一部修正等々です。 見直し完了後に PageSpeed Insights の指摘事項を修正する過程で Cache-Control ヘッダを付与する必要がでてきました。そのあたりの話です。 PageSpeed Insights の指摘事項 このブログでも同様の問題が指摘されています。アセット類のファイルに対して “キャッシュの設定が行われていない” ために発生する問題でした。 middleman-s3_sync を使って Cache-Control ヘッダを設定する方法 会社 Web サイトは AWS S3 + CloudFront 環境で運用されています。S3 の管理画面に入って個別または一括でヘッダ情報を追加することができます。ただし, 管理画面からの設定を行う場合, Middleman でサイトを更新する度に管理画面から設定を変更する必要があります。これは流石に不便です。 そこで middleman-s3_sync から Cache-Control ヘッダを設定する方法をとります。 具体的には config.rb に対して次の設定を追加します。 # middleman-s3_sync の設定 activate :s3_sync do |s3| s3.region = 'ap-northeast-1' s3.index_document = 'index.html' s3.error_document = '404/index.html' end default_caching_policy max_age: (60 * 60 * 24 * 365), public: true, must_revalidate: true caching_policy 'text/html', max_age: 60 * 10, public: true, must_revalidate: true caching_policy 'text/plain', max_age: 60 * 10, public: true, must_revalidate: true caching_policy 'application/xml', max_age: 60 * 10, public: true, must_revalidate: true default_caching_policy ですべてのファイルに対して cache の設定を行い, html, txt, xml の場合のみ max_age を変更するように設定しています。...

2017/08/19 · Yuya MATSUSHIMA