Module 1: Static Web Hosting with AWS Amplify Console
Each of the following sections provides an implementation overview and detailed, step-by-step instructions. The overview should provide enough context for you to complete the implementation if you're already familiar with the AWS Management Console or you want to explore the services yourself without following a walkthrough.
This workshop step can be deployed in any AWS region that supports the following services:
- AWS Amplify Console
- AWS CodeCommit
You can refer to the AWS region table in the AWS documentation to see which regions have the supported services. Among the supported regions you can choose are:
- North America: N. Virginia, Ohio, Oregon
- Europe: Ireland, London, Frankfurt
- Asia Pacific: Tokyo, Seoul, Singapore, Sydney, Mumbai
Once you've chosen a region, you should deploy all of the resources for this workshop there. Make sure you select your region from the dropdown in the upper right corner of the AWS Console before getting started.
Create the git repository
You have two options for this first step which is to either use AWS CodeCommit or GitHub to host your site's repository. The choice is yours. If you have a GitHub account feel free to use that. Otherwise CodeCommit is included in the AWS Free Tier
The AWS Cloud9 development environment comes with AWS managed temporary credentials that are associated with your IAM user. You use these credentials with the AWS CLI credential helper. Enable the credential helper by running the following two commands in the terminal of your Cloud9 environment.
git config --global credential.helper '!aws codecommit credential-helper $@' git config --global credential.UseHttpPath true
Next you need to create the repository and clone it to your Cloud9 environment:
- Open the AWS CodeCommit console
- Select Create Repository
- Set the Repository name* to "wildrydes-site"
- Select Create
- From the Clone URL drop down, select Clone HTTPS
Now from your Cloud9 development environment:
- From a terminal window run
git cloneand the HTTPS URL of the respository:
ec2-user:~/environment $ git clone https://git-codecommit.us-east-1.amazonaws.com/v1/repos/wildrydes-site Cloning into 'wildrydes-site'... warning: You appear to have cloned an empty repository. ec2-user:~/environment $
Additional Github Step (This step is only required if you're using Github instead of Codecommit)
- Follow the instructions on GitHub to Create a repository. NOTE: You should not create a first commit, just create the repository.
- Clone the repository locally using your GitHub credentials
- If you do not have credentially locally, or want to use Cloud9 for today's lab, follow these steps to Generating a new SSH key and adding it to the ssh-agent
- Clone the repository
Populate the git repository
Once your git repository is created and cloned locally, you'll need to pull in the files for your website and sync them up to the repository.
- Change directory into your repository:
- Copy the files from S3:
aws s3 cp s3://wildrydes-us-east-1/WebApplication/1_StaticWebHosting/website ./ --recursive
- Commit the files to your git service (you might need to enter an email and user name for the commit):
$ git add . $ git config --global user.email "<EMAIL ADDRESS>" $ git config --global user.name "<USER NAME>" $ git commit -m "initial checkin of website code" $ git push Username for 'https://git-codecommit.us-east-1.amazonaws.com': wildrydes-codecommit-at-xxxxxxxxx Password for 'https://firstname.lastname@example.org': 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
Deploy the site with the AWS Amplify Console
Next you'll use the AWS Amplify Console to deploy the website you've just commited 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.
Launch the Amplify Console console page
Click Connect App
Select the Repository service provider used today and select Next
- If you used GitHub, you'll need to authorize AWS Amplify to your GitHub account
From the dropdown select the Repository and Branch created today
On the "Configure build settings" page leave all the defaults and select Next
On the "Review" page select Save and deploy
The process takes a couple of minutes for Amplify Console to create the neccesary resources and to deploy your code.
Once completed, click on the site image to launch your Wild Rydes site.
If you click on the link for Master you'll see various pieces of information about your website deployment, including sample renderings on various platforms:
Modify the website
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.
From your Cloud9 environment open the
index.htmlfile in the root directory of the repository.
Modify the title line:
So that it says:
<title>Wild Rydes - Rydes of the Future!</title>
Save the file
Commit again to your git repository the changes:
$ 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
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 console page to watch the process.
Once completed, re-open the Wild Rydes site and notice the title change.