A Walkthrough on how we’re building full stack applications using AWS Amplify.
Use Cases
While choosing a technology stack to build isn’t always an easy choice for web and mobile applications. We were confronted with multiple choices. The idea was to build long term sustainable applications with architectures that can scale seamlessly, simple to build and integrate new features through the lifecycle.
Amplify
AWS Amplify is a set of purpose-built tools and features that enables frontend web and mobile developers to quickly and easily build full-stack applications on AWS. Amplify provides two services: Amplify Hosting and Amplify Studio. Amplify Hosting provides a git-based workflow for hosting full-stack serverless web apps with continuous deployment.
Here is our Architecture:
As seen above, Amplify helped provision the infrastructure and all the components needed. Amplify hosts the Next web app on s3 and serves contents using cloudfront delivery network. This is fully managed by using amplify. We imported aws services as libraries into our application stack.
An example here is Cognito used for authentication.
import Amplify from ‘aws-amplify’;
import { withAuthenticator } from ‘aws-amplify-react’;
import { CognitoUserPool } from ‘amazon-cognito-identity-js’;
With the above, we easily integrate the user sign-up and sign-in into the application using Cognito User pool.
AWS Appsync
AWS Appsync is a fully managed GraphQL API layer developed by Amazon Web Services. AppSync allows developers to build GraphQL APIs without much of the usual work; it handles the parsing and resolution of requests as well as connecting to other AWS services.
Under the hood, AppSync consists of a GraphQL proxy—a service that receives and parses all the GraphQL requests—and of multiple subsystems for handling each specific request type. The supported request types are queries (for getting data from the API), mutations (for changing data via the API), and subscriptions (long-lived connections for streaming data from the API).
The AppSync interface allows developers to define the schema of the GraphQL API and attach resolver functions to each defined request-defined type.
DynamoDB
Evaluation of which database to use is usually one of the most difficult aspects in the evaluation of which technological stack to be used. We opted to use DynamoDB because of the serverless nature of it and it is auto provisioned by app sync based when we add the api to out project. The Table strictures are defined based on how we will be accessing our data. With this approach, we are already building in an efficient way because we used the application access patterns to build our tables.
The tables were built based on the access patterns expected from our queries.
Continuous Integration Continuous Deployment
Amplify offers out of the box CI/CD. It connects directly to our app on github where it installs web hooks. These web hooks serve as triggers for our jobs such that when there is a commit to github, amplify would be notified to clone our repo and push the changes to our cloud environment.
Another useful feature that we used in our project of amplify was multi branch build. Every branch has their environment which their CI/CD directly points to.
Below shows the workflow of the the Amplify CI/CD
Up Next
- Monitoring and security using cloudwatch dashboards
- Security using AWS WAF
- DR Creation and testing strategies for region failures.