share facebook facebook twitter menu hatena pocket slack

2017.04.24 MON

gulpを使ってローカルファイルをデプロイする

工藤 響己

WRITTEN BY 工藤 響己

gulpを使ってS3にWebサイトをアップロードしてみたのでメモ。
今までは作成したWebサイトをプレビューするとき、CyberduckというFTPツールを使用してS3のプレビュー環境にデプロイしていましたが、セキュリティソフトとの相性などが原因で接続が不安定になることが多くなったので、gulp-s3というプラグインを使用してみました。

ダウンロード

まずはターミナル画面で
npm install --save-dev gulp-s3

gulpfile.js

次にgulpfile.jsに以下の通り追記。

gulpfile.js

var s3   = require('gulp-s3')
var gulp = require('gulp')

var AWS = {
  "key":    process.env.AWS_ACCESS_KEY_ID, //<=これでダメなら "AWS_ACCESS_KEY_ID" で。
  "secret": process.env.AWS_SECRET_ACCESS_KEY, //<=これでダメなら "AWS_SECRET_ACCESS_KEY" で。
  "bucket": "dev.example.com", //バケット名
  "region": "eu-west-1" //リージョン名
}

gulp.task('upload', () => {
  gulp.src('./dist/**').pipe(s3(AWS));
});
// es6使えないときは下記で
//gulp.task('upload', function(){
//  gulp.src('./dist/**').pipe(s3(AWS));
//});

タスク実行

ターミナル画面で
gulp upload

参考

所感

FTPツールを使うよりも高速にアップロードすることができ便利さを実感。
待ち時間もエラーもなくなりストレスが一つ減らすことができました!

元記事はこちら

gulpを使ってローカルファイルをデプロイする

cloudpack

cloudpackは、Amazon EC2やAmazon S3をはじめとするAWSの各種プロダクトを利用する際の、導入・設計から運用保守を含んだフルマネージドのサービスを提供し、バックアップや24時間365日の監視/障害対応、技術的な問い合わせに対するサポートなどを行っております。
AWS上のインフラ構築およびAWSを活用したシステム開発など、案件のご相談はcloudpack.jpよりご連絡ください。