JosephHonpah

Posted on Mar 8

AWS DEMO: Step By Step Guide To Deploy Full End To End Web Application on 7 Services

Step By Step Guide To Deploy Full End To End Web Application on 7 Services.

INTRODUCTION

In this hands-on tutorial, I’ll walk you through how to build a ride sharing functionality app (for unicorns!), pulled from Wild Rydes sample project. We’ll use seven different services — GitHub, Amplify, Cognito, Lambda, IAM, API Gateway and DynamoDB — talking about why/where to use them, and how to get them to work with each other. As move on, we’ll build each service and giving these services the ride sharing functionality for the application.

This application is deployed on Amazon Amplify integrated with github repository for CI/CD pipeline. Amazon cognito user pool used for authentication of users to sign up or sign in to the application using username or email, password and password confirmation. IAM used to give lambda the write access to dynamodb table and Lambda used to put items (user data) to dynamodb table logs. Api gateway used as rest API which helps user to invoke lambda function for Unicorn Ride. stay tuned for final functionality of this application… let me know what you think in comment box

What you need to follow along this project(Prerequisite):

i. text editor(notepad) to write down Id’s, ARN etc.

ii. An AWS account, logged in to the AWS Console as a an IAM user.

iii. Some basic knowledge of AWS is preferable, but you can still follow along if you’re an absolute newbie

iv) A GitHub account and the code from my GitHub repo: https://github.com/JosephHonpah/end-to-end-web-app
4) Architectural view to application: https://main.d2i8yld6dviyk2.amplifyapp.com/

3) How to copy the application code from my GitHub repository to yours:

Create or login to you GitHub account.
Click on link below to get access to my GitHub repository. https://github.com/JosephHonpah/end-to-end-web-app
You can use template by creating new repository on GitHub from the template or cloning.

4) Creating new web app on AWS Amplify from you repository:

Navigate to aws management console and search for Amplify and click on AWS Amplify

click on Deploy an app below to build web application

Click on GitHub because application code is stored in GitHub repository you created above

You need to select your github account which is JosephHonpah for me.

After successful sign in, you need to select the repository in which you stored your code. you can upload all repositories to amplify and select from Amplify but best you click on Only select repositories and choose the repository you want to build on amplify.

Scroll down and click next

On app settings leave everything default and scroll down click next.

Review and click on save and deploy.

Amplify deploying and might take 2mins or more depnding on network bandwidth.

Amplify deployed successfully and with a DNS name to access application: https://main.d2i8yld6dviyk2.amplifyapp.com/

Application can now be accessed from GitHub repository using amplify domain name provided above. Good right? Okay lets go…

5) You need authenticated users to securely and successfully sign up and sign in to your application. which we will use Amazon cognito user pool with the following steps below;

Navigate once again to search bar on management console, search cognito and open in new tab.

Click on create user pool.

Put in name of cognito user pool app client. it could be any name but make sure you have notepad to write down.

select configuration type. How you want users to sign up and sign in into your application and select attributes. scroll down and click on create.

Click on User pool and make sure to copy the User pool ID to notepad. Because you need to add configurations to your code for authentication to your appliction.

On left corner of page click on App clients and copy the the Client-ID and drop on notepad.

Navigate to your github repository on directory js/config.js and add user pool ID, client ID and AWS region which you copied and paste on note pad.

Once that is done then click on commit changes on top left corner and amplify with automatically deploy the changes made to your code since is a serverless CI/CD pipeline service.

Back on application click on sign up and register with email and password, clicl on LET’S RYDE.

Put in code on email and click Verify. you should be able able to get code from Amazon cognito and Verification successful message from AWS Amplify which means user is good to go and sign in to application

Once sign in with credentials, you get a token and you copy and drop that on notepad aswell for future use. this token will be needed to invoke API gateway so users to make API calls for rides from any location on the map.

6) Here we are going to see how to use dynamodb to store users credentials, orders etc. And lambda will be good service to automatically store theses details to dynamodb.

Create dynamoDB table by typing dynamodb on search bar. click on it and create table.

Give table a name and a partion key name which will be used to retrieve items from your table and allocate data across hosts for scalability and availability. scroll down and create table.

once table created, click on table , scroll down and click on additional Info. You need to copy and paste ARN of table and paste on notepad

You need to give lambda the the permission to write to dynamodb when even user sign up, sign in, orders ride, ride details etc. Which will be done on AWS Identity Access Management (IAM). Open IAM on new tab from aws management console.

