Automate aws Infra using CloudFormation - A Static Webpage

Automate aws Infra using CloudFormation – A Static Webpage

by

Automate aws Infra using CloudFormation: Deploying AWS infrastructure manually can be time-consuming and error-prone. AWS CloudFormation allows you to automate deployments using Infrastructure as Code (IaC). In this guide, you’ll learn how to:

✅ Deploy a static website on S3 using CloudFormation
✅ Set up Amazon Connect resources (optional)
✅ Automate infrastructure provisioning for consistency

For a detailed walkthrough, check out my YouTube.

Step 1: Understand the CloudFormation Template

CloudFormation uses YAML or JSON templates to define AWS resources. Below is a sample template that:

  • Creates an S3 bucket for static website hosting
  • Configures public access policies
  • Deploys a sample HTML webpage

Sample CloudFormation Template (website-template.yml)

AWSTemplateFormatVersion: '2010-09-09'
Description: 'Deploys a static website on S3 for Amazon Connect integration'

Resources:
  # S3 Bucket for Static Website Hosting
  StaticWebsiteBucket:
    Type: 'AWS::S3::Bucket'
    Properties:
      BucketName: !Sub 'my-static-website-${AWS::AccountId}'
      AccessControl: 'PublicRead'
      WebsiteConfiguration:
        IndexDocument: 'index.html'
        ErrorDocument: 'error.html'
      
  # Bucket Policy to Allow Public Access
  BucketPolicy:
    Type: 'AWS::S3::BucketPolicy'
    Properties:
      Bucket: !Ref StaticWebsiteBucket
      PolicyDocument:
        Version: '2012-10-17'
        Statement:
          - Effect: 'Allow'
            Principal: '*'
            Action: 's3:GetObject'
            Resource: !Sub 'arn:aws:s3:::${StaticWebsiteBucket}/*'

  # Sample HTML File (Optional - can be uploaded separately)
  SampleIndexPage:
    Type: 'AWS::S3::Bucket'
    Properties:
      BucketName: !Ref StaticWebsiteBucket
      Content: |
        <!DOCTYPE html>
        <html>
        <head>
            <title>Amazon Connect Demo</title>
        </head>
        <body>
            <h1>Welcome to Amazon Connect!</h1>
            <!-- Amazon Connect Chat Widget Code Here -->
        </body>
        </html>
      Key: 'index.html'
      ContentType: 'text/html'

Outputs:
  WebsiteURL:
    Description: 'URL of the static website'
    Value: !GetAtt StaticWebsiteBucket.WebsiteURL

 

Step 2: Deploy the CloudFormation Stack

2.1. Upload the Template to AWS

  1. Go to the AWS CloudFormation Console.
  2. Click “Create stack” → “With new resources (standard)”.
  3. Choose “Upload a template file” and select your website-template.yml.
  4. Click Next.

2.2. Specify Stack Details

  • Stack name: StaticWebsiteStack
  • (Optional) Modify parameters if needed.
  • Click Next.

2.3. Configure Stack Options (Optional)

  • Add tags (e.g., Project: AmazonConnect).
  • Click Next.

2.4. Review & Deploy

  • Verify settings.
  • Check the “I acknowledge that AWS CloudFormation might create IAM resources” box.
  • Click “Create stack.”

2.5. Monitor Deployment

  • The stack will take 1-3 minutes to deploy.
  • Once complete, check the “Outputs” tab for the Website URL.

 

Step 3: Integrate Amazon Connect (Optional)

To add an Amazon Connect chat widget to your static website:

  1. Get the Chat Widget Code from Amazon Connect (Channels → Chat).
  2. Edit the index.html in your S3 bucket and paste the widget script.
  3. Test the chat by visiting your CloudFormation-generated website URL.

 

Step 4: Automate Updates (Optional)

To update your infrastructure later:

  1. Modify the CloudFormation template (e.g., add a CloudFront CDN).
  2. Update the stack via the CloudFormation console.

 

Final Thoughts & Video

✔ Automate AWS infrastructure with CloudFormation.
✔ Deploy a static website quickly for Amazon Connect.
✔ Ensure consistency across environments.

For a full demo, check out my YouTube.

Video: Automate aws Infra using CloudFormation

Need help? Drop your questions in the comments! 🚀

Checkout – Amazon Connect