Hosting a Static Website with AWS: My Learning Journey

Solution:

I discovered I needed both the correct bucket policy and the right ACL settings. Here's the bucket policy that finally worked:

{
  "Version": "2012-10-17",
  "Statement": [
    {
      "Effect": "Allow",
      "Principal": "*",
      "Action": "s3:GetObject",
      "Resource": "arn:aws:s3:::my-bucket-name/*"
    }
  ]
}

Additionally, I needed to disable "Block all public access" settings on the bucket.

Solution:

I needed to add specific DNS records to GoDaddy to validate my domain ownership. After creating the CNAME records AWS provided and waiting about 30 minutes, the certificate was validated. I also found that you must request certificates in the US East (N. Virginia) region for them to work with CloudFront, regardless of where your S3 bucket is located.

Solution:

I needed to create both an A record and a CNAME record. The A record needed to be an "Alias" pointing to my CloudFront distribution, and the CNAME was needed for the "www" subdomain. Also, DNS changes took about 48 hours to fully propagate, much longer than I expected.

Solution:

I implemented a responsive navbar that collapses into a hamburger menu on smaller screens, ensuring smooth navigation regardless of device. This required restructuring my CSS with media queries and updating JavaScript event handlers to detect both click and touch interactions.

Solution:

I configured AWS Certificate Manager (ACM) to create and validate an SSL certificate for my domain. Then I created CloudFormation templates to properly set up the infrastructure connecting S3, CloudFront, and ACM. This ensured consistent deployment and proper DNS resolution.

Solution:

I set up a GitHub Actions workflow to automatically deploy code to my S3 bucket whenever I pushed changes to the master branch. However, this introduced a new challenge...

name: Deploy to S3

on:
    push:
    branches:
        - master  # Set the branch to deploy from

jobs:
    deploy:
    runs-on: ubuntu-latest
    steps:
        - uses: actions/checkout@v2
        
        - name: Configure AWS credentials
        uses: aws-actions/configure-aws-credentials@v1
        with:
            aws-access-key-id: ${{ secrets.AWS_ACCESS_KEY_ID }}
            aws-secret-access-key: ${{ secrets.AWS_SECRET_ACCESS_KEY }}
            aws-region: us-east-1  
        
        - name: Deploy to S3
        run: |
            aws s3 sync ./ s3://my-bucket-name/ --delete --exclude ".git/*" --exclude ".github/*"
            
        - name: Invalidate CloudFront
        run: |
            aws cloudfront create-invalidation --distribution-id ${{ secrets.CLOUDFRONT_DISTRIBUTION_ID }} --paths "/*"}

Solution:

The issue was in my S3 bucket policy. When GitHub Actions uploaded files, it wasn't preserving the necessary settings. I modified my bucket policy to properly allow CloudFront access via Origin Access Control (OAC) and updated my GitHub workflow to maintain the correct content types for different file extensions. This ensured CloudFront could properly serve my static content while keeping the S3 bucket itself secure and private.

Solution:

I implemented a serverless architecture using AWS Lambda and API Gateway. When a visitor submits the form, JavaScript sends the data to an API Gateway endpoint, which triggers a Lambda function. The Lambda function processes the submission and forwards it to my email using Amazon SES (Simple Email Service).

Solution:

I updated the API Gateway configuration to properly handle OPTIONS preflight requests and return the correct CORS headers. I also modified my Lambda function to include appropriate CORS headers in both success and error responses. This ensured browsers would allow the cross-origin requests from my website to my API.