Deploying a static website via AWS S3

Next, let's deploy the frontend web user interface to AWS S3.

One of the buckets we created in the previous chapter was for the purpose of website hosting. Let's configure it via the AWS Management Console for static website hosting:

1. Navigate to the Amazon S3 service in the management console and click on your bucket.
2. In the Properties tab, as shown in the following screenshot, click on the Static website hosting card:

1. When you click on the Static website hosting card, a configuration card will pop up.
2. Select Use this bucket to host a website and enter index.html and error.html for the Index document and Error document fields, respectively.

1. Copy the Endpoint URL on your configuration page and then click Save. This endpoint URL will be the public address of your static website:

1. Next, we can upload the index.html and scripts.js files to this S3 bucket. Before we do that, we need to make a change in scripts.js. Remember, the website will be running in the cloud now, and won't have access to our local HTTP server.

1. Replace the local server URL in the scripts.js file with the one from our backend deployment, as follows:

"use strict";

const serverUrl = "https://<UID>.execute-api.us-east-1.amazonaws.com/api";
...

1. Finally, set the permissions of the index.html and scripts.js files to publicly readable. To do that, we need to modify the S3 bucket permissions under the Permissions tab.
2. Click on the Public access settings button, uncheck all four checkboxes, and then type confirm to confirm these changes. This will allow the contents of this S3 bucket to be made publicly accessible, as follows:

1. Now, we are able to make the files public by selecting both files, clicking on Actions, and clicking on Make public, as shown in the following screenshot:

Open the S3 endpoint URL in your browser. The URL should look something like http://<BUCKET>.s3-website-us-east-1.amazonaws.com/.

Your ObjectDetector website is now running in your browser and it's communicating with the backend running on AWS to demo your intelligent-enabled application's capability. Both the frontend and the backend are serverless and both are running on the AWS cloud infrastructure, which scales automatically with demand.

Congratulations! You've just developed an end-to-end AI application to AWS! You can now share this AI application with anyone in the world with a browser.