How to manually deploy a React business app to AWS Cloud

Artículo en espa?ol / Spanish article

Welcome, in this tech article, you’ll learn how to manually deploy your React app from Visual Studio Code to AWS Cloud in just 17 simple steps. We’ll cover Amazon Route 53, CloudFront, Amazon Certificate Manager, S3 Buckets, and IAM.

Requirements:

1. Visual Studio Code
2. Node.js LTS version
3. Git
4. AWS Account
5. AWS Command Line Interface
6. Active/register AWS Business domain

Note: It is recommended to have a debit or credit card with at least $25 to purchase the domain and set up an AWS account.

Let’s start:

Step 1: Create Your AWS Account

You can omit this step if you have an AWS account.

Here is link to the official documentation to do it

Step 2: After creating your AWS account, you will create the following:

• IAM User Group
• IAM User
• IAM User Access Key

Step 2.1: Search IAM

Step 2.2: Let’s create a user group in AWS IAM

This group will allow you to organize users and assign them the appropriate permissions.

Step 2.3: Attach permission policies to the user group created earlier.

This grants the user group the required access rights to AWS services and resources.

We have two option to add permissions policies:

option 1: Let’s create a custom policy, is the recommended option

A: Open the Identity and Access Management(IAM)

B: Click on Access management => Policies

C: Click on “Create policy” button

D: Click on “JSON” option of the Policy Editor

E: Enter the following custom policy:

{
    "Version": "2012-10-17",
    "Statement": [
        {
            "Sid": "AllowS3ReadPutGetDelete", // Unique identifier for this statement
            "Effect": "Allow",
            "Action": [
                "s3:PutObject",    // Allows uploading and updating objects
                "s3:GetObject",    // Allows reading objects
                "s3:CreateBucket", // Allows create buckets
                "s3:ListBucket",   // Allows listing objects in all buckets
                "s3:DeleteObject"  // Allows deleting objects
            ],
            "Resource": "*" // Apply to all buckets
        }
    ]
}        

If you want apply this to a specific bucket option change “Resource” by the following line:

"Resource": [
        "arn:aws:s3:::my-example-bucket",   // Apply to the bucket itself (ListBucket)
      ]        

Note: this only apply for existing S3 bucket.

F: Click on “Next” button

G: Add the policy name, must be unique:

for example: AmazonS3ReadWriteAccessCustom

H: Add the policy description

for example: Grants full read and write access to all objects in all S3 buckets, including the ability to create,upload, update, delete, and list objects across all buckets.

I: Click on “Create policy” button

Let’s attach policies searching:

IAMReadOnlyAccess

AmazonS3ReadWriteAccessCustom

option 2: Only for hands-on purposes. It’s not recommended as it can be dangerous or lead to bad practices if not used exclusively for administrative purposes.

IAMReadOnlyAccess

AmazonS3FullAccess

AmazonRoute53FullAccess

Do a verification that your user group created is with these permissions policies

Step 2.4: Let’s create the user to be assigned to the user group created earlier.

This will ensure the user inherits the appropriate permissions from the group.

User name example: vs_react_deployment_agent

Set the group created before: g_frontend_deploy_agents in the step 2.3

Click on "Next" button

Step 2.5: Let’s create an access key for the user created earlier.

The access key consists of an Access Key ID and a Secret Access Key, which are used to authenticate API requests made by the user.

click on “Create access key” button

Click on Download .csv file

Later Click on done

Please save very well that file, we will need it in the step 8.

Step 3: Register/get a domain name

You can omit this step if you have a business domain name purchased before at AWS Cloud.

Here is link to the official documentation to do it, please avoid step 2: Configure DNS of that documentation.

In this hands-on exercise, I purchased a generic top-level domain with a '.services' extension instead of '.com' because our business company wants to offer services from different teams to end customers around the world.

