Static Web Hosting

In this module, you will configure AWS Amplify to host the static resources for your web application with continuous deployment built in.

Select a Region

For this lab, I have selected the region ap-south-1 (Mumbai).

Create a git repository

In this section, we will configure AWS CodeCommit to store our source code.

The AWS CLI needs to be installed on your local machine. Follow these steps to install the CLI.

Follow all the steps mentioned in the Create a git repository section.

At the end of this step, you should have:

A repository named wildrydes-site created in CodeCommit
An IAM user with the AWSCodeCommitPowerUser policy attached.
Access key and Git credentials for HTTPS created and stored in a secure location on your laptop
AWS CLI configured to use the new user by using aws configure
Git config credential helper configured to work with AWS CodeCommit
The wildrydes-site cloned to a directory on your local laptop

For MacOS, it is important to execute the special steps mentioned in Step3 here

Example

adityasamant@Adityas-MacBook-Pro wildrydes-site % git remote -v
origin  https://git-codecommit.ap-south-1.amazonaws.com/v1/repos/wildrydes-site (fetch)
origin  https://git-codecommit.ap-south-1.amazonaws.com/v1/repos/wildrydes-site (push)

Populate the Git repository

Add the AmazonS3ReadOnlyAccess policy to the IAM user configured to use the CLI.

Change directory into your repository

cd wildrydes-site

Copy the source code from a public S3 bucket

aws s3 cp s3://wildrydes-ap-south-1/WebApplication/1_StaticWebHosting/website ./ --recursive

Add, Commit and Push

git add .
git commit -m "new files"
git push

View the repository in the CodeCommit UI. It should show the files that were pushed in the previous step.

Enable web hosting with AWS Amplify

Open the AWS Amplify Console.

Click on Host your web app.

On the Get started with Amplify Hosting page, select AWS CodeCommit.

Select the repository as wildrydes-site and branch as master.

On the Build Settings page, keep all the defaults and select the following checkbox and click Next

Allow AWS Amplify to automatically deploy all files hosted in your project root directory

Click Save and deploy

This will start the deployment. Wait till you see all the steps completed.

Click on the link to the site and verify that the site opens in a browser.

Modify the site

In the index.html, edit the title line

<title>Wild Rydes - Rydes of the Future!</title>

Add, Commit and Push the change

git add index.html
git commit -m "changed the title"
git push

This will trigger a new deployment automatically.

Conclusion

This section demonstrated the use of AWS Amplify to deploy static websites following a continuous integration and delivery model.

Manage Users

Quick Navigation

HOST A STATIC WEBSITE

MANAGE USERS

BUILD A SERVERLESS BACKEND

DEPLOY A RESTFUL API