Ring-tailed lemur

Hello! I'm a ring-tailed lemur and I've been suffering from hay fever lately.

I hope that what I say will be helpful to as many people as possible.

This time, unusually, the article is not related to voice recognition.

I will write a rough guide on how to create AWS CloudFront.

As a bonus, it also explains how to create an authenticated URL.

What motivated me to write this article

This is what happened. (Filmfication included)

CloudFrontとは

A fantastic network function that provides super fast and super fast communication.

Content is distributed through bases in various locations around the world, allowing for very low latency communication.

It is used mainly for data-intensive communications such as video streaming.
It seems that Hulu and Amazon Prime Video use CloudFront.

Thing you want to do

I want to create something like this.

Setting method

1. Create S3.

2. Create CloudFront.

1. Create S3

Search for "S3" from the search bar.

Press the buttons "Bucket" ➡ "Create Bucket".

It would be great if the screen looked like this!

What you can set when creating an S3

Bucket Name

Bucket name.
The following rules might make it easier to manage later:
{project_name}-{prod||stg||dev||test}-{purpose}-bucket
This time, set it to "techblog-test-waokitsune-bucket".

AWS Region

Where to make buckets.
I like Tokyo.
This time it's set to "Tokyo".

Object owner

Used when tinkering from another account.
It's difficult to explain, so I'll leave it to someone else.
This time it is set to "Disabled".

The block public access setting for this bucket

If you uncheck "Block all public access", you can access it from various places.
Since we want to access via CloudFront this time, we set "Block all public access".

Bucket versioning

Once you set it up, you can go back in time and restore it.
You might want to enable it in a production environment.
This time it is set to "Disabled".

Tag

Convenient for company operations.
For example, if you set "purpose: log", you can easily judge the log from another program by looking at it.
No special settings will be made this time.

Object Lock

If enabled, overwriting will be prevented.
This time it is set to "Disabled".

When you press Create like this...

I was able to create an S3 bucket. Yay!

It's fun, so I'll put some photos I like inside.

