React + S3 + Route53 + CloudFront HTTPS connection using SSL

投稿日:2018年11月30日 更新日:


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.


  1. React web is deployed to S3
  2. 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.


Allocate domain to CloudFront with Route53

We will access it in our own domain acquired by Route 53 instead of accessing with https: //

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

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.


It was pretty easy to make SSL connection.


If you think this article is good, share it please

-, , , ,



Your email address will not be published. Required fields are marked *


How to define environment variables for each virtual host in apache 2.4 and use it in php

English 日本語 Abstract Hello everyone, It’s candle This time I’ll show you how to define environment variables for each virtualhost in apache 2.4 and use it in php For example, when you are developing with wordpress, you don’t want to put password or access key or anything else under the control of git. So, you can define it on apache and require it with getenv for use. Premise apache2.4 anything php project you have already built some kind of virtual host.

Allocate original domain of Route53 to React hosted at S3

Abstract Hello everyone it’s me candle. We will allocate original domain of Route53 to React hosted in S3. Condition You have a domain at Route53 You have a bucket with the same name as domain in S3 Your React is already hosting on S3 Importantly, the bucket of S3 and the domain name acquired by Route53 must be the same name.If you have not created a bucket yet in S3 or React web app is not hosted in S3, please refer to the previous article. Checking The domain of Route53 I have domain at Route53. I will allocate “” …

Setup of td-agent-ui and operation check

English 日本語 Abstract Hello everyone, It’s candle. In this time, I will show you how to set up td-agent-ui and operation check. Td-agent is easier than fluentd to operate on the server. Precondition Td-agent is installed Please refer to the following article when building td-agent to Centos 6.5. Build up a td-agent server on centos 6.5 For EC2, here Build up td-agent server on the EC2 of aws

Monitor the memory state of ec2 with watch and free command

English 日本語 Abstract Hello everyone, It’s candle. In this time, I will show you how to monitor ec2 memory in real time. EC2 server of t2.micro has only 1GB of memory, If you run composer, rails, mysql on it, memory may be barely. It is useful if you can monitor the memory and tune the server. Precondition EC2 server

Build up td-agent server on the EC2 of aws

English 日本語 Abstract Hello everyone, It’s candle. In this time we will build up td-agent environment on the ec2. Precondition You have a EC2.

I work in the venture company as a CTO. I start to write program in University, first I learned java, C++ and PHP. In the company, I'm developing web services by Rails. I do like to automation.