Using aws ecr with cloudfront

Question

Pulumi · Accepted Answer

When using AWS Elastic Container Registry (ECR) with CloudFront, you typically host a Docker container image in ECR and want to use CloudFront as your content delivery network (CDN) to distribute your application or website. However, CloudFront is not used directly with ECR because they serve different purposes: CloudFront is for serving static content globally with low latency, while ECR is a Docker container registry for storing, managing, and deploying Docker container images.

A common scenario where CloudFront and ECR might be used together is when you have a static website or web application deployed in an AWS S3 bucket or served through AWS Elastic Beanstalk or ECS, which pulls container images from ECR. CloudFront can cache and serve the content from these services, but not directly from ECR.

Here's a Pulumi program, written in TypeScript, that illustrates the following:

1. Create an ECR repository to store your Docker images.
2. Deploy a static website to an S3 bucket.
3. Set up a CloudFront distribution to serve the content of the S3 bucket.

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

// Create an AWS ECR repository to store Docker images.
const repository = new aws.ecr.Repository("myRepository", {
    // optional: set image scanning configuration as true.
    imageScanningConfiguration: {
        scanOnPush: true,
    },
});

// This would output the repository URL needed to push Docker images.
export const repositoryUrl = repository.repositoryUrl;

// Create an S3 Bucket for hosting static content - could be the output of your docker image's web build.
const bucket = new aws.s3.Bucket("myBucket", {
    // S3 bucket policies can be used to manage access to the bucket contents.
    // Be careful with the policies to avoid making the content publicly readable if not needed.
    website: {
        indexDocument: "index.html",
    },
});

// Create a CloudFront distribution that points to the S3 bucket for content delivery.
const distribution = new aws.cloudfront.Distribution("myDistribution", {
    enabled: true,
    origins: [{
        originId: bucket.arn,
        domainName: bucket.websiteEndpoint,
        customOriginConfig: {
            // CloudFront connects to your S3 bucket over HTTP.
            originProtocolPolicy: "http-only",
        },
    }],
    defaultCacheBehavior: {
        // The target origin ID is the S3 bucket's ARN.
        targetOriginId: bucket.arn,

// CloudFront will follow the viewer request protocol for forwarding requests to S3.
        viewerProtocolPolicy: "redirect-to-https",
        allowedMethods: [
            "GET",
            "HEAD",
            "OPTIONS",
        ],
        // CloudFront cache settings (customize as needed).
        cachedMethods: [
            "GET",
            "HEAD",
        ],
        // Specify the minimum TTL, default TTL, and maximum TTL for cached objects.
        minTtl: 0,
        defaultTtl: 3600,
        maxTtl: 86400,
    },
    // This flag includes the headers in the cache key.
    isIpv6Enabled: true,
    // Assign any additional settings like price class, restrictions, web ACL etc. based on requirements.
});

// Output the CloudFront distribution domain name to access the static website.
export const distributionDomain = distribution.domainName;

// When running `pulumi up`, Pulumi will give you the exported variables' values.
// You can use `pulumi stack output repositoryUrl` to get the ECR repository URL to which you can push Docker images.
// Use `pulumi stack output distributionDomain` to get the CloudFront distribution domain to access your static site.
```

In this program:

- We create an AWS ECR repository to store Docker images that your application might require.
- We create an S3 bucket designed to host static content. In this scenario, the build output of your Docker image's static files might be uploaded here.
- We then define a CloudFront distribution to cache and serve the content hosted on the S3 bucket globally. We set up a default cache behavior that dictates how content will be cached and served to users.

Remember, this is a simple example of how you might begin structuring an application using both ECR and CloudFront. Depending on your actual use case, you might not need ECR at all if you're strictly serving static content. However, if you're using a Docker-based application that generates static assets as part of its build, you could push those assets to S3 from a CI/CD pipeline (after pulling the image from ECR), and then serve them via CloudFront.