Hey wassup, Welcome! I'm Rosius
In this blog series, I will be showing you how to build a serverless newspaper web application and host it to the cloud with complete continuous Integration/ continuous deployment pipelines.
We will be using AWS services such as Amplify, CDK(Cloud Development Kit), with VueJs/NuxtJs web frameworks.
The AWS Amplify Console provides a Git-based workflow for deploying and hosting fullstack serverless web applications. A fullstack serverless app consists of a backend built with cloud resources such as GraphQL or REST APIs, file and data storage, and a frontend built with single page application frameworks such as React, Angular, Vue, or Gatsby.
Prerequisite
I assume you know the basics of Amplify, CDK, and Vue.
Here are a couple of tutorials from me, that'll help you get up and running with the above technologies
The AWS CDK Toolkit and CLI is the primary tool for interacting with your AWS CDK app. It will be used to deploy the CDK code to the target AWS environment. To install, use the command below.
npm install -g aws-cdk
Here are screenshots of the hosted application, so that you know exactly what the final product looks like.
Testing
I couldn't share the live application link here because I deleted the stack once I finished and tested the application.
Amazon doesn't play when it comes to paying for used resources, which is completely normal. Even though I've set my billing threshold at $1😂, yeah.. I'm cheap like that, I still deleted the app.
But here's a screenshot of the successful CI/CD deploy.
Introduction
This application can be built and hosted on AWS Amplify without using the AWS Cloud Development Kit(CDK). However, we will be using AWS CDK to develop the infrastructure and the configurations required to host the application on Amplify.
Deploying infrastructure with AWS CDK enables DevOps teams to:
- standardize infrastructure components;
- deploy in a repeatable manner and develop with familiar programming languages. Managed Service Providers that offer website hosting services will also benefit from an automated deployment and management of multiple Amplify applications across various customers.
App Architecture
The figure above shows the AWS services and the steps involved in deploying the application using Amplify and CDK.
The first step is to commit our application to a code repository like Gitlab, Github (1a) or AWS CodeCommit (1b)
Note: Creating Amplify application from source code in BitBucket is not currently supported using CDK. To connect to a BitBucket repository use the Amplify console.
Setup AWS CDK with python. Build and deploy the CDK code to a target AWS region to create the Amplify application.
- The CDK code will be converted to a CloudFormation template which will be deployed in the target region to create the Amplify Application.
- Any subsequent commits will trigger the Amplify continuous deployment pipeline which will fork the code from Github (4a).
We will use AWS Secrets Manager to store the personal access token (4b) which provides Amplify the permission to access the repository.
Amplify will generate a shareable URL that can be used to access the application from the internet. It also provides the flexibility of configuring a custom domain with SSL certificates issued by Amplify.
Creating a Nuxt Applicaiton
Let's begin by creating a nuxt app.
npx create-nuxt-app newspaperApp
I named my project newspaperApp.
When the script is done running and you've set all the defaults, from the apps root directory, run it with
npm run dev
Building the infrastructure with AWS CDK
Create a folder called
amplify-infra inside the newspaperApp folder.
Initialize cdk within that folder(amplify-infra)
We will be building the cdk app with python.
cdk init
The python code for the cdk app is stored in amplify-infra-stack.py
When you initialize a python application with CDK, it comes with a virtual environment. The virtual environment serves as a host for all the dependencies of your application. This prevents dependency conflicts between your application and other applications on
your system.
In order to install the CDK amplify construct, we need to activate the virtual environment.
Run the following commands from the root directory of amplify-infra.
For MacOS
source .venv/bin/activate
For Windows
% .venv\Scripts\activate.bat
Once activated, install the amplify CDK construct by running the following command
pip install aws-cdk.aws-amplify
Also, run the following command to install all dependencies in your setup.py file
python -m pip install -r requirements.txt
Freeze your dependencies in requirements.txt
For MacOs
python -m pip freeze | grep -v '^[-#]' > requirements.txt
For Windows
python -m pip freeze | findstr /R /B /V "[-#]" > requirements.txt
Open up the project in your IDE and navigate to the amplify_infra_stack.py file.
Type in the following code
from aws_cdk import core as cdk
import aws_cdk.aws_codebuild as codebuild
import aws_cdk.aws_amplify as amplify
from aws_cdk import core
class AmplifyInfraStack(cdk.Stack):
def __init__(self, scope: cdk.Construct, construct_id: str, **kwargs) -> None:
super().__init__(scope, construct_id, **kwargs)
amplify_app = amplify.App(self, "newspaper-app",
source_code_provider=amplify.GitHubSourceCodeProvider(
owner=<GITHUB-USER-NAME>,
repository=<GITHUB-REPO>,
oauth_token=cdk.SecretValue.secrets_manager(<personal access token>)),
)
amplify_app.add_branch("master")
What this piece of code does is, it'll always grab the newest commit of your application from GitHub, create a cloud formation template from it and send it to amplify console for CI/CD deployment.
I'm assuming you've created a repository on Github, please replace the with a string of yours, Github repo with yours and with yours. They should all be strings.
If you don't know how to create a secret key, don't worry, I got you. It's well detailed in the article below.
Build and deploy the application to the amplify console by running
npm run build
cdk synth
cdk deploy
I'm assuming you still have your virtual environment activated.
Creation of the Amplify Application
Create a file called
amplify.yml in
newspaperApp directory and type in the following configuration. Amplify would need the commands in this file, in order to successfully build and deploy our application.
version: 1
frontend:
phases:
preBuild:
commands:
- npm ci
build:
commands:
- npm run generate
- npm run build
artifacts:
baseDirectory: dist
files:
- "**/*"
cache:
paths:
- node_modules*
These two commands below would build and generate the folder dist which contains our deployable application.
- npm run generate
- npm run build
From the amplify-infra directory, with an activated virtual environment, run the following commands
npm run build
cdk synth
cdk deploy
Testing
New commits to the repository will automatically trigger the Amplify continuous deployment pipeline to deploy the changes to the application. To test this with the application, add texts in the landing page of the Nuxt App by modifying the “index.vue” file under the “pages” folder.
Commit your code after that and watch it build and deploy automatically in the amplify console.
Click on the provided link to view your live app.
If you faced any issues, copy the log and do a google search.
Conclusion
In this blog post, we have covered the steps to get started in deploying an Amplify Application using AWS CDK which we would extend to build a full-stack application using Amplify CLI and Amplify Libraries.
I really do hope I was clear and concise enough, please let me know what you think about this.
See you in Part 2.
Stay safe ✌🏿
References:
https://aws.amazon.com/blogs/mobile/deploying-a-static-website-with-aws-amplify-and-cdk/
https://docs.aws.amazon.com/cdk/latest/guide/cdk_pipeline.html
