Step-by-Step Complete Walkthrough

1. Prerequisites

Before you start, make sure you have the following ready:

1. AWS Account: Ensure you have access to AWS services, including S3, CloudFront, and IAM.
2. GitHub Repository: Your web app codebase should be in a GitHub repository.
3. AWS CLI Installed (Optional): You can install it locally for manual testing.

2. Setting Up AWS S3 Bucket for Static Web Hosting

1. Create an S3 Bucket:

   • Go to the AWS Management Console and navigate to S3.
   • Click "Create bucket".
   • Enter a unique Bucket name (e.g., my-website-bucket).
   • Select the AWS Region where you want your bucket to reside.
   • Uncheck "Block all public access" (this is required for public access to your frontend files).
   • Click "Create bucket".

2. Configure Bucket Policy:

   • Navigate to your newly created bucket, click on the "Permissions" tab, and then "Bucket Policy".
   • Add the following policy to allow public read access to objects in the bucket (ensure you replace YOUR_BUCKET_NAME):

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

   • Click "Save changes".

3. Enable Static Website Hosting:

   • Go to the "Properties" tab.
   • Scroll down and click "Static website hosting".
   • Select "Use this bucket to host a website".
   • Specify the index document (e.g., index.html) and error document (optional). (set index.html if using SPA)
   • Save the configuration.

3. Setting Up CloudFront for Content Delivery

1. Create a CloudFront Distribution:
   • Go to CloudFront in the AWS Management Console.
   • Click "Create Distribution".
   • Choose "Web".
   • In the Origin Domain Name, enter your S3 bucket’s URL.
   • Set Viewer Protocol Policy to "Redirect HTTP to HTTPS" (recommended for security).
   • Configure other settings as needed.
   • Click "Create Distribution".
   • Note down the Distribution ID (you’ll need this for cache invalidation).

4. Configuring AWS IAM User for CI/CD Access

1. Create an IAM User:
   • Go to IAM in the AWS Management Console.
   • Click "Users" and then "Add User".
   • Enter a User name (e.g., ci-cd-user).
   • Select "Programmatic access".
   • Click "Next: Permissions".
2. Attach Policies:
   • Click "Attach existing policies directly".
   • Search for and attach the following managed policies:
     • AmazonS3FullAccess (or create a custom policy with restricted permissions).
     • CloudFrontFullAccess (or create a custom policy for limited CloudFront permissions).
3. Save the Access Keys:
   • Copy the Access Key ID and Secret Access Key. You’ll use these as GitHub Secrets.