joppot

コピペで絶対動く。説明を妥協しない

サーバ

React + S3 + Route53 + CloudFront HTTPS connection using SSL

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


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

  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.

  • 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.

スポンサードリンク

If you think this article is good, share it please

-サーバ
-, , , ,

執筆者:


comment

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

関連記事

How to get nginx error.log and access.log with td-agent

English 日本語 Abstract Hello everyone, It’s candle. In this time, we collect nginx log with td-agent. I explain with td-agent, but basic configuration is similer with fluentd. Precondition Td-agent or fluentd is installed You have a nginx server.

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.

Build up a td-agent server on centos 6.5

English 日本語 Abstract Hello everyone, It’s candle. In this time, we build up a td-agent server on the centos 6.5. Td-agent is service based on fluentd. It daemonizes fluentd and creates a GUI. Premise You have Centos 6.5 server. I use Centos 6.5 on the vagrant for explanation.

Collect Rails 5 production.log with td-agent

English 日本語 Abstract Hello everybody It’s me candle. In this article I will show you how to collect rails 5 production.log with td-agent. Rails 5 was changed log format and it cause some problem. I will solve it and explain. relational article If you are using rails 4 please refer to the following article. td-agentでRails 4のproduction.logを取得する Precondition You can work ruby on rails in production mode Before read this article you setup the rails production environment such as webrick, apache, puma and nginx. You already installed td-agent or fluentd. You need td-agent or fluentd. It is installed on the ruby …

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.