reactjs 如何设置与aws cdk混音

93ze6v8z  于 2023-02-18  发布在  React
关注(0)|答案(1)|浏览(122)

我正在学习混音,并尝试建立一个使用aws cdk做服务器的混音项目。我在这里找到了一个GitHub的例子:https://github.com/ajhaining/remix-cloudfront-cdk-example但它并没有真正解释如何或什么是怎么回事/如何从头开始做这件事。如果有人能帮助解释如何设置这将是一个很大的帮助!

oxiaedzo

oxiaedzo1#

在您提到的解决方案中,此人使用AWS CDK部署使用Remix框架的前端和后端解决方案。
如果您不熟悉CDK:AWS CDK允许您编写描述AWS基础设施的代码,以便部署到AWS,即作为代码的基础设施。
他们使用以下AWS基础设施:

  • 用于存储静态文件的AWS S3存储桶(前端)
  • 使用Cloudfront Lambda@Edge的AWS Lambda(后端)
  • 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,
        },
      },
    });

相关问题