Cloudfrony download empty file

This documentation explains how to use AWS CloudFront to create a private, authenticated content delivery network (CDN).

Introduction

CloudFront is used to configure and maintain a content delivery network (CDN). For example, a read-only, authenticated website can be implemented that provides access to S3 storage files. The S3 files can be managed using command line interface and other tools. A CDN front end to the files is helpful when the amount of files is large and continues to grow over time.

The following are cases where CloudFront could be used. Currently this documentation focuses on experients with CloudFront, not authoritative documentation. If experiments work, then this documentation will evolve into a reference to streamline future configurations. The following are questions to answer, with the primary goal being to provide an authenticated website using S3 bucket for content.

1. How to use CloudFront to provide authentication and for an S3 bucket that is otherwise private, using a general login.
2. How to use CloudFront to provide authentication and for an S3 bucket that is otherwise private, using multiple logins, with access granted to specific folders in the bucket.

In all cases, it is desirable that:

• DNS alias maps to a "nice" URL
• the website behaves similar to S3 static website, with ability to automate uploads and access the site via web browser and programatically via command line interface (CLI)

Public Website

It is often necessary to implement a public website, for example for public static content. One option is to use an S3 public static website. However, adding a CloudFront service on top of the S3 public website provides additional functionality such as distribution to regional servers, optimizing caching, and use of . The following sections describe how to use CloudFront with S3.

Public website using an S3 bucket public static website

A public static website can be implemented using CloudFront and an S3 bucket that has been configured as a public static website.

Public website using an S3 bucket folder as public static website

Authenticated Website

It is often necessary to implement an authenticated website for private content. Using AWS S3 by itself does not support authentication (for example authentication on a public static website). One option is to use a cloud virtual machine, such as AWS EC2, with a web server such as Apache. However, using a VM is more costly. The options described below use CloudFront to implement an authenticated website, with private S3 bucket providing the content.

Authenticated website using a private S3 bucket and Lambda Function

Authentication for a Cloudfront distribution can be implemented using a Lambda function. This simple approach is appropriate in cases where one or a small number of users needs to access content.

Authenticated website using a private S3 bucket and Signed URLs and Signed Cookies

This documentation needs to be completed. Using a Lambda function for authentication was the first example to be documented.

CloudFront Distribution Configuration

Additional configuration is often needed after a distribution has been created, as described below.

See also the next section, which focuses on website content.

Change TTL

It may be useful to change the TTL values during development and testing of distributions. For example, set the values to 0 to delegate caching to the origin. Therefore, changing the original content should cause that content to be used for subsequent CloudFront requests. However, there may be latency and it may still be required to invalidate CloudFront content.

Additional CloudFront Website Configuration

Additional website configuration is likely needed after a distribution is configured and initial website content deployed. Specific issues are discussed below. Some of these issues, if not resolved, may severely limit effective use of a CloudFront website.

Custom Error Response

The initial setup did not prompt for an error page. To define, edit the distribution properties and then Error Pages. Use the Create Custom Error Response button to edit. The HTTP error codes generated by CloudFront can be mapped to a specified error page. The following indicates that a general error page should be used. Specific pages can be defined for each error code, such as or .

CloudFront Custom Error Response Setting (see full-size image)

Add File

A CloudFront website request may attempt to find a file in the root folder. Failing to find the file will generate a 403 error, which can be seen in the web browser console. Therefore, upload an appropriate file to eliminate this error. If necessary, use software such as to convert an image file to format.

Set as the Default for all Folders

This section was updated on 2020-04-19.

The main CloudFront configuration settings allows setting the Default Root Object to . However, this setting does not apply to other folders. This is different from an S3 bucket that is configured as a public static website. If the CloudFront distribution Origin Domain Name setting points to an S3 public static website then this is not an issue. However, if the CloudFront distribution uses an S3 bucket directly, for example to create an authenticated private website, many URLs will not work as expected because is not the global default file when URLs ending in are requested, and errors like the following will be shown.

The following URL pattern works:

• - works because full path to file is specified, but is inconvenient

The following URL patterns don't work:

• - does not work because is not the default
• - does not work because is not the default

See the following solution, which involves defining a lambda function:

The solution defines a trigger on the CloudFront distribution to detect when a page is accessed with URL ending in , and modifies the URL to append .

Example 1 for CloudFront Website Authenticated with Lambda Function

For this example, assume that another Lambda function has already been defined, such as the example to support authentication (see the example for Authenticated Website using a private S3 bucket and Lambda Function). Define the Lambda function in the same region and use the existing execution role. Before completing the following, review the details of the previous function that was defined and determine the execution role.

