DEV Community

Masaki Okuda
Masaki Okuda

Posted on

[AWS]Let's create a simple web authentication infrastructure using CloudFront + ALB + Cognito! [Handson]

Introduction

Thank you for always reading our articles!
Since we had requirements to implement a web server and authentication infrastructure in an EC2 environment in our in-house testing environment, we tried to do a quick hands-on demonstration of what we implemented this time.
The article is written in simple language so that even first-time readers can read it quickly, so I hope you will feel free to read it.

Target audience

  • I want to easily implement a web browser without using Route53 etc.
  • If you want to implement a static website without using S3.
  • For now, I want to implement an easy-to-implement architecture using AWS.

Use cases

  • When connecting to a server via a specific port
  • When the back-end and front-end environments are the same
  • If it is troublesome or difficult to issue a new domain. (you don't want to register with ACM)

If you are implementing this in a commercial environment, please take security measures such as AWS WAF and agility measures such as Auto Scaling.

Architecture

Image description

Hands On

Create security groups for EC2 and ALB.

  • EC2

Image description

Image description

  • ALB

Image description

Image description

The HTTP and HTTPS ports are designed to be permitted from any location.

If you want to set it more strictly, try narrowing the scope to only communications from CloudFront.

EC2

For EC2 settings, you just need to change the Apache configuration file.
This time, I used port 7000. (You can use any value.)

Please refer to the previous blog for HTML.

https://dev.to/masakiokuda/awsimplement-a-minimal-web-browser-with-authentication-using-aws-cognito-cloudfront-11p0

Image description

ALB

Before configuring ALB, please change the EC2 security group as follows.

Image description

By configuring the above, you will be able to communicate from the ALB to any port.
Configure the target group and load balancer as the ALB settings.

You cannot create a load balancer unless you configure a target group first.

  • Target Groups

Image description

Although there is an instance registration method for target registration, if you frequently create and delete resources using an IaC tool such as Terraform, the instance ID cannot be fixed. Therefore, this time we specify an IP address (private IP) as the target, which can be fixed in value.

  • Load Balancer(ALB)

Image description

The rule for listeners is that HTTP protocol communication is permitted.
It is also possible to configure HTTPS on the ALB alone, but in that case ACM configuration is required.
Now, let’s access it using the DNS domain assigned by the ALB.

Image description

CloudFront

I created it by registering the ALB I created earlier as the origin domain.

If you want to strengthen your security measures, you can configure AWS WAF from CloudFront.

If you access the site with the protocol set to HTTPS only (default setting), the following error will occur.

Image description

Access it via your distribution domain.

Image description

Now you can access it with HTTPS authentication.

Cognito

Regarding Cognito settings, the content is the same as in the previous blog, so I will skip it here.

Blogs
https://dev.to/masakiokuda/awsimplement-a-minimal-web-browser-with-authentication-using-aws-cognito-cloudfront-11p0

Summary

If you only need access to a domain automatically generated by CloudFront, you can achieve an HTTPS connection without issuing a domain using Route53. However, if you are planning to use it commercially, you will need to set a domain name. This is only a minimum implementation, so I think it is possible to expand on this implementation.

Thank you for reading the article to the end.

Top comments (0)