読者です 読者をやめる 読者になる 読者になる

のらぬこの日常を描く

ノージャンルのお役立ち情報やアニメとゲームの話、ソフトウェア開発に関する話などを中心としたブログです。

gulp-s3-gzipで、s3上の格納先のパスを指定する方法

技術・開発

こんばんは、のらぬこです。

webサーバからクライアントにコンテンツ圧縮してを送ることができる仕様があります。

今更感半端ないですが、リクエストヘッダに書く accept-encoding : gzip とか、レスポンスヘッダにcontent-encoding : gzip と書いて圧縮したコンテンツを返すとかの話です。

少しでも転送量を減らしたいとき、少しでもページ読み込み速度を上げたい時などに使われるものだと思います。

ところで、s3に格納されたファイルについては、webブラウザが圧縮コンテンツ送ってもいいって要求してきても(つまり、accept-encoding : gzip と書かれていたとしても)、s3はわざわざ圧縮したコンテンツを返してくれません。

その辺は自前でやってくれってことですね。

取り敢えずやってみるだけであれば、以下の記事などが参考になると思います。

d.hatena.ne.jp

こちらの記事を書いた方も言われていますが、毎回毎回こんなことやってたら精神的に死んじゃうので、自動化したいですよね。

例えば、gulp を使う場合、gulp-s3-gzip というモジュールを使うと、ファイルを自動でgzip圧縮したうえで、自動でs3にアップロードできます。

しかも、content-encoding のヘッダ指定などもやってくれるので、deployはコマンド一発で完了です。

www.npmjs.com

npmjs内のドキュメントを読むと、ちょっと困ったことにアップロード先のパス指定のやり方が記載されていません。

やり方は簡単で、npm install して引っ張ってきたソース見るとすぐわかります。

var gulp = require("gulp");
var s3 = require("gulp-s3-gzip");
var gzip = require("gulp-gzip");
var options = { gzippedOnly: true, uploadPath : "/hoge/fuga/" };
 
gulp.src('./dist/**')
.pipe(gzip())
.pipe(s3(aws, options));
 
});

こんな感じで、options に uploadPath : "/hoge/fuga/" を追加すればおっけーです。

なお、gulp-s3-gzipの詳しい説明や、ソースコード全体を閲覧したい場合には、上でも紹介した gulp-s3-gzip のページを参照してください。

ということで、今回のお話は以上となります。

どなたかのお役に立てれば幸いです。