SSL/TLS Hosting Static React Project on S3 by CloudFront.

Architecture

Prerequisite

・React Project
・Github
・Domain
・AWS Account (Route53, Certification Manager, CloudFront, S3, CodePipeline, CodeBuild)

Step

1. Create React Project
2. Github settings
3. AWS (S3)
4. AWS (CodePipeline, CodeBuild)
5. AWS (CloudFront)
6. AWS (Route 53, Certification Manager)

# 1 Create React Project

$ yarn create react-app my-app --typescript

There is no need option to specify If it is not necessary typescript.
Next, let’s start the server. We can be browsed the site accessing `http://localhost:3000/`

$ yarn start

# 2 Github settings

If have you ever create github account, you have to create new github account.
First, you have to create new git repository to manage react application project. Next, you manage git by command.

$ git remote add origin git@github.com:username/repository.git
$ git push -u origin master

#3 AWS (S3)

We want to create S3 Bucket for hosting website on AWS management console.

Check if the one you made earlier is in the s3 bucket list.

Policy

{
    "Version": "2008-10-17",
    "Id": "PolicyForCloudFrontPrivateContent",
    "Statement": [
        {
            "Sid": "1",
            "Effect": "Allow",
            "Principal": {
                "AWS": "arn:aws:iam::cloudfront:user/CloudFront Origin Access Identity E1C92N89AHBSVF"
            },
            "Action": "s3:GetObject",
            "Resource": "arn:aws:s3:::myportfolio-v2/*"
        }
    ]
}

# 4 AWS (CodePipeline, CodeBuild)

Before touching CodePipeline, we add buildspec.yml file to the root directory in React project.
This file is placed in this naming and root directory according to the CodeBuild specification.

buildspec.yml

Configure the source provider to respond to the push event hook on the Github master branch.

If you do not have a CodeBuild project, create a new project.
Specify any name for the project name
・Ubuntu for Operation System
・standard for runtime
・ aws / codebuild / standard: 2.0 for image

Once the pipeline configuration is complete, the pipeline will start as soon as the creation complete message is displayed.

If all tasks can be successfully completed, confirm that the source of the project you built is located in S3.

# 5 AWS (CloudFront)

CloudFront was used because it can correspond to the CDN role and SSL / TLS.

Basically, it is created with default settings.

It should be noted that by reflecting the settings so that you can not directly reference S3 instead of through CloudFront, you can ensure that it can only be viewed through CloudFront.

Grand Read Permissyons on Bucket: Yes, Update Bucket Policy

# 6 AWS (Route 53, Certification Manager)

Next we will set up the domain.
The following description is based on the premise of acquiring a domain in advance. Issue a certificate with Certification Manager.

Request a public certificate and set the domain you have obtained.
The issuance procedure is completed by selecting the verification method to verify in DNS and creating cName in Route 53.

※As we are not reflected immediately even if issuance procedure is over, it is careful.

After publishing, you can check that it has the status as published as below.

SUMMARY

We were able to create a static hosting site that supports SSL / TLS.

As the trouble point, it was the first time to touch the setting of linkage around DNS and CloudFront, but I was a little confused, but it was relatively easy to build.

This time, I did this work with the purpose of upgrading my portfolio and touching on the features of AWS.

Since the foundation was able to be built, next time around the design around the front end side, I will decide on various specifications and think that I can publish it in the article.