Merge pull request #15 from benoitdechateauvieux/main

Fixes UI stack circular deployment issue

Author: bishesh16

ui/geofm-demo-stack/lib/backend-stack.ts

@@ -14,6 +14,9 @@ import * as ec2 from 'aws-cdk-lib/aws-ec2';
 import * as elasticache from 'aws-cdk-lib/aws-elasticache';
 import { CfnWebACL, CfnWebACLAssociation } from 'aws-cdk-lib/aws-wafv2';
 
+import * as s3 from 'aws-cdk-lib/aws-s3';
+import * as cf from 'aws-cdk-lib/aws-cloudfront';
+
 
 export interface BackendStackProps extends NestedStackProps {
     readonly userPool: cognito.IUserPool;
@@ -25,8 +28,9 @@ export interface BackendStackProps extends NestedStackProps {
 
 export class BackendStack extends NestedStack {
     public readonly tilesApi: apigw.RestApi;
-    public readonly s3VpcPointId: string;
     public readonly vpc: ec2.Vpc;
+    public readonly geoTiffBucket: s3.IBucket;
+    public readonly geoTiffOriginAccessIdentity: cf.OriginAccessIdentity;
 
     constructor(scope: Construct, id: string, props: BackendStackProps) {
         super(scope, id, props);
@@ -74,7 +78,6 @@ export class BackendStack extends NestedStack {
             actions: ['s3:GetObject'],
             resources: ['*']            
         }));
-        this.s3VpcPointId = s3AccessPoint.vpcEndpointId;
 
         const tilTilerSG = new ec2.SecurityGroup(this, 'lambdaTilTilerSecurityGroup', {
             vpc,
@@ -94,6 +97,37 @@ export class BackendStack extends NestedStack {
             description: 'subnet group for geofm-demo redis'
         });
 
+
+        this.geoTiffBucket = new s3.Bucket(this, 'GeoTiffBucket', {
+            bucketName: `aws-geofm-geotiff-bucket-${this.account}-${this.region}-${props.envName}`,
+            blockPublicAccess: {
+                blockPublicAcls: true,
+                restrictPublicBuckets: true,
+                blockPublicPolicy: true,
+                ignorePublicAcls: true
+            },
+            removalPolicy: RemovalPolicy.DESTROY,
+            autoDeleteObjects: true,
+            accessControl: s3.BucketAccessControl.PRIVATE,
+            enforceSSL: true,
+        });
+
+        this.geoTiffBucket.addToResourcePolicy(new iam.PolicyStatement({
+            actions: ['s3:GetObject'],
+            principals: [new iam.AccountPrincipal(this.account)],
+            resources: [this.geoTiffBucket.arnForObjects('*')],
+            conditions: {
+                StringEquals: {
+                    "aws:sourceVpce": `${s3AccessPoint.vpcEndpointId}`
+                }
+            }
+        }));
+
+        // Allow direct access to GeoTiff images from the bucket using OAI
+        this.geoTiffOriginAccessIdentity = new cf.OriginAccessIdentity(this, 'GeoTiffOriginAccessIdentity');
+        this.geoTiffBucket.grantRead(this.geoTiffOriginAccessIdentity);
+
+
         const redisCluster = new elasticache.CfnCacheCluster(
             this,
             "redisCluster", {

ui/geofm-demo-stack/lib/frontend-stack.ts

@@ -19,19 +19,17 @@ export interface FrontendStackStackProps extends NestedStackProps {
     readonly customHeaderName: string;
     readonly customHeaderValue: string;
     readonly tilesApi: apigw.RestApi;
-    readonly geotiffBucketVpcEndpointId: string;
     readonly solaraSGs: string[];
     readonly solaraOriginLBDnsName: string;
     readonly envName: string;
+    readonly geoTiffBucket: s3.IBucket;
+    readonly geoTiffOriginAccessIdentity: cf.OriginAccessIdentity;
 }
 
 export class FrontendStack extends NestedStack {
 
     public readonly staticContentBucket: s3.Bucket;
-    public readonly geoTiffBucket: s3.Bucket;
     public readonly frontendUrl: string;
-    public readonly geotiffUrl: string;
-    public readonly geotiffBucketName: string;
     public readonly cloudFrontDistribution: cf.Distribution;
     public readonly authorizerFunction: cf.experimental.EdgeFunction;
 
@@ -55,38 +53,6 @@ export class FrontendStack extends NestedStack {
         const staticContentOriginAccessIdentity = new cf.OriginAccessIdentity(this, 'StaticContentOriginAccessIdentity');
         this.staticContentBucket.grantRead(staticContentOriginAccessIdentity);
 
-        this.geoTiffBucket = new s3.Bucket(this, 'GeoTiffBucket', {
-            bucketName: `aws-geofm-geotiff-bucket-${this.account}-${this.region}-${props.envName}`,
-            blockPublicAccess: {
-                blockPublicAcls: true,
-                restrictPublicBuckets: true,
-                blockPublicPolicy: true,
-                ignorePublicAcls: true
-            },
-            removalPolicy: RemovalPolicy.DESTROY,
-            autoDeleteObjects: true,
-            accessControl: s3.BucketAccessControl.PRIVATE, 
-            enforceSSL: true,
-        });
-
-        this.geotiffUrl = this.geoTiffBucket.urlForObject();
-        this.geotiffBucketName = this.geoTiffBucket.bucketName;
-
-        this.geoTiffBucket.addToResourcePolicy(new iam.PolicyStatement({
-            actions: ['s3:GetObject'],
-            principals: [new iam.AccountPrincipal(this.account)],
-            resources: [ this.geoTiffBucket.arnForObjects('*') ],
-            conditions: {
-                StringEquals: {
-                    "aws:sourceVpce": `${props.geotiffBucketVpcEndpointId}`
-                }
-            }
-        }));
-
-        // Allow direct access to GeoTiff images from the bucket using OAI
-        const geoTiffOriginAccessIdentity = new cf.OriginAccessIdentity(this, 'GeoTiffOriginAccessIdentity');
-        this.geoTiffBucket.grantRead(geoTiffOriginAccessIdentity);
-
         this.authorizerFunction = new cloudfront.experimental.EdgeFunction(this, 'CloudFrontAuthorizer', {
             runtime: lambda.Runtime.NODEJS_18_X,
             handler: 'index.handler',
@@ -188,8 +154,8 @@ export class FrontendStack extends NestedStack {
             });
 
         // The Geotiff images are located in geotiff/*.tif
-        this.cloudFrontDistribution.addBehavior('geotiff/*', new cfo.S3Origin(this.geoTiffBucket, {
-            originAccessIdentity: geoTiffOriginAccessIdentity
+        this.cloudFrontDistribution.addBehavior('geotiff/*', new cfo.S3Origin(props.geoTiffBucket, {
+            originAccessIdentity: props.geoTiffOriginAccessIdentity
             }),
             {
                 edgeLambdas: edgeLambda,

ui/geofm-demo-stack/lib/geofm-demo-stack.ts

@@ -33,10 +33,10 @@ export class GeoFMDemoStack extends cdk.Stack {
     });
 
     const solaraBackend = new SolaraFEStack(this, 'SolaraFEStack', {
-        // cloudFrontDistribution: frontend.cloudFrontDistribution,
         customHeaderName: secureHeaderName,
         customHeaderValue: secureHeaderValue,
         envName: props?.envName || 'dev',
+        geoTiffBucket: backend.geoTiffBucket
     });
 
     const frontend = new FrontendStack(this, 'FrontendStack', {
@@ -45,8 +45,9 @@ export class GeoFMDemoStack extends cdk.Stack {
         customHeaderName: secureHeaderName,
         customHeaderValue: secureHeaderValue,
         tilesApi: backend.tilesApi,
-        geotiffBucketVpcEndpointId: backend.s3VpcPointId,
-        envName: props?.envName || 'dev'
+        envName: props?.envName || 'dev',
+        geoTiffBucket: backend.geoTiffBucket,
+        geoTiffOriginAccessIdentity: backend.geoTiffOriginAccessIdentity
     });
 
     this.applyConfiguration(frontend, auth);
@@ -96,32 +97,5 @@ export class GeoFMDemoStack extends cdk.Stack {
         installLatestAwsSdk: false
     });
     customResourceUserPoolClientConfig.node.addDependency(frontend.cloudFrontDistribution, auth.userPoolClient);
-
-    const config = {
-        tiles_backend_url: frontend.frontendUrl + '/tile/cog/tiles',
-        cloudfront_url: frontend.frontendUrl,
-        geotiff_bucket_url: frontend.geotiffUrl
-    };
-
-    const putConfigCall: cr.AwsSdkCall = {
-        service: 'S3',
-        action: 'putObject',
-        parameters: {
-            Bucket: frontend.staticContentBucket.bucketName,
-            Key: 'config.json',
-            Body: JSON.stringify(config),
-        },
-        physicalResourceId: cr.PhysicalResourceId.of(frontend.staticContentBucket.bucketArn),
-    };
-
-    const customResourceFrontendConfig = new cr.AwsCustomResource(this, 'PutFrontendConfig', {
-        onCreate: putConfigCall,
-        onUpdate: putConfigCall,
-        policy: cr.AwsCustomResourcePolicy.fromSdkCalls({
-            resources: [frontend.staticContentBucket.bucketArn + '/*']
-        }),
-        installLatestAwsSdk: false
-    });
-    customResourceFrontendConfig.node.addDependency(frontend.geoTiffBucket, frontend.cloudFrontDistribution);
   }
 }

ui/geofm-demo-stack/lib/solara-fe-stack.ts

@@ -20,6 +20,7 @@ export interface SolaraFEStackProps extends cdk.NestedStackProps {
   customHeaderName: string;
   customHeaderValue: string;
   envName: string;
+  geoTiffBucket: s3.IBucket;
   // userPool: cognito.IUserPool;
   // authorizerFunction: cloudfront.experimental.EdgeFunction;
 }
@@ -129,7 +130,10 @@ export class SolaraFEStack extends cdk.NestedStack {
       logging: ecs.LogDrivers.awsLogs({ streamPrefix: 'SolaraBackend' }),
       environment: {
         'SOLARA_APP': 'app:app',
-        'SOLARA_ASSETS_PREFIX': '/solara/'
+        'SOLARA_ASSETS_PREFIX': '/solara/',
+        "GEOTIFF_BUCKET_URL": props.geoTiffBucket.urlForObject(),
+        "TILES_BACKEND_URL": "/tile/cog/tiles",
+        "CLOUDFRONT_URL": "/",
       }
     });
 

ui/geofm-demo-stack/solara-fe/imagery_utils.py

@@ -3,6 +3,7 @@
 from typing import Optional, Union, Any
 from dataclasses import dataclass
 import logging
+import os
 
 logger = logging.getLogger(__name__)
 
@@ -151,7 +152,7 @@ def convert_sentinel_id(sentinel_id):
             )
         else:
             geotiff_url = (
-                f"{config.geotiff_bucket_url}/geotiff/{config.aoi_name}/"
+                f"{os.environ.get('GEOTIFF_BUCKET_URL')}/geotiff/{config.aoi_name}/"
                 f"{img_meta.provider.folder_structure}/{year}/{img_meta.month}/"
                 f"{img_meta.get_image_path()}_aoi_max_size_{band_name}.tif"
             )
@@ -163,7 +164,7 @@ def convert_sentinel_id(sentinel_id):
         if not config.use_remote_s2_cogs:
             geotiff_url = f"{geotiff_url}&{viz_params}"
 
-        return f"{config.tiles_backend_url}/{{z}}/{{x}}/{{y}}.png?url={geotiff_url}"
+        return f"{os.environ.get('TILES_BACKEND_URL')}/{{z}}/{{x}}/{{y}}.png?url={geotiff_url}"
 
     except Exception as e:
         logger.error(f"Error generating layer URL: {str(e)}")

ui/geofm-demo-stack/solara-fe/pages/01-home.py

@@ -49,7 +49,7 @@ def LandingPage():
 
     #FOR DEPLOYMENT
     demo_config = load_config()
-    cloudfront_url = demo_config["config"]["cloudfront_url"]
+    cloudfront_url = os.environ.get('CLOUDFRONT_URL')
     background_video_url = f"{cloudfront_url}/{demo_config['config']['background_video_file']}"
 
     with solara.Column(style={"height": "100vh", "width": "100vw", "position": "relative", "overflow": "hidden"}):

ui/geofm-demo-stack/solara-fe/pages/02-run_similarity_search.py

@@ -77,7 +77,7 @@ def create_base_layers(self):
             max_zoom=24,
             name='Sentinel-2',
             bounds=self.aoi_bounds,
-            url=f"{self.config.tiles_backend_url}/{{z}}/{{x}}/{{y}}.png?url={self.config.sentinel2_cog_source_url}"
+            url=f"{os.environ.get('TILES_BACKEND_URL')}/{{z}}/{{x}}/{{y}}.png?url={self.config.sentinel2_cog_source_url}"
         )
 
         chip_grid = self._create_chip_grid()

ui/geofm-demo-stack/solara-fe/pages/03-detect_change.py

@@ -122,7 +122,7 @@ def create_base_layers(self):
             max_zoom=24,
             name='Sentinel-2',
             bounds=self.aoi_bounds,
-            url=f"{self.config.tiles_backend_url}/{{z}}/{{x}}/{{y}}.png?url={self.config.sentinel2_cog_source_url}"
+            url=f"{os.environ.get('TILES_BACKEND_URL')}/{{z}}/{{x}}/{{y}}.png?url={self.config.sentinel2_cog_source_url}"
         )
 
         chip_grid = self._create_chip_grid()

ui/geofm-demo-stack/solara-fe/utils.py

@@ -6,32 +6,6 @@
 s3_res = boto3.resource('s3')
 
 
-def read_s3_config(bucket_name: str, key: str):
-    """
-    Reads the frontend JSON config created by CDK.
-
-    Args:
-        bucket_name: Bucket containing the FE config JSON file (i.e. geofm-demo-xxx-us-west-2-dev)
-        key: config file name (i.e config.json)
-
-    Returns:
-        Dict containing the FE configuration
-        {
-            "tiles_backend_url": "https://xxx.cloudfront.net/tile/cog/tiles",
-            "cloudfront_url":"https://xxx.cloudfront.net/api/",
-            "geotiff_bucket_url":"https://s3.us-west-2.amazonaws.com/geofm-demo-xxx-us-west-2-dev-geotiff"
-        }
-    """
-    s3_client = boto3.client('s3')
-
-    try:
-        response = s3_client.get_object(Bucket=bucket_name, Key=key)
-        json_content = json.loads(response['Body'].read().decode('utf-8'))
-        return json_content
-    except Exception as e:
-        print(f"Error reading FE JSON from S3: {str(e)}")
-        return None
-
 # Custom decoder for "True"/"False" strings
 def bool_decoder(dct):
     for k, v in dct.items():
@@ -60,13 +34,6 @@ def load_config(config_path: str = 'demo_config.json', demo_id: int = None) -> D
         demo_config = [obj for obj in config["demos"] if obj["demo_id"] == demo_id]
 
     if len(demo_config) > 0:
-        # read FE config created by CDK and add missing values
-        fe_config = read_s3_config(demo_config[0]["config"]["fe_bucket_name"], "config.json")
-        
-        # add new keys to the config
-        if fe_config != None:
-            for k in fe_config:
-                demo_config[0]["config"][k] = fe_config[k]
         return demo_config[0]
     else:
         raise Exception("Demo not found")