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.

  1. If you have never configured AWS CLI on your local machine, open a terminal window to install AWS CLI. The installation instructions vary depending on what operating system you're using. If you already have AWS CLI installed and configured, skip to Step 2.
  2. Open the AWS CodeCommit console.
  3. Choose Create Repository.
  4. Enter wildrydes-site for the Repository name.
  5. Choose Create.
  6. Once repository is created, set up an IAM user with Git credentials in the IAM console. Follow the instructions for Step 1 through Step 3 on the Setup for HTTPS users using Git credentials page of the AWS CodeCommit User Guide. 
     Important Note: When setting up your user in the IAM console, you will need to set up and save two sets of credentials to refer back to.
     1. You must create Access keys in the IAM > Security Credentials tab. Download the Access Key and Secret Access Key IDs or copy and save them in a secure location.
     2. You must also generate HTTPS Git credentials for AWS CodeCommit. Download or save these generated credentials as well.
  7. In the terminal window you used to install AWS CLI, enter the command: aws configure
  8. Enter the AWS Access Key ID and Secret Access Key you created in Step 6. 
  9. For Default region name enter the Region you initially selected to create your CodeCommit repository in.
  10. Leave Default output format blank, and press enter. 

  The following code block is an example of what you will see in your terminal window.

  % aws configure
  AWS Access Key ID [****************]: #####################
  AWS Secret Access Key [****************]: ###################
  Default region name [us-east-1]: us-east-1
  Default output format [None]: 

  Code snippet copied

  Copy

      11. Set up the git config credential helper in the terminal window.

  • If you have a Linux, macOS or UNIX machine, see the Step 3: Set up the credential helper instructions for Linux, macOS, or UNIX.
  • If you have a Windows machine see the Step 3: Set up the credential helper instructions for Windows.

  git config --global credential.helper '!aws codecommit credential-helper $@'
  git config --global credential.UseHttpPath true

  Code snippet copied

  Copy

      12. Navigate back to the AWS CodeCommit console and select the wildrydes-site repository.

      13. Select Clone HTTPS from the Clone URL dropdown to copy the HTTPS URL. 

  

      14. From your terminal window run git clone and paste the HTTPS URL of the repository. 

  The following code block is an example of what you will see in your terminal window:
  
  

  $ git clone https://git-codecommit.us-east-1.amazonaws.com/v1/repos/wildrydes-site
  Cloning into ‘wildrydes-site’...
  Username for ‘https://git-codecommit.us-east-1.amazonaws.com/v1/repos/wildrydes-site’: Enter the HTTPS Git credentials for AWS CodeCommit username you generated in Step 6
  Password for ‘https://username@git-codecommit.us-east-1.amazonaws.com/v1/repos/wildrydes-site’: Enter the HTTPS Git credentials for AWS CodeCommit password you generated in Step 6
  warning: You appear to have cloned an empty repository.

  Code snippet copied

  Copy

  There will be a warning that you appear to have cloned an empty repository, this is expected. 

  For common fixes to errors thrown when cloning the repository, see Troubleshooting the credential helper and HTTPS connections to AWS CodeCommit. 

• Populate the git repository

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

  1. Change directory into your repository and copy the static files from S3 using the following commands (make sure you change the Region in the following command to copy the files from the S3 bucket to the Region you selected at the beginning of this tutorial):
     cd wildrydes-site
     aws s3 cp s3://wildrydes-us-east-1/WebApplication/1_StaticWebHosting/website ./ --recursive
  2. Add, commit, and push the git files. 

  The following code block is an example of what you will see in your terminal window:

  $ git add .
  $ git commit -m "new files"
  $ 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

  Code snippet copied

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

  1. Launch the AWS Amplify console. 
  2. Choose Get Started. 
  3. Under the Amplify Hosting Host your web app header, choose Get Started. 
  4. On the Get started with Amplify Hosting page, select AWS CodeCommit and choose Continue.
  5. On the Add repository branch step, select wildrydes-site from the Select a repository dropdown.
  6. If you used GitHub, you'll need to authorize AWS Amplify to your GitHub account.
  7. In the Branch dropdown select master and choose Next. 

  

      8. On the Build settings page, leave all the defaults, select Allow AWS Amplify to automatically deploy all files hosted in your project root directory and choose Next.

      9. On the Review page select Save and deploy.

      10. The process takes a couple of minutes for Amplify Console to create the necessary resources and to deploy your code.
  

  Once completed, select the site image, or the link underneath the thumbnail to launch your Wild Rydes site. If you select the link for master you'll see the build and deployment details related to your branch. 
  

  

  

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

  1. On your local machine, navigate to the the wildrydes-site folder and open the index.html file in a text editor of your choice. 
  2. Modify the title line with the following text: <title>Wild Rydes - Rydes of the Future!</title>
  3. Save the file. 
  4. In your terminal window, add, commit your change, and push the change to the 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 AWS Amplify console to watch the process.

  The following code block is an example of what you will see in your terminal window: 

  $ 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

      5. Once Amplify has completed the re-deployment, re-open the Wild Rydes site and notice the tab title change.

   

  

• Recap

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