DEV Community

Cover image for Trying Out Various Settings for Amazon CloudFront Publishing
Yasunori Kirimoto for AWS Community Builders

Posted on • Updated on

Trying Out Various Settings for Amazon CloudFront Publishing

img

I've been experimenting with various settings for Amazon CloudFront publishing 🎉

Advance Preparation

  • Upload the set of files you want to publish to Amazon S3 in advance.
  • You can leave the settings private.

img

img

Publishing in combination with Amazon S3

This is a method of publishing using a combination of Amazon CloudFront and Amazon S3.

AWS Console → Click "CloudFront."

img

Click "Create CloudFront Distribution."

img

Specify the domain of the target S3, specify the S3 bucket access, set the policy to auto-update, and set the settings to redirect to HTTPS. Set the root object to index.html in S3. Leave the rest of the settings as default.

img

After creation, check the S3 bucket to confirm that the policy has been set automatically.

img

Try accessing the URL of the CloudFront distribution for S3 that was created.

img

S3 is accessed via CloudFront, and the WebSite is displayed.

img

Publishing only the specified IP

This is a method for publishing only the specified IP in Amazon CloudFront.

As preliminary preparation, display the WebSite in S3 via CloudFront.

Click "Function" → Click "Create Function."

img

Set the function name and description → Click "Create Function."

img

Configure the function to restrict IP in CloudFront Functions.

function handler(event) {
    var request = event.request;
    var clientIP = event.viewer.ip;
    // Specify the IP you want to allow
    var allowIP  = 'IP to allow';

    if (clientIP === allowIP) {
        return request;
    } else {
        var response = {
            statusCode: 403,
            statusDescription: 'Forbidden',
        }
        return response;
    }
}
Enter fullscreen mode Exit fullscreen mode

img

Publish → Click "Publish Function."

img

After creating the function, the Association menu will appear, so click "Add Association."

img

Set the target distribution, event type, and cache behavior. → Click "Add Association."

img

Check if the association has been made.

img

If you access the URL from the IP you set, the WebSite will be displayed. WebSite will not be displayed except for the specified IP.

Basic Authentication Publication

This is a method of publishing using Basic Authentication with Amazon CloudFront.

As preliminary preparation, display the WebSite in S3 via CloudFront.

Click "Function" → Click "Create Function."

img

Set the function name and description. → Click "Create Function."

img

Configure the function for Basic authentication in CloudFront Functions.

function handler(event) {
    var request = event.request;
    var headers = request.headers;
    // Set user and password
    var user = 'set user';
    var pass = 'set password';
    var authValue = 'Basic ' + (user + ':' + pass).toString('base64');

    if (typeof headers.authorization === 'undefined' || headers.authorization.value !== authValue) {
        var response = {
            statusCode: 401,
            statusDescription: 'Unauthorized',
            headers: {'www-authenticate': {value:'Basic'}}
        };
        return response;
     } else {
        return request;
     }
}
Enter fullscreen mode Exit fullscreen mode

img

Publish → Click "Publish Function."

img

After creating the function, the Association menu will appear, so click "Add Association."

img

Set the target distribution, event type, and cache behavior. → Click "Add Association."

img

Confirm that the association has been made.

img

When you access the URL, a dialog for entering the user and password will appear.

img

When enter the configured user and password, the WebSite will be displayed.

Vue.js Routing Support (extra)

This is how to support Vue.js routing with Amazon CloudFront.

This is a solution for displaying the routing page correctly when deploying an application built with Vue.js.

To prepare in advance, display the WebSite in S3 via CloudFront.

Click "Error Page" → Click "Create Custom Error Response."

img

Configure with error code 403 and other capture contents → Click "Create Custom Error Response."

img

Configure with error code 404 and other contents of the capture → Click "Create Custom Error Response."

img

Confirm the settings.

img

The routing page will now be displayed.

img

By using Amazon CloudFront, it is possible to publish in combination with Amazon S3 and to perform IP restrictions and Basic authentication in conjunction with CloudFront Functions 💡

In my next article, I would like to introduce the way combined with AWS WAF.

Related Articles

Top comments (0)