npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

@sls-next/aws-cloudfront

v3.7.0

Published

This package was copied from https://github.com/serverless-components/aws-cloudfront because it wasn't being maintained anymore. It is being used by the [nextjs serverless component](https://github.com/serverless-nextjs/serverless-next.js/tree/master/pack

Downloads

15,765

Readme

aws-cloudfront

This package was copied from https://github.com/serverless-components/aws-cloudfront because it wasn't being maintained anymore. It is being used by the nextjs serverless component to provision the CloudFront distribution behind the scenes.

 

Deploy an AWS CloudFront distribution for the provided origins using Serverless Components.

 

  1. Install
  2. Create
  3. Configure
  4. Deploy

 

1. Install

$ npm install -g serverless

2. Create

$ mkdir cdn
$ cd cdn

the directory should look something like this:

|- serverless.yml
|- .env      # your AWS api keys
# .env
AWS_ACCESS_KEY_ID=XXX
AWS_SECRET_ACCESS_KEY=XXX

3. Configure

# serverless.yml

distribution:
  component: '@serverless/aws-cloudfront'
  inputs:
    distributionId: XYZEXAMPLE #optional
    region: us-east-1
    enabled: true # optional
    comment: 'My distribution' # optional
    aliases: ['foo.example.com', 'bar.example.com']
    priceClass: 'PriceClass_All' # optional
    errorPages: # optional
      - code: 503
        path: "/503.html"
        minTTL: 5 # optional, minimum ttl the error is cached (default 10)
        responseCode: 500 # optional, alters the response code
    defaults: # optional
      ttl: 15
      allowedHttpMethods: ['HEAD', 'GET']
      forward: # optional
        # array of header names, 'none' or 'all'
        headers: ['Accept', 'Accept-Language']
        # array of cookie names, 'none' or 'all'
        cookies: ['my-cookie]
        queryString: true
        queryStringCacheKeys: ['queryKey']
      viewerProtocolPolicy: 'https-only' # optional
      smoothStreaming: true # optional
      compress: true # optional
      fieldLevelEncryptionId: '123' # optional
      lambda@edge: # added to cloudfront default cache behavior
        viewer-request: arn:aws:lambda:us-east-1:123:function:myFunc:version
    origins:
      - https://my-bucket.s3.amazonaws.com

Custom cache behavior

Custom cache behaviors support the same config parameters as the default cache behavior (see the example above).

# serverless.yml

distribution:
  component: "@serverless/aws-cloudfront"
  inputs:
    origins:
      - url: https://my-assets.com
        pathPatterns:
          /static/images: # route any /static/images requests to https://my-assets.com
            ttl: 10
            allowedHttpMethods: ["GET", "HEAD"] # optional
            forward: # optional
              headers: "all"
              cookies: ["auth-token"]
              queryString: true
            compress: false # optional
            # ...

Custom origin config

To configure custom origins: https://docs.aws.amazon.com/cloudfront/latest/APIReference/API_CustomOriginConfig.html

# serverless.yml

distribution:
  component: "@serverless/aws-cloudfront"
  inputs:
    origins:
      - url: http://old-api.com
        protocolPolicy: http-only
        pathPatterns:
          /old-api:
          # ...

Lambda@Edge

# serverless.yml

distribution:
  component: "@serverless/aws-cloudfront"
  inputs:
    origins:
      - url: https://sampleorigin.com
        pathPatterns:
          /sample/path:
            ttl: 10
            lambda@edge:
              viewer-request: arn:aws:lambda:us-east-1:123:function:myFunc:version # lambda ARN including version

Private S3 Content

To restrict access to content that you serve from S3 you can mark as private your S3 origins:

# serverless.yml

distribution:
  component: "@serverless/aws-cloudfront"
  inputs:
    origins:
      - url: https://my-private-bucket.s3.amazonaws.com
        private: true

A bucket policy will be added that grants CloudFront with access to the bucket objects. Note that it doesn't remove any existing permissions on the bucket. If users currently have permission to access the files in your bucket using Amazon S3 URLs you will need to manually remove those.

This is documented in more detail here: https://docs.aws.amazon.com/AmazonCloudFront/latest/DeveloperGuide/private-content-restricting-access-to-s3.html

Updating an existing CloudFront distribution

To update an existing CloudFront distribution you can add the optional distributionId to your config:

distribution:
  component: "@serverless/aws-cloudfront"
  inputs:
    distributionId: SomeDistributionId

To update an existing origin with a new cache behavior the component uses the origin's url value to find and update with the specified config:

distribution:
  component: "@serverless/aws-cloudfront"
  inputs:
    distributionId: SomeDistributionId
    origins:
      - url: https://some-existing-origin.com
        pathPatterns:
          /some/new/path:
            ttl: 10

To add a new origin to the existing CloudFront distribution just specify the new origin as you would normally:

distribution:
  component: "@serverless/aws-cloudfront"
  inputs:
    distributionId: SomeDistributionId
    origins:
      - url: https://some-new-origin.com

This will create the new origin and add any defined cache behaviors to that origin.

4. Deploy

$ serverless

Credits

This package was originally implemented by the serverless framework team. I decided to fork it and bring it into this monorepo because it wasn't being maintained anymore