AWS
S3
grunt.js

S3 にアップロードできる grunt-s3 について紹介するよ

More than 5 years have passed since last update.


はじめに

この投稿は Grunt Plugins Advent Calendar 2013 の 16 日目の記事です。

http://qiita.com/advent-calendar/2013/grunt-plugins/


grunt-s3

pifantastic/grunt-s3

ども。アッパーフィールドです。

みなさん S3 使ってますか?S3 かわいいよ、S3。

コメントが適当になってるのは空気読んでください。

最近なんかは S3 で静的 Web サイトのホスティングなんかもできるのでとても便利になりましたね。参考になるスライドのリンクも付けて記事の内容を盛ることにしました。

Amazon S3による静的Webサイトホスティング

というように S3 は便利なんですが、その S3 へ気軽にファイルのアップロード/ダウンロードが出来る grunt-s3 を紹介したいと思います。

あ、それと S3 を利用するには keysecret が必要です。このあたりはググってください。


インストール

$ npm install grunt grunt-s3 --save-dev

はい、これで OK ですね。


Gruntfile

色々出来ますが、簡単にアップロードだけできるようにしてみましょうか。

まずは Gruntfile のサンプルです。


Gruntfile.js

module.exports = function (grunt) {

grunt.initConfig({
pkg: grunt.file.readJSON('package.json'),
s3auth: grunt.file.readJSON('s3auth.json'),
s3: {
options: {
key: '<%= s3auth.key %>',
secret: '<%= s3auth.secret %>',
region: 'ap-northeast-1',
bucket: 'ore-no-site',
access: 'public-read'
},
ore_no_site: {
upload: [
{ src: 'hoge/**/*', dest: 'root/hoge' },
{ src: 'fuga/**/*', dest: 'root/hoge/fuga' }
]
}
}
});

grunt.loadNpmTasks('grunt-s3');
grunt.registerTask('upload', 's3');
};


keysecret についてはアカウントごとに使い分けることもあるでしょうから、別ファイルで管理するようなサンプルにしました。

なので Gruntfile と同じ階層に s3auth.jsonを置いてください。


s3auth.json

{

"key": "XXXXXXXXXX",
"secret": "XXXXXXXXXX"
}


S3 側の構造

ore_no_site: {

upload: [
{ src: 'hoge/**/*', dest: 'root/hoge' },
{ src: 'fuga/**/*', dest: 'root/hoge/fuga' }
]
}

ちょっと複雑に見えそうですが、とても簡単です。

指定した bucket 内に上の設定でアップロードした場合こんな構造になります。


ローカル内


  • ROOT_DIR/
    *Gruntfile


    • hoge/

    • hoge.html

    • fuga/

    • fuga.html




ore-no-bucket(バケット内)


  • root/


    • hoge/

    • hoge.html

    • fuga/


      • fuga.html





ローカルでは hoge ディレクトリと fuga ディレクトリは同階層ですが、バケット側では hoge ディレクトリ内に fuga ディレクトリを配置するようにしています。


アップロード

実行しましょう。

$ grunt upload

Running "s3:ore_no_site" (s3) task
>> ↗ Uploaded: fuga/fuga.html
>> ↗ Uploaded: hoge/hoge.html

という感じでとても簡単にアップロードできます。

\ 以上です /