Getting Started with AWS

Build a Serverless Web Application

with AWS Lambda, Amazon API Gateway, AWS Amplify, Amazon DynamoDB, and Amazon Cognito

Build a Serverless Web Application

Module 1: Static Web Hosting with Continuous Deployment

To get started, you will configure AWS Amplify to host the static resources for your web application with continuous deployment built-in

Overview

In this module you'll configure AWS Amplify to host the static resources for your web application with continuous deployment built-in. The Amplify Console provides a git-based workflow for continuous deployment & hosting of fullstack web apps. In subsequent modules you'll add dynamic functionality to these pages using JavaScript to call remote RESTful APIs built with AWS Lambda and Amazon API Gateway.

Architecture Overview

Architecture Overview

The architecture for this module is very straightforward. All of your static web content including HTML, CSS, JavaScript, images and other files will be managed by AWS Amplify Console. Your end users will then access your site using the public website URL exposed by AWS Amplify Console. You don't need to run any web servers or use other services in order to make your site available.

For most real applications you'll want to use a custom domain to host your site. If you're interested in using your own domain, follow the instructions for setting up a custom domain on Amplify.

 Time to Complete

15 minutes

 Services Used

Implementation

  • Select a Region

    This web application can be deployed in any AWS region that supports all the services used in this application, which include AWS Amplify, AWS CodeCommit, Amazon Cognito, AWS Lambda, Amazon API Gateway, and Amazon DynamoDB.

    You can refer to the region table to see which regions have the supported services. Among the supported regions you can choose are:

    • US East (N. Virginia)
    • US East (Ohio)
    • US West (Oregon)
    • EU (Frankfurt)
    • EU (Ireland)
    • EU (London)
    • Asia Pacific (Tokyo)
    • Asia Pacific (Seoul)
    • Asia Pacific (Sydney)
    • Asia Pacific (Mumbai)

    Select your region from the dropdown in the upper right corner of the AWS Management Console.

    AWS Management Console
  • Create a Git repository

    You have two options to manage the source code for this module: AWS CodeCommit (included in the AWS Free Tier) or GitHub. In this tutorial we will use CodeCommit to store our application code, but you can do the same by creating a repository on GitHub.

    a. Open the AWS CodeCommit console
    b. Select Create Repository
    c. Set the Repository name* to "wildrydes-site"
    d. Select Create
    e. Now that the repository is created, set up an IAM user with Git credentials in the IAM console following these instructions.
    f. Back in the CodeCommit console, From the Clone URL drop down, select Clone HTTPS

    Select Clone HTTPS

    g. From a terminal window run git clone and the HTTPS URL of the repository:

    $ git clone https://git-codecommit.us-east1.amazonaws.com/v1/repos/wildrydes-site
    Cloning into 'wildrydes-site'...
    Username for 'https://git-codecommit.us-east-1.amazonaws.com':XXXXXXXXXX
    Password for 'USERID': XXXXXXXXXXXX
    warning: You appear to have cloned an empty repository.

  • Populate the Git repository

    Once you've used either AWS CodeCommit or GitHub.com to create your git repository and clone it locally, you'll need to copy the web site content from an existing publicly accessible S3 bucket associated with this workshop and add the content to your repository.

    a. Change directory into your repository and copy the static files from S3:
    cd wildrydes-site
    /aws s3 cp s3://wildrydes-us-east-1/WebApplication/1_StaticWebHosting/website ./ --recursive

    b. Commit the files to your Git service
    $ git add .
    $ git commit -m 'new'
    $ git push

    Counting objects: 95, done.
    Compressing objects: 100% (94/94), done.
    Writing objects: 100% (95/95), 9.44 MiB | 14.87 MiB/s, done.
    Total 95 (delta 2), reused 0 (delta 0)
    To https://git-codecommit.us-east-1.amazonaws.com/v1/repos/wildrydes-site
    * [new branch] master -> master

  • Enable Web Hosting with the AWS Amplify Console

    Next you'll use the AWS Amplify Console to deploy the website you've just committed to git. The Amplify Console takes care of the work of setting up a place to store your static web application code and provides a number of helpful capabilities to simplify both the lifecycle of that application as well as enable best practices.

    a. Launch the Amplify Console console page
    b. Click Get Started under Deploy with Amplify Console
    c. Select the Repository service provider used today and select Next
    d. If you used GitHub, you'll need to authorize AWS Amplify to your GitHub account
    e. From the dropdown select the Repository and Branch just created

    Add repository branch

    e. On the "Configure build settings" page leave all the defaults and select Next.
    f. On the "Review" page select Save and deploy
    g. The process takes a couple of minutes for Amplify Console to create the necessary resources and to deploy your code.

    Amplify Console

    Once completed, click on the site image to launch your Wild Rydes site.

    Wild Rydes site

    If you click on the link for Master you'll see the build and deployment details related to your branch, and screenshots of the app on various devices:

    Screenshot of app on various devices
  • Modify your site

    The AWS Amplify Console will rebuild and redeploy the app when it detects changes to the connected repository. Make a change to the main page to test out this process.

    a. Open the `index.html` page and modify the title line so that it says: <title>Wild Rydes - Rydes of the Future!</title>

    b. Save the file and commit to your git repository again. Amplify Console will begin to build the site again soon after it notices the update to the repository. It will happen pretty quickly! Head back to the Amplify Console page to watch the process.

    $ git add index.html 
    $ git commit -m "updated title"
    [master dfec2e5] updated title
     1 file changed, 1 insertion(+), 1 deletion(-)
    
    $ git push
    Counting objects: 3, done.
    Compressing objects: 100% (3/3), done.
    Writing objects: 100% (3/3), 315 bytes | 315.00 KiB/s, done.
    Total 3 (delta 2), reused 0 (delta 0)
    remote: processing 
    To https://git-codecommit.us-east-1.amazonaws.com/v1/repos/wildrydes-site
       2e9f540..dfec2e5  master -> master

    c. Once completed, re-open the Wild Rydes site and notice the title change.

    Title change for Wild Rydes site
  • Recap

    In this module, you've created static website which will be the base for our Wild Rydes business. AWS Amplify Console makes it really easy to deploy static websites following a continuous integration and delivery model. It has capabilities for "building" more complicated Javascript framework based applications and has features such as feature branch deployments, easy custom domain setup, instant deployments, and password protection.

Was this module helpful?

Thank you
Please let us know what you liked.
Close
Sorry to disappoint you
Is something out-of-date, confusing or inaccurate? Please help us improve this tutorial by providing feedback.
Close

Manage Users