Pulumi Deploy and Document Challenge: Fast Static Website Deployment

Shubham Kokane — Sun, 30 Mar 2025 15:05:38 +0000

This is a submission for the Pulumi Deploy and Document Challenge: Fast Static Website Deployment

Overview

What I Built

I built a blazing-fast, static website hosted on AWS using S3 and CloudFront, all managed with Pulumi’s Infrastructure as Code (IaC). This project automates everything—from setting up the S3 bucket to configuring CloudFront for global availability. The site is built with simple HTML, CSS, and JavaScript but is deployed in a highly scalable and automated way.

Live Demo: View the Live Site
Project Repo: GitHub Repository (Check out the detailed README in the repository for more insights.)

My Journey

Getting Started

When I got the challenge announcement, I was new to Pulumi. Instead of diving in blindly, I spent some time watching tutorials and reading the docs to get comfortable with Pulumi’s setup, configuration, and deployment process. Eventually, I decided to work on the Fast Static Website Deployment prompt.

Local Setup

I set up my local machine and created a GitHub repository to track my work. I structured everything properly before starting to avoid chaos later.

Folder Structure:

Configuring AWS Credentials & IAM User

Before diving into Pulumi, understand that Pulumi interacts with AWS services to provision resources, so it needs valid IAM credentials. The IAM user ensures secure and restricted access to AWS, allowing Pulumi to create and manage the infrastructure without using root account credentials.

IAM Setup

I created the IAM user, generated the Access Key and Secret Key, and configured them on my local machine. (Initially, I faced issues with the keys, so I deleted the problematic credentials and created new ones.)

Command to configure credentials (if using AWS CLI):

aws configure

Setting Up Pulumi

I then set up my Pulumi project in VS Code. Once AWS was ready, I initialized my Pulumi project in TypeScript:

mkdir Pulumi
cd Pulumi
pulumi new aws-typescript

This generated configuration files like Pulumi.yaml and index.ts. I moved all Pulumi-related files into a dedicated pulumi folder in my project.

Automating S3 Bucket Creation

Instead of manually setting up S3, I let Pulumi handle it. Inside index.ts, I wrote the code to create an S3 bucket configured for static website hosting:

import * as pulumi from "@pulumi/pulumi";
import * as aws from "@pulumi/aws";

const bucket = new aws.s3.BucketV2("my-bucket", {
    acl: "public-read",
    websites: [{
        indexDocument: "index.html",
        errorDocument: "404.html",
    }],
});

To deploy:

pulumi preview
pulumi up

Boom! My S3 bucket was live. But there was an issue—public access was restricted.

Fixing Public Access

I set the bucket policy manually:

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

After applying this, my website was publicly accessible.

Enabling HTTPS with CloudFront

To secure the website and improve performance globally, I integrated CloudFront:

const originId = "S3-my-bucket";
const distribution = new aws.cloudfront.Distribution("cdn", {
    enabled: true,
    origins: [{
        domainName: bucket.websiteEndpoint,
        originId: originId,
        customOriginConfig: {
            httpPort: 80,
            httpsPort: 443,
            originProtocolPolicy: "http-only",
            originSslProtocols: ["TLSv1.2"],
        },
    }],
    defaultCacheBehavior: {
        targetOriginId: originId,
        viewerProtocolPolicy: "redirect-to-https",
        allowedMethods: ["GET", "HEAD"],
        cachedMethods: ["GET", "HEAD"],
        forwardedValues: {
            queryString: false,
            cookies: { forward: "none" },
        },
    },
    defaultRootObject: "index.html",
    priceClass: "PriceClass_100",
    viewerCertificate: {
        cloudfrontDefaultCertificate: true,
    },
});

Deploy updates with:

pulumi up

Now, my site was accessible worldwide via CloudFront!

Challenges Faced

IAM Credentials Configuration :
Initially, I had trouble configuring the access key and secret key. I resolved this by deleting the problematic keys and creating new ones.
Uploading Files to S3 :
I experienced difficulties pushing local files to the bucket. In the end, I used the AWS CLI to move the files, ensuring a successful deployment.
Deprecated Warnings :
I received a warning regarding the S3 website configuration being deprecated:
For this basic project, I chose to ignore this warning as it did not affect functionality.

warning: urn:pulumi:... website is deprecated. Use the aws_s3_bucket_website_configuration resource instead.

Manual Bucket Policy : The S3 bucket did not serve content until I manually set the public-read policy.

Testing & Final Adjustments

Device Testing

Verified responsiveness on laptops, smartphones, and tablets.

Laptop Preview Video (click to watch)

Mobile Preview (click to watch)

Performance Testing

Ensured CloudFront caching was effective and HTTPS was enforced.

Security Review

Confirmed public access policies were set correctly.

Lessons Learned & Future Improvements

Lessons Learned

Automation saves time: Using Pulumi eliminated manual errors.
Detail matter: Case-sensitive file names like index.html matter.
Iterative Testing: Testing across devices ensured early issue detection.

Next Steps

Integrate CI/CD Pipeline for smoother future deployments.
Enhance Security by refining S3 and CloudFront configurations.
Optimize Performance by customizing caching policies.

For a full view of the code, refer to the index.ts file in the GitHub repository.

Final Thoughts

This project was an awesome learning experience. Pulumi’s IaC approach made everything feel structured and automated, while hands-on debugging improved my AWS skills. Excited to keep building and iterating!... I welcome feedback and suggestions for improvements.

Links & References

Live Site: https://d31g1hox7ufl5t.cloudfront.net/
GitHub Repository: https://github.com/S2hubham/Pulumi-Proj
Pulumi Documentation: https://www.pulumi.com/docs/
AWS Documentation:
- CloudFront Developer Guide
- Amazon S3 User Guide

Forem: Shubham Kokane