如何使用AWS CDK设置Remix。

huangapple go评论77阅读模式
英文:

How to set up remix with aws cdk

问题

我正在学习Remix,并尝试设置一个使用AWS CDK来进行服务器端处理的Remix项目。我在GitHub上找到了一个示例,链接在这里:https://github.com/ajhaining/remix-cloudfront-cdk-example 但它并没有真正解释如何进行设置,以及从头开始如何操作。如果有人能帮助解释如何设置这个项目,将会非常有帮助!

英文:

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!

答案1

得分: 2

在您引用的解决方案中,该人使用 AWS CDK 部署了一个使用 Remix 框架的前端和后端解决方案。

如果您对 CDK 不熟悉:AWS CDK 允许您编写描述 AWS 基础设施的代码,用于部署到 AWS,即基础设施即代码。

他们使用了以下 AWS 基础设施:

  • 用于存储静态文件的 AWS S3 存储桶(前端捆绑包,包括诸如 CSS 等的资源)
  • AWS Lambda 使用 Cloudfront Lambda@Edge(用于进行服务器端渲染的后端)
  • AWS Cloudfront 作为 CDN。这将流量路由到正确的“源”(用于前端资产或服务器端渲染)

整个“堆栈”在 cdk-remix-app-stack.ts 中有描述。

在这里,他们描述了 AWS Lambda 函数源代码的位置,用于进行服务器端渲染:

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

在这里,他们描述了前端资产的源代码将要存储在 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)),
      ],
    });

这部分比较复杂,他们在这里配置 CDN 将分发指向特定的源(前端的 S3 存储桶或后端渲染的 Lambda 函数):

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,
        },
      },
    });
英文:

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,
        },
      },
    });

huangapple
  • 本文由 发表于 2023年2月10日 11:17:40
  • 转载请务必保留本文链接:https://go.coder-hub.com/75406605.html
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定