Host a static site in S3 with Cloudfront and Https

Serverless Framework
1

Hi,

I am trying to understand if the following is possible…

  • Upload a static site to S3.
  • Create a cloud formation distribution.
  • Link to a custom domain name from route 53
  • Attach a custom https certificate from Amazon’s certificate manager.

I’ve had a look at both the serverless-finch and serverless-single-page-app-plugin plugins. The former works quite nicely to upload my static site to s3 and I believe the latter will set up a cloud front distribution.

I’m struggling to understand how to connect the dots.

Firstly - is this what the serverless framework is designed to do? Or should I look at a different tool (e.g. Terraform).

If I’m in the right place I think I need to understand how to link up both my Route 53 domain and my HTTPS certificate to my cloudfront distribution.

Or is it the case that I would set these up once manually and then use serverless to manage the deploy my static site in the s3 bucket and the lambda APIs I will have for the actual site functionality?

Would be grateful for some pointers.

Thanks.

2

Go through https://serverless-stack.com/, it gives you the instruction on how to do that.

You can jump to part of Create a New React.js App if you know serverless already.

1 Like
3

Have you found a way out to do it in through serverless rather using netily as mentioned in the serverless stack ?

4

It uses netily do complete the process that is deploying to s3 -> cloudfront and then a custom domain at route 53 . Can we do it using serverless only ?

5

in my experience…there are better ways to transfer your web site to S3 buckets. while i imagine there’s a way that serverless can do this…gulp is probably an easier tool - along with this add-on:

https://www.npmjs.com/package/gulp-awspublish

then in your gulp file:

gulp.task(‘aws-publish-dev’, function() {

var publisher = awspublish.create({
    region: 'us-west-2',
    params: {
        Bucket: '===your bucket name==='
    }
}, {
    cacheFileName: './cache/'
});

return gulp.src('./dist/**')
    .pipe(publisher.publish())
    .pipe(publisher.sync())
    .pipe(awspublish.reporter());

});

6

probably should also mention there’s a cloudfront add-on which will invalidate the cache for you (a)synchronously…

https://www.npmjs.com/package/gulp-cloudfront-invalidate

gulp.task(‘invalidate-cloudfront’, function() {
var cfSettings = {
distribution: ‘===your name====’, // Cloudfront distribution ID
wait: false, // Whether to wait until invalidation is completed (default: false)
paths: [’/*’], // Configure OriginPath to be removed of file path to invalidation
indexRootPath: true // Invalidate index.html root paths (foo/index.html and foo/) (default: false)
};

return gulp.src('*')
    .pipe(cloudfront(cfSettings));

});