How to set up remix with aws cdk

Question

I’m learning remix and trying to set up a remix project that uses aws cdk to do the server. I have found a GitHub example here: https://github.com/ajhaining/remix-cloudfront-cdk-example But it doesn’t really explain how or what’s going on / how to do this from scratch. If anyone could help explain how to set this up it would be a great help!

Answer 1

In the solution you referenced this person is using AWS CDK to deploy a front-end and back-end solution that uses the Remix framework.

In case you are unfamiliar with CDK: AWS CDK allows you to write code describing your AWS infrastructure for deployment to AWS i.e infrastructure as code.

They are using the following AWS infrastructure:

• An AWS S3 bucket for storing static files (front end bundles including assets like css etched )
• AWS Lambda using Cloudfront Lambda@Edge (the backend used to do server side rendering)
• AWS Cloudfront as a CDN. This routes the traffic to the correct "origin" (for front end assets or server side rendering)

The whole "stack" is described in cdk-remix-app-stack.ts.

Here they describe where the source of the AWS Lambda function to do server side rendering:

const edgeFn = new NodejsFunction(this, "EdgeFn", {
      currentVersionOptions: {
        removalPolicy: RemovalPolicy.DESTROY,
      },
      entry: "server/index.ts",
      logRetention: RetentionDays.THREE_DAYS,
      memorySize: 1024,
      timeout: Duration.seconds(10),
    });

Here they describe where the source for the front-end assets is to be stored in s3:

new BucketDeployment(this, "AssetsDeployment", {
      destinationBucket: assetsBucket,
      distribution,
      prune: true,
      sources: [Source.asset("public")],
      cacheControl: [
        CacheControl.maxAge(Duration.days(365)),
        CacheControl.sMaxAge(Duration.days(365)),
      ],
    });

This bit is a bit more complicated, here they configure the CDN to point the distribution to the specific origins (s3 for front-end or lambda for back-end rendering)

const distribution = new Distribution(this, "Distribution", {
      defaultBehavior: {
        allowedMethods: AllowedMethods.ALLOW_ALL,
        cachePolicy: CachePolicy.CACHING_DISABLED,
        compress: true,
        edgeLambdas: [
          {
            eventType: LambdaEdgeEventType.ORIGIN_REQUEST,
            functionVersion: edgeFn.currentVersion,
            includeBody: true,
          },
        ],
        origin: assetsBucketS3Origin,
        originRequestPolicy: new OriginRequestPolicy(
          this,
          "OriginRequestPolicy",
          {
            headerBehavior: OriginRequestHeaderBehavior.all(),
            queryStringBehavior: OriginRequestQueryStringBehavior.all(),
            cookieBehavior: OriginRequestCookieBehavior.all(),
          }
        ),
        viewerProtocolPolicy: ViewerProtocolPolicy.REDIRECT_TO_HTTPS,
      },
      additionalBehaviors: {
        "build/*": {
          allowedMethods: AllowedMethods.ALLOW_GET_HEAD,
          cachePolicy: CachePolicy.CACHING_OPTIMIZED,
          compress: true,
          origin: assetsBucketS3Origin,
          viewerProtocolPolicy: ViewerProtocolPolicy.REDIRECT_TO_HTTPS,
        },
      },
    });