Easily deploy to AWS S3 with Gulp to create a static site

I had a project to create a static website, but it’s a hassle to create a server.
Shouldn’t we just put everything in S3? So I decided to upload all the files to S3.

Since gulp is used to build the front end, how to deploy with gulp as it is.

Prepare S3 bucket and IAM

Create an S3 bucket for publication.
The IAM policy grants permissions to S3 so that you can access the bucket you created:IAM policy

{ "Version" : "2012-10-17" , "Statement" : [ { "Effect" : "Allow" , "Action" : "s3: *" , "Resource" : [ "arn: aws: s3 ::" : {BucketName} " , " arn: aws: s3 ::: {BucketName} / * " ] }, { "Effect " : " Allow " , " Action " : " s3: ListAllMyBuckets " , " Resource " : " * " } ] }
     
     
        
             
             
             
                
                
            
        
        
             
             
             
        
    

The region name, bucket name, IAM accessKeyId, and secretAccessKey created here will be used in later deployment tasks.

gulp-awspublish Install with npm

gulp-awspublish Add to npm’s package.json .
I scripts have set build and deploy so that I can run gulp from npm .package.json

{ 
  " scripts " :  { 
    " build " :  " gulp build " , 
    " deploy " :  " gulp deploy " , 
  }, 
  " dependencies " :  { 
    " gulp " :  " 3.9.1 " , 
    " gulp-awspublish " :  " 3.3. 0 " 
  } 
}

Run npm install in terminal

$ npm install

Create a deploy task to S3

Create gulp.js. For the contents to be entered in the key, enter the S3 and IAM information created earlier.gulp.js

var  gulp  =  require ( ' gulp ' ); 
var  awspublish  =  require ( ' gulp-awspublish ' );

GULP . task ( ' build ' ,  function ()  { 
  GULP . src ( " ./Origin/* " ) 
      // build task 
      . PIPE ( GULP . dest ( ' ./Build/ ' )); 
});

GULP . task ( ' the deploy ' ,  function ()  { 
  var  key  =  { 
    AccessKeyId :  " ******** " , 
    SecretAccessKey :  " ******** " , 
    region :  " ap-northeast-1 " , 
    params :  { 
      " Bucket " :  " {bucketname} " , 
    } 
  } 
  var  publisher  = Awspublish . the create( key );

  GULP . src ( " ./Build/* " ) 
      . PIPE ( publisher . publish ()) 
      . PIPE ( publisher . sync ()) 
      . PIPE ( Awspublish . reporter ()); 
});

This time, ./originI put the original file in and put the ./buildpre-built file in, ./build and upload the contents to S3.

Run deploy task

All you have to do is run it in your terminal

$ npm run build && npm run deploy

[ 12:08:09] Using gulpfile ~ / gulpfile.js
 [ 12:08:09] Starting'deploy ' ...
 [ 12:08:10] Finished'deploy ' after 205 ms
 [ 12:08:10] [ update] index.html
 [ 12:08:10] [ skip] main.css
 [ 12:08:10] [ create] main.js
 [ 12:08:10] [ delete] main.png

publisher.sync() Since is specified, it will automatically create / update / delete / skip by looking at the difference between the contents of the directory and S3.

end

With this, check the contents of S3, and if it is uploaded successfully, it is OK.
When actually operating, I also combine Github and Jenkins and build and use it so that it can be deployed with one click.

It was a simple and convenient way to deploy a static site on S3.