Use lamdba@edge to redirect SPA

Author: devksingh4

cloudformation/iam.yml

@@ -242,6 +242,34 @@ Resources:
                     ses:Recipients:
                       - "*@illinois.edu"
 
+
+  EdgeLambdaIAMRole:
+    Type: AWS::IAM::Role
+    Properties:
+      AssumeRolePolicyDocument:
+        Version: "2012-10-17"
+        Statement:
+          - Effect: Allow
+            Principal:
+              Service: "lambda.amazonaws.com"
+            Action: "sts:AssumeRole"
+          - Effect: Allow
+            Principal:
+              Service: "edgelambda.amazonaws.com"
+            Action: "sts:AssumeRole"
+      Policies:
+        - PolicyName: lambda-edge
+          PolicyDocument:
+            Version: "2012-10-17"
+            Statement:
+              - Effect: Allow
+                Action:
+                  - "logs:CreateLogGroup"
+                  - "logs:CreateLogStream"
+                  - "logs:PutLogEvents"
+                Resource:
+                  - Fn::Sub: arn:aws:logs:${AWS::Region}:${AWS::AccountId}:log-group:/aws/lambda/${LambdaFunctionName}-edge:*
+
 Outputs:
   MainFunctionRoleArn:
     Description: Main API IAM role ARN
@@ -254,3 +282,8 @@ Outputs:
   EntraFunctionRoleArn:
     Description: Entra IAM role ARN
     Value: !GetAtt EntraLambdaIAMRole.Arn
+
+  EdgeFunctionRoleArn:
+    Description: Edge IAM role ARN
+    Value: !GetAtt EdgeLambdaIAMRole.Arn
+

cloudformation/logs.yml

@@ -14,4 +14,10 @@ Resources:
       LogGroupName:
         Fn::Sub: /aws/lambda/${LambdaFunctionName}
       RetentionInDays:
-        Ref: LogRetentionDays
+        Ref: LogRetentionDays
+  EdgeLambdaLogGroup:
+    Type: AWS::Logs::LogGroup
+    Properties:
+      LogGroupName:
+        Fn::Sub: /aws/lambda/${LambdaFunctionName}-edge
+      RetentionInDays: 7

cloudformation/main.yml

@@ -576,6 +576,8 @@ Resources:
     Type: AWS::S3::Bucket
     Properties:
       BucketName: !Sub ${S3BucketPrefix}-ui
+      WebsiteConfiguration:
+        IndexDocument: index.html
 
   CloudFrontOriginAccessIdentity:
     Type: AWS::CloudFront::CloudFrontOriginAccessIdentity
@@ -635,6 +637,9 @@ Resources:
             Cookies:
               Forward: none
           CachePolicyId: 658327ea-f89d-4fab-a63d-7e88639e58f6 # caching-optimized
+          LambdaFunctionAssociations:
+            - EventType: origin-request
+              LambdaFunctionARN: !Ref AppFrontendEdgeLambdaVersion
         CacheBehaviors:
           - PathPattern: "/api/v1/events*"
             TargetOriginId: ApiGatewayOrigin
@@ -675,11 +680,6 @@ Resources:
             - EnvCertificateArn
           MinimumProtocolVersion: TLSv1.2_2021
           SslSupportMethod: sni-only
-        CustomErrorResponses:
-          - ErrorCode: 403
-            ResponseCode: 200
-            ResponsePagePath: /index.html
-            ErrorCachingMinTTL: 0
         HttpVersion: http2
         PriceClass: PriceClass_100
 
@@ -721,6 +721,34 @@ Resources:
           CookiesConfig:
             CookieBehavior: none
 
+  AppFrontendEdgeLambda:
+    Type: AWS::Lambda::Function
+    DependsOn:
+      - AppLogGroups
+    Properties:
+      FunctionName: !Sub ${ApplicationPrefix}-lambda-edge
+      Handler: "index.handler"
+      Role: !GetAtt AppSecurityRoles.Outputs.EdgeFunctionRoleArn
+      Runtime: nodejs22.x
+      Code:
+        ZipFile: |
+          'use strict';
+          exports.handler = async (event) => {
+              const request = event.Records[0].cf.request;
+              const uri = request.uri;
+              if (!uri.startsWith('/api') && !uri.match(/\.\w+$/)) {
+                  request.uri = "/index.html";
+              }
+              return request;
+          };
+      MemorySize: 128
+      Timeout: 5
+
+  AppFrontendEdgeLambdaVersion:
+    Type: AWS::Lambda::Version
+    Properties:
+      FunctionName: !Ref AppFrontendEdgeLambda
+
 Outputs:
   DomainName:
     Description: Domain name that the UI is hosted at