英文:
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,
},
},
});
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库,让每个人都能够通过互相帮助和分享经验来进步。
评论