はじめに

某WebメディアをGoogleのPageSpeed Insightsにて解析したところ、「画像にCache-Controlが設定されてないぞ」と怒られました。メディア内の記事には大量の画像が使われていて、それらの画像はS3にアップロードされたものを直接参照しています。

CloudFront使えよと言われて片付けられそうな案件ですが、リリース時からそんな準備万端で始められるような事業ばかりでもないわけです。既存のシステムをCloudFrontで置き換えようと思うと、もちろん画像のURLも変更されます。それに伴いシステムにも改修は入りますし、記事内に埋め込まれた画像のURLを頑張って置換する必要があります。ちょっとそれ時間かかる、ということで暫定的にS3に置いたコンテンツにCache-Controlを付けてみました。

これ書いてるうちに結局CloudFrontに移行したけどまあいいや。

1.AWSコンソールから設定する

ファイル数が少ない場合は、S3コンソールの[メタデータ]から設定できます。見たまんまなので難しい解説不要です。

2.既にアップロード済みの画像情報を一括更新する

さすがに数千にもなると手動で設定はできないので、コード書きました。ポイントとしては、copyObjectで同名ファイルにすることで画像を更新していることと、Metadata/MetadataDirectiveを設定しないと全く同じファイルとみなされてコピーに失敗することです。あとはPromise.allで数千件同時実行したらネットワークエラー出たので50件ずつに分割してる(50という数字は適当)。

index.js

'use strict';

const mime = require('mime-types');
const AWS = require('aws-sdk');
const s3 = new AWS.S3({apiVersion: '2006-03-01'});

// 再帰的に全ファイルを取得する
function findObjects() {
  let result = [];

  const _go = (marker, callback) => {
    s3.listObjects({
      Bucket: process.env.S3_IMAGE_BUCKET,
      Delimiter: '/',
      Marker: marker
    }, (error, data) => {
      if (error) return callback(error);

      result = result.concat(data.Contents);

      if (data.Contents.length >= 1000) return _go(data.NextMarker, callback);

      callback(null, result);
    });
  };

  return new Promise((resolve, reject) => {
    _go(null, (error, objects) => {
      if (error) return reject(error);

      resolve(objects);
    })
  });
}

// cache-controlを全ファイルに付与
function updateMetadata(objects) {

  const _go = (index, callback) => {
    // 50件ずつリクエストを分割
    const promises = objects.slice(index, index + 50).map((o, i) => {
      return new Promise((resolve, reject) => {
        s3.copyObject({
          Bucket: process.env.S3_IMAGE_BUCKET,
          CopySource: `${process.env.S3_IMAGE_BUCKET}/${o.Key}`,
          Key: o.Key,
          ContentType: mime.lookup(o.Key) || 'application/octet-stream',
          CacheControl: 'max-age=31536000',
          Metadata: {
            updated: '1'
          },
          MetadataDirective: 'REPLACE'
        }, (error, data) => {
          if (error) return reject(error);

          return resolve(null);
        });
      });
    });

    Promise.all(promises).then(results => {

      if (index + results.length == objects.length) return callback(null);

      _go(index + results.length, callback);

    }).catch(callback);
  };

  return new Promise((resolve, reject) => {
    _go(0, (error) => {
      if (error) return reject(error);

      resolve();
    });
  });
}

findObjects().then(objects => {

  return updateMetadata(objects);
}).then(result => {

  console.log("Complete!");

}).catch(error => {
  console.error(error);
});

3.ファイルアップロード時に自動的にcache-controlを付与する

継続的に使うには、LambdaでS3へのUploadイベントを受けてMetaを書き換えるのが便利です。ここも先ほどとほぼ同じしくみで動かしていますが、注意しないとCopy後にもObjectCreatedのイベントが走るので無限ループに陥ります(Lambda破産ってあるのだろうか..)。幸いにも新規作成時がObjectCreated:Put、コピー時がObjectCreated:Copyとイベント名が分かれていたので、これで判定しています。

'use strict';

var mime = require('mime-types');
var aws = require('aws-sdk');
aws.config.update({
  accessKeyId: 'xxxxxxxxxxxxxxxxxxxxxxxx',
  secretAccessKey: 'xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx'
});

var s3 = new aws.S3({apiVersion: '2006-03-01'});

// Lambda Handler
module.exports.handler = function(event, context) {
  console.log(event.Records[0]);

  var bucket = event.Records[0].s3.bucket.name;
  var key = event.Records[0].s3.object.key;
  var eventName = event.Records[0].eventName;

  if (eventName !== 'ObjectCreated:Put' && eventName !== 'ObjectCreated:CompleteMultipartUpload') {
    console.log('Object Not Created');
    return context.done(null, 'Object Not Created');
  }

  s3.copyObject({
    Bucket: bucket,
    CopySource: bucket + '/' + key,
    Key: key,
    ContentType: mime.lookup(key) || 'application/octet-stream',
    CacheControl: 'max-age=2592000',
    Metadata: {
      updated: '1'
    },
    MetadataDirective: 'REPLACE'
  }, function(error, data) {
    if (error) return context.done(error);
    console.log("UPDATED!");

    return context.done(null, 'COMPLETE!');
  });
};

Lambdaに設定するevent sourceはこんな感じです。

まとめ

既にS3で運用してしまってる場合、(3)でLambdaを構築しつつ(コピペでも動くはず)、(2)で既存のものを置き換えるだけで作業は終わりなはずです。

そういえばLambdaがnode 4.x使えるようになったらしいから早く移行したいな。

S3にアップロードされた画像にCache-Controlを付ける方法3選

はじめに

目次

1.AWSコンソールから設定する

2.既にアップロード済みの画像情報を一括更新する

3.ファイルアップロード時に自動的にcache-controlを付与する

まとめ