Home AWS AWS Amplify in React Application deployment

AWS Amplify in React Application deployment

by SupportPRO Admin

The digital age requires businesses and individuals to have a website. Whether you are a developer, blogger, or an entrepreneur, hosting your website securely and efficiently is essential. Let’s see how to create a static website using Amazon Amplify, one of the powerful services offered by Amazon Web Services (AWS)..

What is Amazon Amplify?

Amazon Amplify is a fully managed service that enables developers to easily build, deploy, and host static web applications. It simplifies the process of setting up and managing infrastructure, allowing you to focus on developing your website and providing an exceptional user experience.

Step 1: Set Up an AWS Account

To get started with Amazon Amplify, you need an AWS account. If you don’t already have one, visit the AWS website and create a new account https://aws.amazon.com/. 

Once you’re logged in, you can access the AWS Management Console.

Step 2: Create a New Amplify App

In the AWS Management Console, search for “Amplify” and open the Amplify Console. Click on the “Get Started” button.

Step 3: Connect Your Repository

Amplify supports version control systems such as GitHub, Bitbucket, and AWS CodeCommit. After successful authorization, you can select which repository you want to deploy and select the branch.

Step 4: Configure Build Settings

Once your repository is connected, Amplify will detect the type of project you’re hosting (e.g., React, Angular, Vue.js, or plain HTML/CSS). It will suggest build settings based on the detected project type. Review and modify these settings as needed, ensuring they align with your website’s requirements.

The base template that AWS provides is shown below.

Also, under the Advanced Settings toggle, you can set environment variables and a custom-build container.

Finally, after reviewing your application’s settings, click Save and Deploy. AWS will begin configuring and deploying your application. Once AWS is deployed, you can navigate to the Amplify home page and see your newly deployed application. The amplify endpoint will let you access the website https://main.XXXXXX.amplifyapp.com/

Step 5: Set Up Custom Domains and SSL

To give your website a professional touch, you can set up a custom domain and enable SSL encryption. Amplify makes it easy to automatically add custom domains, provisions, and SSL certificates using AWS Certificate Manager (ACM). Once the endpoint is added in domain DNS the website can be accessed using your domain.

Step 6: Continuous Deployment

One of Amplify’s key features is its ability to enable continuous deployment. By connecting Amplify to your version control system, your website will automatically build and deploy whenever changes are pushed to the repository. This ensures that your website is always up to date.

Step 8: Monitor and Manage

You can monitor the performance of your website, track build logs, and manage multiple aspects of your application with Amplify’s dashboard. You can view metrics, set up alerts, and integrate with AWS CloudWatch for advanced monitoring capabilities.

Pricing:

You must be wondering why this is so cool and easy to deploy the website and is going to cost more. Nah, the AWS Amplify is included in the 12-month free tier 

Ie; No cost for up to:

  • 1,000 build minutes per month
  • 1,000 build minutes per month
  • 5 GB stored on CDN per month
  • 15 GB per month
  • 500,000 requests per month
  • 100 GB hours per month.

As you know AWS free tier is for 12 months only, once it’s over or you have a pay-as-you-go account then the following pricing is applied.

BUILD & DEPLOY – $0.01 per minute

DATA STORAGE – $0.023 per GB per month (this charge recurs until the app is deleted)

DATA TRANSFER OUT – $0.15 per GB served

REQUEST COUNT (SSR) – $0.30 per 1 million requests

REQUEST DURATION (SSR) – $0.20 per hour (GB-hour)

Amazon Amplify simplifies the process of hosting websites, allowing developers and website owners to focus on their content and user experience. By following the steps outlined in this guide, you can quickly set up and deploy your website with Amplify’s powerful features. Embrace the power of AWS Amplify and enjoy a scalable, secure, and hassle-free hosting experience for your website.

guy server checkup

Need help with your servers?

Contact Us today!

Leave a Comment

CONTACT US

Sales and Support

Phone: 1-(847) 607-6123
Fax: 1-(847)-620-0626
Sales: sales@supportpro.com
Support: clients@supportpro.com
Skype ID: sales_supportpro

Postal Address

1020 Milwaukee Ave, #245,
Deerfield, IL-60015
USA

©2022  SupportPRO.com. All Rights Reserved