(Please ignore the misspelling of "bucket" in the image! Just a good kid's promise!)

This completes the creation of S3.

2. Create CloudFront.

Now let's create CloudFront.

As before, search for "CloudFront" from the search bar.

Press the buttons "Distribution" ➡ "Create Distribution".

If you see a screen like this, it's OK!
Let's set the values ​​appropriately.

What you can set when creating CloudFront

Our Origins

Origin Domain

Destination. Select the S3 bucket you created earlier.
This time, set the value corresponding to "techblog-test-waokitsune-bucket".

Origin Path

You can set the path as per the name.
You can set the path to connect to the CloudFront origin.
This time, we won't set anything.

Name

Give it a cool and easy to understand name.
This time, set the same name as the origin domain.

S3 bucket access

Do you use an Origin Access Identity (OAI)?
The foreign words are difficult, but the point is, do you want to access S3 only via CloudFront?
This time, click the checkbox as shown below and click "Create a new OAI".

Add custom headers – optional

I've never used it, but it adds it to the header when you access it.
Not set this time.

Enable shielding

It makes caching more efficient.
It's difficult to understand, so I'll explain it with a diagram.
The following is when Origin Shield is disabled.

The following is when Origin Shield is enabled.

*Image is official.

As you can see, Origin Shield acts as an intermediary, so caching is extremely effective.
Use it when it is better to use cache.
But this time we won't set it!

Default Caching Behavior

Path Pattern

Use this when you want to change the behavior depending on the path.
When you first create it, the default settings are set and cannot be changed.

Automatically compress objects

Something that can compress files when returning them.
It's a great tool that automatically compresses files in compatible browsers.
I won't go into details as it would be too much trouble to explain.See here for conditions etc..
Not set this time.

Viewer Protocol Policy

It depends on your company's policy.
This time"HTTP and HTTPS" is set.

Allowed HTTP methods

Literally, which HTTP methods are allowed.
Since the purpose this time is to retrieve a file, set "GET, HEAD".

Restricting viewer access

Restricting access to CloudFront.
The settings will be changed in the bonus section below.
This time, select "No."

Cache Keys and Origin Requests

You can decide how to handle content caching and set additional information to be included when requesting if the cache is not found.
It would take too long to explain, soFor more information, please see here.
This time, set it to the default "CachingOptimized".

Associating Functions

This is set when running functions etc. during a request.
Not set this time.

Fare class

You might want to set this if you want people in a specific area to see your profile.
This time, I set it to "Use all edge locations (best performance)".

AWS WAF Web ACL – Optional

You can configure WAF (Web Application Firewall).
It might be useful if you want to set IP restrictions.
Not set this time.

Alternate Domain Names (CNAME) – Optional

You can set the domain name.
Not set this time.

Custom SSL Certificate – Optional

You can set up an SSL certificate.
Not set this time.

Supported HTTP versions

You can add support for HTTP versions.
This time, I just check "HTTP/2".

Default root object – optional

Default when accessed by root (/).
It feels good when something like "index.html" is set.
Not set this time.

Standard Logging

Whether to output logs.
You have to decide this for yourself.

IPv6

Should I use IPv6?
I feel it's more cost-effective to use it.
This time, set it to "On".

Description – Optional

Please provide a clear description.

When you press Create like this...

I created CloudFront! (I'm tired of reading the instructions!)

Well, let's access it now.

Type this into your browser like this:
https://{ディストリビューションドメイン名}/wao.png

Yay! I managed to post an image!! Yay yay ✌('ω'✌ )三✌('ω')✌三( ✌'ω')✌

This completes the CloudFront configuration.

Thank you for your hard work!

Bonus: Create a signed URL

From here, I will explain how to access using a signed URL.

What exactly is a signed URL?

By adding signed information to the URL parameters, you can check whether the access source is authorized.
I think it's mainly used to distribute private content.

Setup Procedure

To do this, you need to follow these steps:

1. Generate a key pair on your local PC

2. Upload your AWS key.

3. Assign a key to CloudFront.

1. Generate a key pair on your local PC

Let's create a key pair.

To create it you need something called openssl.
CLICK HEREPlease download and install from here.

Once the installation is complete, run the following at the command prompt:

>cd Documents
>openssl genrsa -out private_key.pem 2048
>openssl rsa -pubout -in private_key.pem -out public_key.pem

This will generate "private_key.pem" and "public_key.pem" in the Documents folder.

2. Upload your AWS key

Now let's go back to the AWS Management Console.

Click "Public Key" ➡ "Create Public Key".

Once you reach this screen, copy and paste the contents of the public_key.pem file you created in step 1.

Next, select "Keygroup" and then "Create Keygroup."

Just select and create the public key you just created and you're good to go!

3. Assign a key to CloudFront

Select an item from CloudFront Behaviors and click Edit.

This will take you to the same editing screen as before, where you can change Restrict viewer access to "yes" and select the key pair you created in step 2.

Now, even if you access it directly through CloudFront, it should be rejected!

Accessing with a signed URL

Here we will create it using AWS CLI.

The CLI itselfDownload from hereplease.

And at the command prompt type the following:

> aws cloudfront sign --url https://XXXXXXXXX.cloudfront.net/wao.png \
--key-pair-id XXXXXXXXXXXX \
–private-key file://private_key.pem \
–date-less-than 2022-12-24T00:00:00+09:00

The parameters follow the rules below:

url: The URL you want to access
key-pair-id: Enter the value of CloudFront -> Public key -> ID.
private-key: file name. It seems that "file://" is required when selecting a file.
date-less-than: A date. Write it like that.

Then, a URL will be issued, so if you copy it and access it...

(☝ ՞ਊ ՞)☝Whee

Summary

It was fun to be able to create the cloud front with just a few clicks.

I would like to do my best next time as well.