Abstract
Hello everyone it’s me candle. This time we would like to try SSL connection with the React web application deployed to S3.
Programers recently develop web services on the API server and React front end. Then SSL connection is often required on the React side as well. Not only that, but recently https is being standardized. We try to taht.
Condition
- React web is deployed to S3
- You have the S3 bucket that name is same as Route53 domain name
Create a CloudFront distribution
First we will create the distribution of CloudFront.
Go to the CloudFront management console, select the “Create Distribution” button.
Next push the “Get Started” button.
In the “Origin Settings” section you set up like this.
- “Origin Domain Name” selects the S3 bucket that released your React.
- “Origin Path” is empty
- “Origin ID” is filled automatically when you choose the “Origin Domain Name”
The configuration will be like this.
Then, in the “Default Cache Behavior Settings” section, only one is set. Set only “Viewer Protocol Policy”. If you accept both HTTP and HTTPS connection, choose “HTTP and HTTPS”. For HTTPS connection only, select “Redirect HTTP to HTTPS” or “HTTPS Only”. However, since the user inputs the URL with http in the browser, “Redirect HTTP to HTTPS” is better.
In the “Distribution Settings” section, we will setup two items.
First write the own domain name acquired by Route53 to “Alternate Domain Names (CNAMEs)”
Type index.html to the below “Default Root Object” text field.
It is ok for the time being as default. At last click the “Create Distribution” button.
Checking CloudFront
Back to the main management console. Your created distribution “Status” is now “In Progress”. You wait 5 ~ 10 minutes until that became the “Deployed”.
wait 5 ~ 10 minutes till the “Status” become the
After that is “Deployed”, Enter the automatically allocated Domain Name in the browser and confirm that you can access it.
- https://xxxxxxxxxxxxx.cloudfront.net
Allocate domain to CloudFront with Route53
We will access it in our own domain acquired by Route 53 instead of accessing with https: // xxxxxxxxxxxxx.cloudfront.net.
Go to the Route53 management console and select “Hosted zones” from the left menu. From the domain list, select the domain you wish to allocate to CloudFront.
Push the blue “Create Record Set” button and fill the itmes.
- “Name” is empty if you don’t use sub domain.
- “Type” is “A – IPv4 address”
- “Alias” is “Yes”
- “Alias Target” is your created CloudFront distribution
After inputting, press the “Save Record Set” button in the lower right.
Please try to access to the site you allocated domain name.
Probably your browser will display the alert to you.
This is because the certificate used for https communication is accessed by https://original_domain even though it is https://xxxxxxxx.cloudfront.net.
Next we will get the certification of original domain in the ACM.
Acquire a certificate with ACM
Certificate used with CloudFront must be acquired in the Eastern US (Northern Virginia) region.
Go to AWS Certificate Manager console and select “US East (N. Virginia)” in the header menu.
If you don’t have any certificate, click the “Get started” button.
Choose “Request a public certificate” and push the “Request a certificate” button。
Write your domain name allocated to CloudFront at the “Domain name” and press “Next”.
The way of validation is easier for “DNS validation”, so select it and press “Review”. When the confirmation screen comes up, please confirm, and press the “Confirm and request” button.
The validation screen appears, open the domain field and press “Create record in Route 53”.
When you check the “Success”, press the “Continue” button.
The ACM list is displayed. Acquisition of the certificate is completed when “pending” is set to “issued”.
Allocate ACM certificate to CloudFront
Let’s allocate the acquired certificate to CloudFront. Go to the management console of CloudFront.
Select the distribution and press the “Distribution Settings” button.
Push the “Edit” button in the “Generatl” tab.
Change the “SSL Certificate” to “Custom SSL Certificate” and select the ACM created earlier and save it.
It’s over. I think that it has become possible to access without trouble. Open the browser again and access to the site with original domain.
Coclusion
It was pretty easy to make SSL connection.
