Fix bug in deployment procedure in AWS CDK and support HTTPS (#1491)
* add cloudfront * modify: healthcheck disable * modify: health check option * modify nodejsbuild * add nodejs version * endpoint configuration * set axios url * remote console.log VITE_PROXY_TARGET * create alb stack * add alb to origin * alb build success * remote baseURL setting * add redirect * change responseHttpStatus to 200 * modify output and readme * modify architecture * add health check path route to cloudfront routing * modified: c9 env name in deploy langflow section * modified : package dependency for pymysql * modified: deploy procedure * modified: deploy procedure (ja) --------- Co-authored-by: nsxshota <nsxshota@amazon.co.jp> Co-authored-by: ymkazuki <ymkazuki@amazon.co.jp> Co-authored-by: Shota Nakamoto <53632932+nsy0328@users.noreply.github.com>
This commit is contained in:
kazuki306
GitHub
parent
7363df6293
commit
3eeda84d28
18 changed files with 678 additions and 271 deletions
|
|
@ -1,117 +1,141 @@
|
|||
import { Duration } from 'aws-cdk-lib'
|
||||
import { Construct } from 'constructs'
|
||||
import { Stack, Duration, RemovalPolicy, CfnOutput } from 'aws-cdk-lib';
|
||||
import { Construct } from 'constructs';
|
||||
import {
|
||||
aws_ec2 as ec2,
|
||||
aws_ecs as ecs,
|
||||
aws_ecr as ecr,
|
||||
aws_servicediscovery as servicediscovery,
|
||||
aws_s3 as s3,
|
||||
aws_iam as iam,
|
||||
aws_logs as logs,
|
||||
aws_elasticloadbalancingv2 as elb,
|
||||
aws_cloudfront as cloudfront,
|
||||
aws_cloudfront_origins as origins,
|
||||
aws_s3_deployment as s3_deployment
|
||||
} from 'aws-cdk-lib';
|
||||
import { CpuArchitecture } from 'aws-cdk-lib/aws-ecs';
|
||||
import { CloudFrontToS3 } from '@aws-solutions-constructs/aws-cloudfront-s3';
|
||||
import { CfnDistribution, Distribution } from 'aws-cdk-lib/aws-cloudfront';
|
||||
import { NodejsBuild } from 'deploy-time-build';
|
||||
|
||||
interface FrontEndProps {
|
||||
interface WebProps {
|
||||
cluster:ecs.Cluster
|
||||
ecsFrontSG:ec2.SecurityGroup
|
||||
ecrFrontEndRepository:ecr.Repository
|
||||
targetGroup: elb.ApplicationTargetGroup;
|
||||
backendServiceName: string;
|
||||
frontendTaskRole: iam.Role;
|
||||
frontendTaskExecutionRole: iam.Role;
|
||||
frontendLogGroup: logs.LogGroup;
|
||||
cloudmapNamespace: servicediscovery.PrivateDnsNamespace;
|
||||
arch:ecs.CpuArchitecture;
|
||||
alb:elb.IApplicationLoadBalancer;
|
||||
albSG:ec2.SecurityGroup;
|
||||
}
|
||||
|
||||
export class FrontEndCluster extends Construct {
|
||||
constructor(scope: Construct, id: string, props:FrontEndProps) {
|
||||
export class Web extends Construct {
|
||||
readonly distribution;
|
||||
constructor(scope: Construct, id: string, props:WebProps) {
|
||||
super(scope, id)
|
||||
|
||||
const commonBucketProps: s3.BucketProps = {
|
||||
blockPublicAccess: s3.BlockPublicAccess.BLOCK_ALL,
|
||||
encryption: s3.BucketEncryption.S3_MANAGED,
|
||||
autoDeleteObjects: true,
|
||||
removalPolicy: RemovalPolicy.DESTROY,
|
||||
objectOwnership: s3.ObjectOwnership.OBJECT_WRITER,
|
||||
enforceSSL: true,
|
||||
};
|
||||
|
||||
const containerPort = 3000
|
||||
const frontendTaskDefinition = new ecs.FargateTaskDefinition(
|
||||
this,
|
||||
'FrontendTaskDef',
|
||||
{
|
||||
memoryLimitMiB: 3072,
|
||||
cpu: 1024,
|
||||
executionRole: props.frontendTaskExecutionRole,
|
||||
runtimePlatform:{
|
||||
operatingSystemFamily: ecs.OperatingSystemFamily.LINUX,
|
||||
cpuArchitecture: props.arch,
|
||||
},
|
||||
taskRole: props.frontendTaskRole,
|
||||
}
|
||||
// CDKにて 静的WebサイトをホストするためのAmazon S3バケットを作成
|
||||
const websiteBucket = new s3.Bucket(this, 'LangflowWebsiteBucket', commonBucketProps);
|
||||
|
||||
const originAccessIdentity = new cloudfront.OriginAccessIdentity(
|
||||
this,
|
||||
'OriginAccessIdentity',
|
||||
{
|
||||
comment: 'langflow-distribution-originAccessIdentity',
|
||||
}
|
||||
);
|
||||
const frontendServiceName = 'frontend'
|
||||
frontendTaskDefinition.addContainer('frontendContainer', {
|
||||
image: ecs.ContainerImage.fromEcrRepository(props.ecrFrontEndRepository, "latest"),
|
||||
containerName:'langflow-front-container',
|
||||
environment: {
|
||||
BACKEND_SERVICE_NAME: props.backendServiceName,
|
||||
BACKEND_URL: `http://${props.backendServiceName}.${props.cloudmapNamespace.namespaceName}:7860/`,
|
||||
VITE_PROXY_TARGET: `http://${props.backendServiceName}.${props.cloudmapNamespace.namespaceName}:7860/`,
|
||||
},
|
||||
logging: ecs.LogDriver.awsLogs({
|
||||
streamPrefix: 'my-stream',
|
||||
logGroup: props.frontendLogGroup,
|
||||
}),
|
||||
portMappings: [
|
||||
{
|
||||
name:frontendServiceName,
|
||||
containerPort: containerPort,
|
||||
protocol: ecs.Protocol.TCP,
|
||||
appProtocol:ecs.AppProtocol.http,
|
||||
},
|
||||
],
|
||||
|
||||
const webSiteBucketPolicyStatement = new iam.PolicyStatement({
|
||||
actions: ['s3:GetObject'],
|
||||
effect: iam.Effect.ALLOW,
|
||||
principals: [
|
||||
new iam.CanonicalUserPrincipal(
|
||||
originAccessIdentity.cloudFrontOriginAccessIdentityS3CanonicalUserId
|
||||
),
|
||||
],
|
||||
resources: [`${websiteBucket.bucketArn}/*`],
|
||||
});
|
||||
const frontendService = new ecs.FargateService(
|
||||
this,
|
||||
'FrontendService',
|
||||
{
|
||||
serviceName: frontendServiceName,
|
||||
cluster: props.cluster,
|
||||
desiredCount: 1,
|
||||
assignPublicIp: false,
|
||||
taskDefinition: frontendTaskDefinition,
|
||||
enableExecuteCommand: true,
|
||||
securityGroups: [props.ecsFrontSG],
|
||||
cloudMapOptions: {
|
||||
cloudMapNamespace: props.cloudmapNamespace,
|
||||
containerPort: containerPort,
|
||||
dnsRecordType: servicediscovery.DnsRecordType.A,
|
||||
dnsTtl: Duration.seconds(10),
|
||||
name: frontendServiceName
|
||||
},
|
||||
healthCheckGracePeriod: Duration.seconds(1000),
|
||||
}
|
||||
);
|
||||
|
||||
props.targetGroup.addTarget(frontendService);
|
||||
websiteBucket.addToResourcePolicy(webSiteBucketPolicyStatement);
|
||||
websiteBucket.grantRead(originAccessIdentity);
|
||||
|
||||
// // Create ALB and ECS Fargate Service
|
||||
// const frontService = new ecs_patterns.ApplicationLoadBalancedFargateService(
|
||||
// this,
|
||||
// "FrontEndService",
|
||||
// {
|
||||
// cluster: cluster,
|
||||
// serviceName: 'langflow-frontend-service',
|
||||
// cpu: 256,
|
||||
// memoryLimitMiB: 512,
|
||||
// listenerPort: 80,
|
||||
// assignPublicIp: true, // Public facing - ALB
|
||||
// taskSubnets: { subnetType: ec2.SubnetType.PRIVATE_WITH_EGRESS },
|
||||
// securityGroups:[ecsFrontSG],
|
||||
// taskImageOptions: {
|
||||
// family: 'langflow-taskdef',
|
||||
// containerName: 'langflow-front-container',
|
||||
// image: ecs.ContainerImage.fromEcrRepository(ecrFrontEndRepository, "latest"),
|
||||
// containerPort: 3000, // L2なので、TargetGroupのportが3000で設定されるはず
|
||||
// },
|
||||
// loadBalancer:alb,
|
||||
// openListener:false,
|
||||
// }
|
||||
// );
|
||||
const s3SpaOrigin = new origins.S3Origin(websiteBucket);
|
||||
const ApiSpaOrigin = new origins.LoadBalancerV2Origin(props.alb,{
|
||||
protocolPolicy: cloudfront.OriginProtocolPolicy.HTTP_ONLY
|
||||
});
|
||||
|
||||
const albBehaviorOptions = {
|
||||
origin: ApiSpaOrigin,
|
||||
allowedMethods: cloudfront.AllowedMethods.ALLOW_ALL,
|
||||
|
||||
viewerProtocolPolicy: cloudfront.ViewerProtocolPolicy.ALLOW_ALL,
|
||||
cachePolicy: cloudfront.CachePolicy.CACHING_DISABLED,
|
||||
originRequestPolicy: cloudfront.OriginRequestPolicy.ALL_VIEWER_EXCEPT_HOST_HEADER
|
||||
}
|
||||
|
||||
const cloudFrontWebDistribution = new cloudfront.Distribution(this, 'distribution', {
|
||||
comment: 'langflow-distribution',
|
||||
defaultRootObject: 'index.html',
|
||||
errorResponses: [
|
||||
{
|
||||
httpStatus: 403,
|
||||
responseHttpStatus: 200,
|
||||
responsePagePath: '/index.html',
|
||||
},
|
||||
{
|
||||
httpStatus: 404,
|
||||
responseHttpStatus: 200,
|
||||
responsePagePath: '/index.html',
|
||||
},
|
||||
],
|
||||
defaultBehavior: { origin: s3SpaOrigin },
|
||||
additionalBehaviors: {
|
||||
'/api/v1/*': albBehaviorOptions,
|
||||
'/health' : albBehaviorOptions,
|
||||
},
|
||||
enableLogging: true, // ログ出力設定
|
||||
logBucket: new s3.Bucket(this, 'LogBucket',commonBucketProps),
|
||||
logFilePrefix: 'distribution-access-logs/',
|
||||
logIncludesCookies: true,
|
||||
});
|
||||
this.distribution = cloudFrontWebDistribution;
|
||||
|
||||
|
||||
new NodejsBuild(this, 'BuildFrontEnd', {
|
||||
assets: [
|
||||
{
|
||||
path: '../../src/frontend',
|
||||
exclude: [
|
||||
'.git',
|
||||
'.github',
|
||||
'.gitignore',
|
||||
'.prettierignore',
|
||||
'build',
|
||||
'node_modules'
|
||||
],
|
||||
},
|
||||
],
|
||||
nodejsVersion:20,
|
||||
destinationBucket: websiteBucket,
|
||||
distribution: cloudFrontWebDistribution,
|
||||
outputSourceDirectory: 'build',
|
||||
buildCommands: ['npm install', 'npm run build'],
|
||||
buildEnvironment: {
|
||||
// VITE_AXIOS_BASE_URL: `https://${this.distribution.domainName}`
|
||||
},
|
||||
});
|
||||
|
||||
// distribution から backendへのinbound 許可
|
||||
const alb_listen_port=80
|
||||
props.albSG.addIngressRule(ec2.Peer.anyIpv4(), ec2.Port.tcp(alb_listen_port))
|
||||
const alb_listen_port_443=443
|
||||
props.albSG.addIngressRule(ec2.Peer.anyIpv4(), ec2.Port.tcp(alb_listen_port_443))
|
||||
|
||||
|
||||
new CfnOutput(this, 'URL', {
|
||||
value: `https://${this.distribution.domainName}`,
|
||||
});
|
||||
}
|
||||
|
||||
}
|
||||
Loading…
Add table
Add a link
Reference in a new issue