click on Roles and create role.

Trusted entity type as AWS service and use case should be lambda, scroll down and click next.

add permission to role AWSLambdaBasicExecutionRole.

Give a name to lambda role and scroll down click on create role.

After role is created, click on role (webapp2025_lambda) and click on Add permissions to create Inline policy for dynamodb.

Use case should be DynamoDB and we need for best practice is to give permission to let lambda putitem to dynamodb table created above.

scroll down and click on Add ARNs to restrict access.

Click on Text and paste the dynamodb table ARN you created and copied above from notepad. click on Add ARNs and proceed to Next.

Review and give policy name. scroll down and proceed to create policy. Good to go…

Lambda function is now needed to perform the magic on application. so you once again navigate to search bar and search lambda and open in new tab, Click on create function.

Author from scratch and give lambda function a name and i will go with Node.js 20 x, because my code in repository is configured for Node.js 20 x and scroll down.

Add Permissions to lambda funtion which was created above on IAM. click on Use an existing role and select the role created. scroll down and click create function.

once function created, scroll down, copy and paste the lambda code from github repository created from beginning on the lambda code editor and Include dynamodb table name you created above in the code, the proceed to Deploy.

On left page click on create new event so as to test if lambda function is working properly. give the Event name and scroll down to the Event Json.

Copy test event code from github repository above and paste it in Eveny Json, scroll up and save test event.

Click on test and should be able to get a statuscode of 201, which means the functions works properly.

Going back to dynamodb table, you can see two items have been recorded into the table from lambda. Implying lambda function now works properly and writes to dynamodb.

I hope your enjoying the Architecture and just one more service to make the puzzle whole for the application.

7) In this last puzzle of the architecture it consist of how users on frontend of application can be able to make request for rides on map from any location using lambda. But lambda will not be best solution for users to make these calls, so API Gateway will be perfect solution and will seat between front end and lambda function to give it the proper functionality.

Navigate to API gateway on search bar and open in new tab, scroll down and click on REST API.

select new API and give API gateway name. scroll down and click create API.

Create an authorizer so API Gateway can work with Cognito, because API gateway will need Json web tokens from cognito to do api calls. So have to integrate the two services. click Authorizers pn left page and proceed to Create an authorizer.

Give authorizer name, use case(Authorizer type) should be cognito. select the cognito user pool created above and recall you should be in thesame region you created the userp pool. Token Source type in Authorization, scroll down and click create authorizer.

Click on created Authorizer and proceed to Test authorizer. Copy and paste in the Token Value as the token which was gotten from cognito user pool above saved in notepad during sign in process into application . click on Test authorizer.

A status code 200 signifies cognito user pool now integrated with API gateway succesfully and other meta data provided by cognito.

Create a Resource to hook up lambda function. Click on Resources on left page and proceed to create resource.

Resource path is default and give name resource name (webapp). Enable CORS(Cross Origin Resource Sharing) because the domain of amplify site above is different from domain of API gateway so its going to go cross origin. Proceed to Create resource.

On right of page click on Create method.

On method type select POST, Integration type should be lambda and scroll down.

Enable proxy so requests are sent to lambda funtion in structured event. Select the lambda function which was created above (webapp_lambda), scroll down and click Create method.

Under the Method request, click on edit which will hook up the authorization created above.

Under Authorization, select the user pool authorizer created above (webapp2025), scroll down and click save.

Everything set, now proceed to Deploy API on top right page.

For stage select new stage. Stage name (dev) and click on Deploy.

Copy the invoke URL and paste in code in config.js file on github repository above. so request from users accessing the application from frontend will be proxied by API gateway to lambda function at the back end and lambda putitem to dynamodb table.

Paste the copied invoke url above in the config.js file on github repository. Proceed to commit changes so it will be applied on application running on Amplify authomatically since its a CI/CD service.

Finally to test out everything. A user from Capitol Hill on map click on Request Unicorn

There a Unicorn Rocinante on the way and has arrived. wow great right?

Check on Dynamodb table, all request forwarded by API gateway to lambda function and its stored to dynamodb which you can as well do some analyses and much more.

Conclusion

I faced many challenges on how to get the right funtionality buy building and deleting and again, just know its not how fast you can deploy but why each service is the way it is .

This project is geared to perfect understanding of how AWS services work together to give a rebost architecture. let me know in comment if need any assitance and if you find any errors. please like and share as well.

JOSEPH NDAMBOMBI HONPAH.