Trying Out Various Settings for Amazon CloudFront Publishing

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.

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."

Click "Create CloudFront Distribution."

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.

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

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

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

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."

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

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;
    }
}

Publish → Click "Publish Function."

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

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

Check if the association has been made.

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."

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

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;
     }
}

Publish → Click "Publish Function."

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

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

Confirm that the association has been made.

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

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."

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

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

Confirm the settings.

The routing page will now be displayed.

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

Trying Out Various Settings for AWS WAF Publishing

Yasunori Kirimoto for AWS Community Builders ・ Jan 31 '22

#awswaf #waf #cloudfront #s3

Trying Out Various Settings for Amazon S3 Publishing

Yasunori Kirimoto for AWS Community Builders ・ Jan 14 '22

#aws #amazons3 #s3