Cloud Native Systems & Applied AI Itegration

1. Aim
   To host a static personal portfolio website using Amazon S3 and configure Amazon CloudFront as a content delivery layer for accessing the website through a CloudFront distribution.

2. Requirements
   • AWS account with access to Amazon S3 and Amazon CloudFront.
   • A static website containing an HTML file such as index.html.
   • An S3 bucket to store the website files.
   • A CloudFront distribution configured with the S3 bucket as its origin.

3. Procedure
   Step 1: Create / select the S3 bucket
   Open the Amazon S3 console and select the bucket used for the portfolio website. The website files are stored inside this bucket.
   Step 2: Enable Static Website Hosting
   Open the bucket's Properties tab and locate Static website hosting. Select Enable and choose Host a static website. Enter the exact HTML filename used as the index document. In this configuration, the index document shown in the screen is index(2).html.

Figure 1: S3 Static Website Hosting configuration with the index document.
Step 3: Test the S3 website endpoint
Open the S3 website endpoint in a browser. If public access is still blocked, the browser shows a 403 Access Denied response. This indicates that the website endpoint cannot read the required S3 object with the current permissions.

Figure 2: 403 Forbidden / Access Denied response from the S3 website endpoint.
Step 4: Open bucket Permissions
Return to the S3 bucket and open the Permissions tab. Check the Block public access section. In the initial configuration, Block all public access is enabled, which prevents public website access.

Figure 3: S3 bucket Permissions page showing Block all public access enabled.
Step 5: Edit Block Public Access settings
Click Edit under Block public access. Disable the Block all public access setting and the individual public-access blocking settings when public access is intentionally required for this static website. AWS displays a warning because changing these settings can make objects publicly accessible.

Figure 4: Edit Block Public Access settings.
Step 6: Confirm the security change
Enter confirm in the confirmation field and select Confirm. This is an intentional security change required for a simple public S3 static website configuration.

Figure 5: Confirmation dialog for changing Block Public Access settings.
Step 7: Verify the updated permissions
After saving, verify that the S3 bucket reports Block all public access as Off. The success message confirms that the setting was updated.

Figure 6: Successful update showing Block all public access as Off.
Step 8: Configure CloudFront
Open Amazon CloudFront and select the distribution created for the portfolio website. The distribution uses the S3 bucket as its origin. The Origins tab can be used to verify that the S3 origin is associated with the distribution.

Figure 7: CloudFront distribution Origins tab showing the S3 origin.
Step 9: Verify CloudFront distribution settings
Open the General tab of the CloudFront distribution. Verify the distribution domain name and the Default root object. In the shown configuration, the default root object is index.html. CloudFront may show Deploying while configuration changes are propagating.

Figure 8: CloudFront General settings and distribution domain name.
Step 10: Test the CloudFront URL
Open the CloudFront distribution domain name in a browser. If the origin permissions or CloudFront origin access configuration are not aligned, CloudFront can return Access Denied. The shown XML response confirms that the request reached the S3 origin but access was denied.

Figure 9: CloudFront URL returning an Access Denied XML response.

1. Troubleshooting Problem Possible cause / action 403 Access Denied from S3 website endpoint Check Block Public Access, bucket policy, object permissions, and confirm that the index document name exactly matches the uploaded file. CloudFront shows Access Denied Check the CloudFront origin configuration and the S3 permissions used by the distribution. If using Origin Access Control (OAC), configure the bucket policy to allow the CloudFront distribution to read the objects. Website does not open at the root URL Verify the Default root object in CloudFront and the index document name in S3. Changes are not visible immediately CloudFront configuration changes can take time to deploy. Wait until the distribution status is deployed and test again.
2. Result The static portfolio website was configured in Amazon S3 and a CloudFront distribution was created with the S3 bucket as its origin. The screenshots document the S3 website-hosting setup, public-access configuration, CloudFront origin configuration, and the Access Denied condition encountered during testing.
3. Important Note For a production website, simply disabling S3 Block Public Access is not the preferred architecture. A safer setup is to keep the S3 bucket private and use CloudFront Origin Access Control (OAC), with a bucket policy that permits the CloudFront distribution to read the required objects. For a lab demonstration of S3 static website hosting, public access may be used only when required and should be restricted to the intended bucket and objects.
4. Inference Amazon S3 can store and serve static website files, while Amazon CloudFront can distribute those files through a global content delivery network. Correct alignment between the S3 permissions, index document, CloudFront origin, and access-control configuration is necessary to avoid 403 or Access Denied errors.