A static website on AWS behind CDN

Question

Pulumi · Accepted Answer

To create a static website on AWS behind a CloudFront CDN using Pulumi, we'll perform the following steps:

1. **Create an S3 Bucket**: This will store the static website files.
2. **Configure the S3 Bucket for Static Website Hosting**: Set up the bucket to serve a static website.
3. **Upload the Website Files to the S3 Bucket**: Upload the `index.html` and `error.html` files.
4. **Create a CloudFront Distribution**: This will serve the content from the S3 bucket and cache it at edge locations globally.

Here's a detailed explanation of the resources we'll use:

- **aws.s3.Bucket**: This resource will create an S3 bucket.
- **aws.s3.BucketObject**: This resource will upload the static website files to the S3 bucket.
- **aws.cloudfront.Distribution**: This resource will create a CloudFront distribution to serve the static website.

### Step-by-Step Pulumi Program

1. **Create an S3 Bucket**: We create an S3 bucket to store the static website files.
2. **Configure the S3 Bucket for Static Website Hosting**: We configure the bucket to serve a static website.
3. **Upload the Website Files to the S3 Bucket**: We upload the `index.html` and `error.html` files to the bucket.
4. **Create a CloudFront Distribution**: We create a CloudFront distribution to serve the static website.

Here's the complete Pulumi program in TypeScript:

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

// Create an S3 bucket to store the static website files
const siteBucket = new aws.s3.Bucket("siteBucket", {
    website: {
        indexDocument: "index.html",
        errorDocument: "error.html",
    },
});

// Upload the index.html and error.html files to the S3 bucket
const indexHtml = new aws.s3.BucketObject("index.html", {
    bucket: siteBucket,
    source: new pulumi.asset.FileAsset("index.html"), // Path to your index.html file
    contentType: "text/html",
});

const errorHtml = new aws.s3.BucketObject("error.html", {
    bucket: siteBucket,
    source: new pulumi.asset.FileAsset("error.html"), // Path to your error.html file
    contentType: "text/html",
});

// Create a CloudFront distribution to serve the static website
const cdn = new aws.cloudfront.Distribution("cdn", {
    origins: [{
        domainName: siteBucket.websiteEndpoint,
        originId: siteBucket.arn,
    }],
    enabled: true,
    defaultRootObject: "index.html",
    defaultCacheBehavior: {
        allowedMethods: ["GET", "HEAD"],
        cachedMethods: ["GET", "HEAD"],
        targetOriginId: siteBucket.arn,
        viewerProtocolPolicy: "redirect-to-https",
        forwardedValues: {
            queryString: false,
            cookies: {
                forward: "none",
            },
        },
    },
    priceClass: "PriceClass_100",
    customErrorResponses: [{
        errorCode: 404,
        responseCode: 404,
        responsePagePath: "/error.html",
    }],
    restrictions: {
        geoRestriction: {
            restrictionType: "none",
        },
    },
    viewerCertificate: {
        cloudfrontDefaultCertificate: true,
    },
});

// Export the URLs of the bucket and the CloudFront distribution
export const bucketUrl = siteBucket.websiteEndpoint;
export const cdnUrl = cdn.domainName;
```

### Explanation

1. **S3 Bucket Creation**: We create an S3 bucket named `siteBucket` and configure it for static website hosting by specifying `index.html` as the index document and `error.html` as the error document.
2. **Upload Website Files**: We upload `index.html` and `error.html` to the S3 bucket using the `aws.s3.BucketObject` resource.
3. **CloudFront Distribution**: We create a CloudFront distribution that points to the S3 bucket. The distribution is configured to serve the `index.html` file as the default root object and handle 404 errors by serving the `error.html` page.
4. **Export URLs**: We export the URLs of the S3 bucket and the CloudFront distribution so they can be accessed easily.

This program sets up a static website hosted on an S3 bucket and served through a CloudFront CDN, providing better performance and global reach.