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 AWS Regional Services List 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.
  

  

• 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 dropdown, 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 website 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. Go to New App on the top right and choose Host Web App
  d. Select CodeCommit under Get started with Amplify Hosting
  e. Select the Repository service provider used today and select Continue
  f. If you used GitHub, you'll need to authorize AWS Amplify to your GitHub account
  g. From the dropdown, select the Repository and Branch you just created and select Next
  

  

  h. On the Configure build settings page, leave all the defaults, Select Allow AWS Amplify to automatically deploy all files hosted in your project root directory and select Next.
  i. On the "Review" page select Save and deploy
  j. The process takes a couple of minutes for Amplify Console to create the necessary 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 the build and deployment details related to your branch, and screenshots of the 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. From your local machine, open `wildryde-site/index.html` in a text editor of your choice 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

  Code snippet copied

  Copy

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

  

• 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.