Therefore, define a Lambda function from the AWS Console for Lambda, as follows. Select the Create New Function button and Author from Scratch. Then enter information similar to the following:

Lambda Function to Append (see full-size image)

Press Create function. In the Function code editor, replace the code with he following, taken from the above article:

Save using the Save button. Then press the + Add trigger button to add a trigger (can't complete this step until the function has been saved). Select CloutFront from the list as shown below and then press the Deploy to Lambda@Edge button.

Lambda Function Trigger (see full-size image)

A form similar to the following will be displayed. Accept the defaults as shown and press Deploy. When creating this example the window did not automatically close and X had to be used.

Lambda Function Trigger (see full-size image)

The Lambda function Designer will then display similar to the following, indicating that a CloudFront trigger has been added.

Lambda Function after Trigger is Created (see full-size image)

Add another trigger similarly, but specify the Event type as Origin Response.

The following URL patterns then display the file content as expected. The third case may be an issue if files without extensions are served, but hopefully this can be avoided.

The following behavior was seen before the proper Lambda function code was determined. If the following symptoms occur, then evaluate whether the Lambda function code is correct, perhaps by trying something like Example 2 below.

For with Chrome, an error is shown and the browser downloads an empty file named (or etc. on subsequent attempts) in the user's folder.

Chrome Message Attempting to Open Folder (see full-size image)

For Microsoft Edge, after providing authentication information, the following is shown and pressing Open resets the URL to the main page and shows the main page. The buttons may be shown in either form depending on he width of the browser window.

Microsoft Edge Message Attempting to Open Folder (see full-size image)

Microsoft Edge Message Attempting to Open Folder (see full-size image)

If Save is selected in the above, the following is shown:

Microsoft Edge Message Attempting to Open Folder (see full-size image)

Selecting the Open folder button shows the following. In this case, Edge, has created an empty file (or , etc. on subsequent tries), whereas Chrome created files.

Download Files Resulting from Visiting Website Folder (see full-size image)

In this case, the Lambda function is either not getting executed as a CloudFront trigger, or a download is attempted instead of view. This issue was resolved by using the Lambda function code shown in this Example 1 and the following Example 2.

Example 2 for S3 Static Public Website

The previous Example 1 initially had issues and this second example was implemented as a test. It worked.

The following attempt implements a CloudFront distribution for the S3 bucket public static website, and therefore no authentication to deal with. Note that this example uses the origin content of the S3 bucket, not the served static website. This is done on purpose to illustrate how to resolve the issue with not being the default file in a folder when using CloudFront.

A Lambda function must be defined in the N. Virginia region using the AWS Console for Lambda. Click the Create function button. Use the Author from Scratch approach and define a function as follows.

• the function name is to different from previous function attempt
• Node.js.12.x is used because that is the latest available
• An existing execution role is used (the same as used for another example).

Create Lambda Function to Append to Folder (see full-size image)

Press Create function to create the function. Use the code from:

Use the Save button to save the function code. Then use + Add trigger to add a CloudFront trigger. Use information similar to the following information to configure the trigger. Note that the Distribution will auto-populate using the first distribution and it may be necessary to copy and past the correct distribution. Otherwise, deploying the trigger may complain that the event type is already used by another distribution (if this is the case). It is not clear if Include body should be checked in some cases, but this example was successful without selecting. The following selects the CloudFront event as Origin request.

Lambda Function CloudFront Trigger Configuration (see full-size image)

Press Deploy to deploy the trigger. The window may not automatically close so press X if necessary. The trigger will then be indicated in the Lambda function editor:

Lambda Function Trigger has been Created (see full-size image)

Repeat + Add trigger but for event type Origin Response. Again, make sure that the distribution identifier is correct because the form is auto-populated with the first available distribution.

Lambda Function CloudFront Second Trigger Configuration (see full-size image)

The following confirms that two triggers have been created (note the in the CloudFront box):

Lambda Function Second Trigger has been Created (see full-size image)

Attempting to access a CloudFront URL, for example or any links on this page that refer to its folders now works correctly, without attempting to download empty files when URLs ending in are encountered, and the web browser shows the URL as requested (addition of is done behind the scenes).

Troubleshooting

This section provides troubleshooting information.

Use to Access Content

The program can be used to query public and private web content. For example, use the following to query public content and display verbose output, which includes HTTP response headings.

Use the option to specify the user and prompt for password for a site with authentication.