If you purchased your domain through Amazon Route 53, then yes, a hosted zone is automatically created for you. When you register a domain using Route 53, it automatically sets up a public hosted zone with the same name as your domain.

Note: If you transfer a domain to Amazon Route 53 from another provider, you will need to manually create a hosted zone for that domain.

Step 4: Let's create a subdomain based on the name of the team that offers these services.

The subdomain name follows this pattern:

Appname-EnvironmentSuffix.teamName.Domain

For example, if your app name is "reactapp," the environment suffix is "dev or stage" the team name is "marketing," and the domain is "pillazos.services" the resulting subdomain would be:

reactapp-dev.marketing.pillazos.services

Step 4.1: Let’s copy the name servers of the subdomain into the main domain in Route 53.

This will ensure proper routing between the subdomain and the main domain.

For example,remove "." at the end

ns-999.awsdns-96.com
ns-999.awsdns-92.net
ns-1899.awsdns-94.co.uk
ns-1299.awsdns-94.org        

Step 4.2: Let’s create a record into the main Domain in Route 53

This will allow you to configure domain settings, such as pointing the domain to a server or service, and ensure proper routing of traffic.

• Record Name: Enter the subdomain name (e.g., reactapp-dev.marketing.pillazos.services).
• Record Type: Select NS - Name servers for a hosted zone.
• Value: Copy the NS values from the subdomain created at the beginning of Step 4 and paste them here.
• TTL: Set the TTL (Time to Live) to 1 minute (+1m).
• Create the Record: click on "Create records" to save the new NS records.

Step 4.3: Let’s verify the DNS Record of the subdomain created using AWS CloudShell (OPTIONAL)

By checking the record, you can ensure the subdomain is correctly configured and propagating across the DNS system.

• Open CloudShell in AWS

• Run the following command:

aws route53 test-dns-answer --hosted-zone-id Z3M3LMPEXAMPLE --record-name subdomain.domain.com --record-type NS        

Replace Z3M3LMPEXAMPLE with your actual hosted zone ID and subdomain.example.com with your subdomain name.

Remember, Route 53 is where you can find your hosted zone ID

for example:

aws route53 test-dns-answer --hosted-zone-id Z3M3LMPEXAMPLE --record-name reactapp-dev.marketing.pillazos.services --record-type NS        

If the command returns the correct record values, it means that the subdomain was configured correctly.

Step 5: Let’s create a new local React app on your desktop or laptop.

You can omit this step if you have a react project created before.

This will generate the basic app structure, allowing you to begin developing your React project.

Open your terminal and run the following command to create a new React app using

npx create-react-app testreactinaws        

Step 6: Let’s test your React app locally: Run It on your local server

open your terminal or command prompt and run:

cd testreactinaws
npm start        

Your app will be available at https://localhost:3000/ by default.

Step 7: Building your app, when you’re ready to deploy your app, you can build it.

open your terminal or command prompt and run:

npm run build        

after the build folder is ready to be deployed.

open the project with visual studio code

code .        

Step 8: Let’s install the following Visual Studio Code extensions

AWS Toolkit

This extension will help you integrate AWS services directly into your development environment.

Step 8.1: Let's add a new connection

Remember the Access Key and Secret Key were created in the step 2.5, but my recomendation is complete the whole step 2.

Step 9: Let’s create an S3 bucket using Visual Studio Code

This allows you to manage your S3 resources without leaving your development environment.

Remember, this bucket name must be unique

Step 10: Let’s deploy the React app built in Step 6 to the S3 bucket created earlier.

This will make your React app accessible via a static website hosted on S3.

We can do it from the terminal from the AWS CLI with the following commands:

A- Remove Existing Files from the S3 Bucket

Run the following command to delete all objects in the specified S3 bucket:

aws s3 rm s3://reactapp7282024 --recursive --profile VS_REACT_AGENT        

B- Upload New Files to the S3 Bucket

after you’ve cleared the bucket, you can run your aws s3 sync command:

aws s3 sync build/ s3://reactapp7282024 --profile VS_REACT_AGENT        

Step 11: Let’s generate an SSL certificate in AWS using AWS Certificate Manager (ACM).

This certificate will enable secure HTTPS connections for your domain or application.

Step 11.1: In the ACM dashboard, click on the “Request a certificate” button.

Must to be in N. Virginia because we’ll want to use CloudFront

Step 11.2: Add Domain Names

Enter the domain names you want to secure. You can include multiple domains and subdomains:

For example: example.com, www.example.com.

Step 11.3: Let’s validate the Domain

Wait a few minutes for the DNS changes to propagate. ACM will automatically check for the CNAME record.

Step 11.4: Let’s come back to Route 53 to verify the DNS records

Step 11.5: After validation, the status of your certificate will change to “Issued” in the ACM dashboard. This may take a few minutes to complete.

Now we can use the SSL Certificate.

Step 12: Let’s create an SSL certificate for your subdomain.

This will enable secure HTTPS connections for your subdomain, ensuring encrypted communication

repeat the step 11.3, 11.4 and 11.5

Step 13: Let’s create a CloudFront distribution in AWS

This will improve performance by caching content at edge locations around the world.

Step 13.1: Create a New Distribution

Step 13.2: Configure Your Distribution Settings

Step 13.3: Let’s configure Origin Access Control (OAC) for your CloudFront distribution.

This ensures that only CloudFront can access the content in your S3 bucket, enhancing security by preventing direct access to your bucket.

after created the OAC let’s continue with the CloudFront setup

You will need to wait a few minutes until this distribution will be Enable

Step 13.4: Let’s configure error pages for the CloudFront distribution created earlier.

This will allow you to provide a user-friendly experience when errors such as 404 (Not Found) or 500 (Internal Server Error) occur.

Feel free to create a 403.html page for a better user experience.

Step 14: Let’s create an invalidation to ensure CloudFront always serves the latest content from the S3 bucket.

This is useful when you’ve updated the content and want CloudFront to immediately serve the new version.

Step 15: Let’s give CloudFront permission to access the S3 bucket.

This ensures CloudFront can retrieve and serve your content to users.

Step 15.1: Move to the s3 bucket

Click on "Permissions"

Click on "Edit" button

Add the following code

{
    "Version": "2012-10-17",
    "Statement": {
        "Sid": "AllowCloudFrontServicePrincipalReadOnly",
        "Effect": "Allow",
        "Principal": {
            "Service": "cloudfront.amazonaws.com"
        },
        "Action": "s3:GetObject",
        "Resource": "arn:aws:s3:::<S3 bucket name>/*",
        "Condition": {
            "StringEquals": {
                "AWS:SourceArn": "arn:aws:cloudfront::<AWS account ID>:distribution/<CloudFront distribution ID>"
            }
        }
    }
}        

here is the official documentation about it

You can find the <S3 bucket name> in Amazon S3 by navigating to Buckets and checking the Amazon Resource Name (ARN)

You can find the <AWS account ID> in CloudFront by navigating to Distributions and locating the <CloudFront distribution ID> in the ARN.

Step 16: Let’s back to the CloudFront, we will need to do a test

Open a new browser tab

We can successfully access the S3 bucket from CloudFront; everything was set up well.

Step 17: Let’s go back to Route 53 to complete the subdomain integration with the CloudFront distribution created earlier.

This will involve configuring DNS settings to route traffic through CloudFront.

You will need to create two records , one of record type A and second of AAAA type.

complete it a back to create record type AAAA

You will need to wait a couple of minutes after that to verify the subdomain.

If everything is fine you will have something like that.

Special thanks to Eng. Chanfu for reviewing and providing valuable feedback on this article.

That is everything folks, I will wait for your feedback, ideas, or advice, don’t hesitate to do it please, thank you.

My apologies for any inadvertent errors with my English skills, I’m learning how to speak my second language.