fix: move to OAC in static-website and fix issue with runtime-config …

…not updating (#894)

packages/static-website/src/index.ts

@@ -4,3 +4,4 @@ export * from "./cloudfront-web-acl";
 export * from "./static-website";
 export * from "./bucket-deployment-props";
 export * from "./distribution-props";
+export * from "./lazy-token-renderer";

packages/static-website/src/lazy-token-renderer.ts

@@ -0,0 +1,33 @@
+/*! Copyright [Amazon.com](http://amazon.com/), Inc. or its affiliates. All Rights Reserved.
+SPDX-License-Identifier: Apache-2.0 */
+import { CfnJson, Lazy, Token } from "aws-cdk-lib";
+import { Construct } from "constructs";
+
+const isUnresolved = (value: any) =>
+  Token.isUnresolved(value) ||
+  (typeof value === "string" && value.endsWith("}}"));
+
+const resolveTokens = (scope: Construct, payload: any) => {
+  const _runtimeConfig: Record<string, any> = {};
+
+  Object.entries(payload).forEach(([key, value]) => {
+    if (isUnresolved(value)) {
+      _runtimeConfig[key] = new CfnJson(scope, `runtimeConfig-${key}`, {
+        value,
+      }).value;
+    } else if (typeof value === "object") {
+      _runtimeConfig[key] = resolveTokens(scope, value);
+    } else if (Array.isArray(value)) {
+      _runtimeConfig[key] = value.map((v) => resolveTokens(scope, v));
+    } else {
+      _runtimeConfig[key] = value;
+    }
+  });
+
+  return _runtimeConfig;
+};
+
+export const lazilyRender = (scope: Construct, payload: any) =>
+  Lazy.any({
+    produce: () => resolveTokens(scope, payload),
+  });

packages/static-website/src/static-website.ts

@@ -5,13 +5,11 @@ import { CfnOutput, RemovalPolicy, Stack } from "aws-cdk-lib";
 import {
   Distribution,
   IOrigin,
-  OriginAccessIdentity,
   OriginBindConfig,
   OriginBindOptions,
   ViewerProtocolPolicy,
 } from "aws-cdk-lib/aws-cloudfront";
-import { S3Origin } from "aws-cdk-lib/aws-cloudfront-origins";
-import { PolicyStatement } from "aws-cdk-lib/aws-iam";
+import { S3BucketOrigin } from "aws-cdk-lib/aws-cloudfront-origins";
 import { Key } from "aws-cdk-lib/aws-kms";
 import {
   BlockPublicAccess,
@@ -26,6 +24,7 @@ import { Construct } from "constructs";
 import { BucketDeploymentProps } from "./bucket-deployment-props";
 import { CloudfrontWebAcl, CloudFrontWebAclProps } from "./cloudfront-web-acl";
 import { DistributionProps } from "./distribution-props";
+import { lazilyRender } from "./lazy-token-renderer";
 
 const DEFAULT_RUNTIME_CONFIG_FILENAME = "runtime-config.json";
 
@@ -196,18 +195,6 @@ export class StaticWebsite extends Construct {
         serverAccessLogsBucket: accessLogsBucket,
       });
 
-    const originAccessIdentity = new OriginAccessIdentity(
-      this,
-      "OriginAccessIdentity"
-    );
-    this.websiteBucket.addToResourcePolicy(
-      new PolicyStatement({
-        resources: [this.websiteBucket.bucketArn],
-        actions: ["s3:ListBucket"],
-        principals: [originAccessIdentity.grantPrincipal],
-      })
-    );
-
     const defaultRootObject =
       distributionProps?.defaultRootObject ?? "index.html";
     this.cloudFrontDistribution = new Distribution(
@@ -220,9 +207,7 @@ export class StaticWebsite extends Construct {
         logBucket: logBucket,
         defaultBehavior: {
           ...distributionProps?.defaultBehavior,
-          origin: new S3Origin(this.websiteBucket, {
-            originAccessIdentity,
-          }),
+          origin: S3BucketOrigin.withOriginAccessControl(this.websiteBucket),
           viewerProtocolPolicy: ViewerProtocolPolicy.REDIRECT_TO_HTTPS,
         },
         defaultRootObject,
@@ -246,7 +231,7 @@ export class StaticWebsite extends Construct {
               Source.jsonData(
                 props.runtimeOptions?.jsonFileName ||
                   DEFAULT_RUNTIME_CONFIG_FILENAME,
-                props.runtimeOptions?.jsonPayload
+                lazilyRender(this, props.runtimeOptions.jsonPayload)
               ),
             ]
           : []),