Create a Static Website using Cloudfront and S3
Welcome! The purpose of this page is to create an architecture and deploy a static website to it. We'll walk you through the steps to create a new deployable architecture on AWS using Cloudfront and S3.
Architecture
If this is your first architecture, take a look at the Getting Started Guide. When we're done, we'll have created the following architecture:
Step 1. Drag in a CloudFront Distribution
- Locate the CloudFront Distribution resource in the left sidebar
- Drag it onto the canvas
Step 2. Drag in an S3 Bucket
- Locate the S3 Bucket resource in the left sidebar
- Drag it onto the canvas
Step 3. Connect the CloudFront Distribution to the S3 Bucket
- Hover over the CloudFront Distribution and click and drag the purple arrow to the S3 Bucket icon
Step 4. Configure the S3 Bucket
- Select the S3 Bucket by left-clicking it
- On the right side-bar ensure that the config tab is selected
- Set the IndexDocument config to be the value
index.html - Click Apply Changes in the lower right
Step 5. Export IaC (Pulumi)
- Click the Export IaC button on the top of the screen, this will download a zip file with the name of your architecture containing all the IaC to deploy it.
Step 6. Local Docker, Pulumi, and AWS Setup
- Create an AWS user with admin permissions
- Follow the Pulumi guide to setup Pulumi with AWS using your credentials
- You'll also need to install Docker for building a container and fetching images from DockerHub
Step 7. Deploy to AWS
- Extract the IaC from the zip file
- Navigate to the directory
- Run
npm install - Run
pulumi stack init - Give your stack a name
- Optionally specify a passphrase
- Specify your region
pulumi config set aws:region us-east-1change us-east-1 to whichever region you desire - Run
pulumi up - Review the plan and type
yesto deploy - Grab the cloudfront_distribution and s3_bucket name from the pulumi output
Step 8. Create some static html
Currently we only support absolute paths to content, for example if our side has /other/index.html, we'll need to navigate to that full path instead of using /other/ or /other. This behavior will be improved in the future.
- Create a folder named static somewhere on your computer
- Create a file named index.html in the static folder with the following content:
<html>
<head>
<title>InfraCopilot</title>
</head>
<body>
<h1>InfraCopilot</h1>
<p>InfraCopilot is a tool for building and deploying cloud architectures.</p>
</body>
</html>
- Create a folder inside of static called other
mkdir static/other - Create a file named index.html in the static/other folder with the following content:
<html>
<head>
<title>InfraCopilot | other</title>
</head>
<body>
<h1>This is another page!</h1>
</body>
</html>
Step 9. Upload the static html to the S3 Bucket
- Using the bucket name we saved earlier from the Pulumi output, Run
aws s3 sync static s3://<your-bucket-name>
Step 10. Visit the pages
- Using the cloudfront domain we saved earlier from the Pulumi output, visit
https://<your-cloudfront-domain>/and you should see our initial html page - Navigate to
https://<your-cloudfront-domain>/other/index.htmland you should see our other html page
Step 11. Tear down Infrastructure
- From the same directory
pulumi destroy - Confirm with
yes
Step 12. Share Feedback
We look forward to seeing what amazing things you build. If you get stuck or want us to support a capability, please join our Community Discord, where the whole team hangs out and is happy to help.