Help us understand the problem. What is going on with this article?

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

More than 3 years have passed since last update.

はじめに

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

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

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

目次

S3に保存されてある画像にCache-Controlを付けるには、次の3つの方法があります。

  1. AWSコンソールから設定する
  2. 既にアップロード済みの画像情報を一括更新する
  3. ファイルアップロード時に自動的にcache-controlを付与する

今回は既にアップロード済みの画像は数千件単位であったため、2の方法で既存の画像を更新し、今後アップロードする画像のために3も設定しました。

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

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

s3.png

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はこんな感じです。

lambda.png

まとめ

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

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

folio-sec
誰もがかんたんに資産運用することができるサービス「フォリオ」を作っているFinTech系スタートアップ
https://corp.folio-sec.com/
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
No comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
ユーザーは見つかりませんでした