Trying Out Various Settings for Amazon CloudFront Publishing
Tags: aws, amazoncloudfront, cloudfront, s3
Published: 2022-01-24 11:11:27

![img](https://day-journal.com/memo/images/logo/aws/cloudfront.png)

### I've been experimenting with various settings for Amazon CloudFront publishing :tada:  

<br>

Advance Preparation

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

![img](https://day-journal.com/memo/images/amazon-cloudfront-001_07.png)

![img](https://day-journal.com/memo/images/amazon-cloudfront-001_08.png)

<br>

## 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](https://day-journal.com/memo/images/amazon-cloudfront-001_01.png)

Click "Create CloudFront Distribution."

![img](https://day-journal.com/memo/images/amazon-cloudfront-001_02.png)

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](https://day-journal.com/memo/images/amazon-cloudfront-001_03.png)

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

![img](https://day-journal.com/memo/images/amazon-cloudfront-001_04.png)

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

![img](https://day-journal.com/memo/images/amazon-cloudfront-001_05.png)

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

![img](https://day-journal.com/memo/images/amazon-cloudfront-001_06.png)

<br>

## 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](https://day-journal.com/memo/images/amazon-cloudfront-003_01.png)

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

![img](https://day-journal.com/memo/images/amazon-cloudfront-003_02.png)

Configure the function to restrict IP in CloudFront Functions.

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

![img](https://day-journal.com/memo/images/amazon-cloudfront-003_03.png)

Publish → Click "Publish Function."

![img](https://day-journal.com/memo/images/amazon-cloudfront-003_04.png)

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

![img](https://day-journal.com/memo/images/amazon-cloudfront-003_05.png)

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

![img](https://day-journal.com/memo/images/amazon-cloudfront-003_06.png)

Check if the association has been made.

![img](https://day-journal.com/memo/images/amazon-cloudfront-003_07.png)

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. 

<br>

## 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](https://day-journal.com/memo/images/amazon-cloudfront-004_01.png)

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

![img](https://day-journal.com/memo/images/amazon-cloudfront-004_02.png)

Configure the function for Basic authentication in CloudFront Functions.

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

![img](https://day-journal.com/memo/images/amazon-cloudfront-004_03.png)

Publish → Click "Publish Function."

![img](https://day-journal.com/memo/images/amazon-cloudfront-004_04.png)

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

![img](https://day-journal.com/memo/images/amazon-cloudfront-004_05.png)

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

![img](https://day-journal.com/memo/images/amazon-cloudfront-004_06.png)

Confirm that the association has been made.

![img](https://day-journal.com/memo/images/amazon-cloudfront-004_07.png)

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

![img](https://day-journal.com/memo/images/amazon-cloudfront-004_08.png)

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

<br>

## 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](https://day-journal.com/memo/images/amazon-cloudfront-002_01.png)

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

![img](https://day-journal.com/memo/images/amazon-cloudfront-002_02.png)

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

![img](https://day-journal.com/memo/images/amazon-cloudfront-002_03.png)

Confirm the settings.

![img](https://day-journal.com/memo/images/amazon-cloudfront-002_04.png)

The routing page will now be displayed.

![img](https://day-journal.com/memo/images/amazon-cloudfront-002_05.png)

<br>

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 :bulb: 

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

<br>

Related Articles

{% link https://dev.to/aws-builders/trying-out-various-settings-for-aws-waf-publishing-5c4n %}
{% link https://dev.to/aws-builders/trying-out-various-settings-for-amazon-s3-publishing-2hd1 %}