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
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.
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.
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
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:
/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)
* [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
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.
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. 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.