Fast Static Website Deployment

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

What I Built

A static website hosted from cloudfront with contents stored in a s3 bucket all provisioned via Pulumi iac tooling/platform.

Live Demo Link

https://victorymemorialpark.codersarc.com

Project Repo

iac + static-site repo

My Journey

This was my first time using Pulumi to do anything so it was quite a learning experience.

I first created a simple static website using Astro
Astro is one of the tools or options when it comes to create any jamstack based static-site.
Wont go into details as that probably deserves its own tutorial.
Validated everything was ok visually by running npm locally.

npm run dev

Now its time to setup infra in our choice of cloud provider.(AWS for this task)

Very early blocker

This seemed like an old bug that i could only find after running pulumi with the verbose flag.

Somehow pulumi tries to do credentials validation and that fails, so I had to set this environment variable.

pulumi config set aws:skipCredentialsValidation true

Back on track after that hurdle.

I went through the steps outlined here Get started with Pulumi & AWS to setup user, token and environment correctly.
Luckily pulumi has nice starter templates and cli short-cuts.
I used this one to create my starter deployment code.

pulumi new static-website-aws-go

And immediately ran into a problem.

Oops

pulumi new static-website-aws-go --dir=vic-mem-page
error: /Users/mithuns/github/pulumi-devto-challenges/vic-mem-page is not empty; rerun in an empty directory, pass the path to an empty directory to --dir, or use --force

Ok, so we cant use the directory that we already have for static-site contents.

Time to make a decision, I think I prefer the idea to keep my iac code separate from my actual deployable.
So, I ended up creating a separate folder within my site contents folder, and just providing a customized path to pulumi, letting it know where to pick my html files from.

> cd vic-mem-page
> mkdir deploy-iac
> pulumi new static-website-aws-go --dir=deploy-iac
This command will walk you through creating a new Pulumi project.

Enter a value or leave blank to accept the (default), and press <ENTER>.
Press ^C at any time to quit.

Project name (deploy-iac):
Project description (A Go program to deploy a static website on AWS):
Created project 'deploy-iac'

Please enter your desired stack name.
To create a stack in an organization, use the format <org-name>/<stack-name> (e.g. `acmecorp/dev`).
Stack name (dev): test
Created stack 'test'

The AWS region to deploy into (aws:region) (us-west-2):
The file to use for error pages (errorDocument) (error.html):
The file to use for top-level pages (indexDocument) (index.html):
The path to the folder containing the website (path) (./www): ../../dist
Saved config

Installing dependencies...

Finished installing dependencies

Your new project is ready to go! ✨

To perform an initial deployment, run 'cd vic-mem-page-deploy', then, run `pulumi up`

Looks like we are on the right track. Now, lets try creating this stack using pulumi cli.

> pulumi up
Previewing update (test)

View in Browser (Ctrl+O): https://app.pulumi.com/mithuns/deploy-iac/test/previews/210da6e2-75a0-4cc5-9925-3a94f5b8bcc5

 Type                                    Name                 Plan
 +   pulumi:pulumi:Stack                     deploy-iac-test      create
 +   ├─ aws:s3:BucketV2                      bucket               create
 +   ├─ aws:s3:BucketOwnershipControls       ownership-controls   create
 +   ├─ aws:s3:BucketWebsiteConfigurationV2  bucket               create
 +   ├─ aws:s3:BucketPublicAccessBlock       public-access-block  create
 +   ├─ aws:cloudfront:Distribution          cdn                  create
 +   └─ synced-folder:index:S3BucketFolder   bucket-folder        create

Outputs:
    cdnHostname   : output<string>
    cdnURL        : output<string>
    originHostname: output<string>
    originURL     : output<string>

Resources:
    + 7 to create

Do you want to perform this update? yes
Updating (test)

View in Browser (Ctrl+O): https://app.pulumi.com/mithuns/deploy-iac/test/updates/1

     Type                                    Name                 Status
     +   pulumi:pulumi:Stack                     deploy-iac-test      created (364s)
     +   ├─ aws:s3:BucketV2                      bucket               created (2s)
     +   ├─ aws:s3:BucketPublicAccessBlock       public-access-block  created (0.52s)
     +   ├─ aws:s3:BucketOwnershipControls       ownership-controls   created (1s)
     +   ├─ aws:s3:BucketWebsiteConfigurationV2  bucket               created (1s)
     +   ├─ aws:cloudfront:Distribution          cdn                  created (357s)
     +   └─ synced-folder:index:S3BucketFolder   bucket-folder        created (0.89s)

Outputs:
    cdnHostname   : "REDACTED.cloudfront.net"
    cdnURL        : "https://REDACTED.cloudfront.net"
    originHostname: "REDACTED-us-west-2.amazonaws.com"
    originURL     : "http://REDACTED-us-west-2.amazonaws.com"

Resources:
    + 7 created

Duration: 6m7s

And thats it , our victory memorial park website is live at https://victorymemorialpark.codersarc.com/
Go check it out!!!

Note: Alright, I am skipping the steps to setup the whole dns part here, but if you want to know just reach out or leave a comment in the github repo, and I can try to update or post a blog separately.

Using Pulumi

I used pulumi to setup infra pieces.

Worked out great.

Except for a few gotchas.

1. Bucket has public access block created but not enabled or turned ON. (which is ok as per the recommended settings for s3 backed static websites but then the example here also creates cloudfront, with cloudfront you need Origin Access Control settings which are missing.)
2. Bucket policies are missing, again with cloudfront , i think we are mixing two approaches and then somehow giving an incomplete solution.
3. Cloudfront Distribution needs a public certificate through ACM.
4. A vanity url like what I am using, requires a CNAME to be specified and the cert should support that domain name.

This is where I used Pulumi Copilot, since I am new to the pulumi go sdk, I used Copilot to update code for the above 3 requirements.

Prompts I used:-

(though not all gaps were just auto-magically fixed by code generated by the LLM, I had to tweak the code or test changes by just clicking in the console a few times, also go through the aws documentation, links at the bottom.)

1. In the go code generated by static-website-aws-go template, the public access block for s3 bucket is created but not enabled, can you update it such that all public access block is disabled, with a custom access policy setup that only allows our cloudfront distribution to be able to read the contents of the bucket, just print code patch, and not the entire listing.
2. We seem to be missing setting up OriginAccessControl policies for cloudfront, can you show me how to add that, just print me the code patch, no need to print the entire listing.
3. Update our code so that we are creating a new public certificate via ACM, with two domain names (codersarc.com and victorymemorialpark.codersarc.com).
4. Cloudfront distribution needs a domain and a sub-domain name, we are setting up this website at a sub-domain (victorymemorialpark) with an existing domain (codersarc.com), can you please update code listing so cloudfront distribution is setup correctly.

Helpful AWS links

1. https://docs.aws.amazon.com/AmazonS3/latest/userguide/website-hosting-custom-domain-walkthrough.html
2. https://docs.aws.amazon.com/AmazonCloudFront/latest/DeveloperGuide/getting-started-secure-static-website-cloudformation-template.html