Homework 5: DevOps and Documentation¶

Learning goals¶

Become familiar with cloud deployments and CD
Practice reading documentation and looking for answers independently

Project context¶

You and your team have modified and tested a basic calculator app. Now, you're going to deploy that app so that anyone can access it.

This is a group project. You will work in groups to understand AWS and Github documentation, and use your understanding to set up a deployment workflow that deploys the calculator app on every push to main. This assignment is intentionally less prescriptive than prior assignments; a large component of the work is reading and understanding documentation.

Assignment instructions¶

In this assignment, you will use AWS to deploy your webapp. Specifically, you'll use:

AWS lambda to run your backend code.
API Gateway to expose your calculator API to the web.
S3/Amplify to host your frontend code.
Github actions to automatically deploy updated frontend/backend code to S3/lambda.

We'll describe each of these components in more detail next.

Deliverables¶

For this assignment, each group will turn in:

One paragraph on your division of responsibilities (see immediately next).
A link to the production deployment of your calculator app.
A link/links to your Github deployment workflows.
A link to the most recent commit to main, showing that your deployment workflow has run successfully.

Division of responsibilities¶

Read through the entire assignment. Despite the fact that there are four key parts, you'll notice that the parts are inter-dependent (e.g., the lambda code is invoked by calls to the API). Decide which teammate will be primarily responsible for which tasks, spelling out who will collaborate for inter-dependent pieces of the assignment.

Logging into AWS¶

Use this link to log into your team's AWS account. You'll need AWS access for all steps of this homework.

1. Use AWS lambda to run your backend code¶

AWS lambda lets you run "server" code without having to deal with actual servers; it's a "serverless" computing service. To use lambda, you:

Write (slightly stylized) code that executes functions on certain events (e.g., the invocation of a given endpoint)
Package the code up (e.g., literally zip it)
Upload the packaged code to AWS

You're going to modify your backend code so that it executes as a lambda function. Eventually, that lambda function will execute when the REST API's calculate endpoint receives a post request. To start with, though, you should become familiar with lambda, then package up your lambda code, deploy it, and make sure you can invoke it using the AWS CLI.

1. Use the AWS console to experiment with lambda¶

Use the AWS documentation to become familiar with building a dummy lambda function in the AWS console and invoking it. This won't do for your app, though: you ultimately want to package up your backend code and automatically deploy it using lambda.

2. Package and invoke your lambda code using the AWS CLI¶

Next, learn to package up your JavaScript code and (1) upload it and (2) invoke it using the AWS CLI. The lambda portion of this lambda and API Gateway tutorial is a great resource.

3. Integrate your lambda code with CD and the REST API¶

Finally, coordinate with your team to:

Upload the lambda code automatically using a Github action and
Modify the lambda code so that it's invoked by requests to your API's calculate function.

2. Use API Gateway to create a REST API¶

API Gateway makes it simple to spin up an API. A web API exposes endpoints that users (or applications) can interact with. You are going to create a REST API for your calculator app. This API will expose the calculate function.

Start from this tutorial or the AWS docs above to create a REST API that exposes calculate.

After setting up API Gateway, locate the API call logic in your frontend code (where it currently calls localhost). Replace the localhost URL with the API Gateway endpoint URL---though you likely want to preserve a version of the app that runs locally for testing.

Then, coordinate with your team to make sure that invocations of calculate call the calculator's backend lambda code.

3. Use S3 and Amplify to host your frontend code¶

S3 is cloud storage for basically anything. You'll be using it to store the files that govern the frontend logic of your code. To deploy and expose these files at a publicly available URL endpoint, you will have to integrate with Amplify as well. AWS Amplify makes it easy to e.g., deploy app frontends and integrate with version control. In this assignment, you will use Amplify to manage deployment of the frontend of your calculator application.

Amplify integrates with Amazon S3 to store and serve static assets like HTML, CSS, and JavaScript files. It provides an automated deployment pipeline that syncs with your GitHub repository and updates the frontend whenever changes are, for example, pushed to your main branch.

Your task is to:

Create an S3 bucket for storing frontend logic.
Upload your frontend code's to the AWS S3 bucket.
Set up Amplify to host the application frontend.

To complete this part of the assignment, refer to the AWS documentation.

4. Use Github actions to automatically deploy on each push to main¶

After getting hands on experience with each service, you will use a Github action to deploy updates automatically on each commit to your main branch.

The CD pipeline will perform the following tasks:

Deploy the packaged backend Lambda code.
Deploy the frontend code with the updated API endpoints to S3.
Trigger AWS Amplify to redeploy the frontend from S3.

In order to do this, you will need to allow Github to authenticate to AWS. Follow the Github documentation to safely use your AWS secrets in CD. This AWS blog post describes some (basic) best practices for generating and handling AWS authentication secrets in CI; navigate to the "Configuring AWS credentials in GitHub" section of the tutorial.

Next, you will create one or more .yml files under the .github/workflows/ directory in your repository. These may be, for example, .github/workflows/deploy-aws-s3.yml (for AWS S3 deployment) or .github/workflows/deploy-aws-lambda.yml (for AWS lambda deployment).

You can use the following sample Github workflow for reference:

name: 

# Specify when this workflow should be triggered
on:
  push:
    branches:


jobs:
  deploy:
    # Specify the environment for this job (e.g., ubuntu-latest)
    runs-on: 

    steps:
      - name: # Short title describing what this step does (e.g., "Checkout Repository", "Build Frontend")
        run: # The command to execute (e.g., "npm install", "aws s3 sync")
        uses: # GitHub Action to use (e.g., "actions/checkout@v3", "aws-actions/configure-aws-credentials@v3")
        env: # Environment variables for this step (e.g., AWS keys, API URLs)

      - name:
        ...

Deploying backend code¶

You should create a Github workflow that takes the follow steps:

Checks out the code, sets up Node, and installs dependencies.
Packages the code for lambda deployment.
Uses the AWS CLI to update the lambda code (giving the CLI access to your authentication secret and AWS region through the environment).

Deploying frontend code¶

You should create a Github workflow that takes the following steps:

Checks out the code, sets up Node, and builds the code.
Deploys the built application to an AWS S3 bucket.
Triggers AWS Amplify to redeploy the latest frontend version from S3. See the AWS documentation for more.