back to api gateway to avoid limited vercel function invocations

Author: brpapa

lambda/package-lock.json

@@ -4,7 +4,7 @@ require('dotenv').config()
 
 export const supportedLanguages: SupportedLanguages[] = ['node', 'python', 'golang']
 
-export const DEFAULT_TIMEOUT_MS = 30000
+export const DEFAULT_TIMEOUT_MS = 28000
 export const DEFAULT_MAX_RECURSIVE_CALLS = 256
 export const DEFAULT_TMP_DIR_PATH = '/tmp'
 export const DEFAULT_TMP_FILE_MAX_SIZE_BYTES = 384e6 // because the size of ephemeral storage (/tmp folder) configured on AWS Lambda function is 512*10^6 bytes

lambda/src/config.ts

@@ -7,6 +7,9 @@ import { validateAPIGatewayProxyEvent } from './validations/event'
 const log = debug('app:handler')
 
 export const handler: APIGatewayProxyHandler = async (event) => {
+  // handle the preflight request (OPTIONS method withot req body) automatically sent by the browser before making a CORS request (e.g., POST)
+  if (event.httpMethod === 'OPTIONS') return ok({})
+
   const validatedEvent = validateAPIGatewayProxyEvent(event)
   if (validatedEvent.isError()) return badRequest(validatedEvent.value)
 
@@ -34,4 +37,9 @@ const internalServerError = (reason: string) => result(500, { reason })
 const result = (statusCode: number, body: Record<string, any>) => ({
   statusCode,
   body: safeStringify(body),
+  headers: {
+    "Access-Control-Allow-Origin": "*",
+    "Access-Control-Allow-Methods": "OPTIONS,GET,POST,PUT,DELETE",
+    "Access-Control-Allow-Headers": "Content-Type",
+  },
 })

lambda/src/index.ts

@@ -52,7 +52,7 @@ resource "aws_ecr_lifecycle_policy" "this" {
   })
 }
 
-# if any file within lambda/** changes, run docker build locally and push a new image with latest tag to ECR repository 
+# run docker build locally and push a new image with latest tag to ECR repository (if any file within lambda/** changed)
 
 locals {
   lambda_path         = "${path.module}/../lambda"
@@ -70,11 +70,13 @@ resource "null_resource" "local_docker_build_tag_push" {
   provisioner "local-exec" {
     working_dir = local.lambda_path
     command     = <<EOT
+      orb
       aws ecr get-login-password --profile ${var.profile} --region ${var.region} | docker login --username AWS --password-stdin ${aws_ecr_repository.this.repository_url}
 
       docker build --platform linux/arm64 -t ${var.image_name} .
       docker tag ${var.image_name}:latest ${aws_ecr_repository.this.repository_url}:latest
       docker push ${aws_ecr_repository.this.repository_url}:latest
+      orb stop
     EOT
   }
 }
@@ -86,21 +88,21 @@ data "aws_ecr_image" "latest" {
   image_tag       = "latest"
 }
 
-# lambda
+# lambda - create or force an update if a new image was pushed (image digest of latest tag changed)
 
 resource "aws_lambda_function" "this" {
   depends_on = [data.aws_ecr_image.latest, aws_iam_role.lambda_execution]
 
   function_name = var.function_name
   package_type  = "Image"
-  image_uri     = "${aws_ecr_repository.this.repository_url}@${data.aws_ecr_image.latest.image_digest}" # include the current image digest of latest tag to force lambda update if a new image was pushed
+  image_uri     = "${aws_ecr_repository.this.repository_url}@${data.aws_ecr_image.latest.image_digest}"
   role          = aws_iam_role.lambda_execution.arn
   timeout       = 45
   memory_size   = 512
 }
 
+# lambda - iam role to be assumed
 
-# iam role that the lambda will assume
 resource "aws_iam_role" "lambda_execution" {
   name = "${var.function_name}_lambda_execution_role"
 
@@ -143,3 +145,75 @@ resource "aws_iam_role_policy_attachment" "lambda_policy_attachment" {
   role       = aws_iam_role.lambda_execution.name
   policy_arn = aws_iam_policy.lambda_policy.arn
 }
+
+# api gateway
+
+resource "aws_api_gateway_rest_api" "api" {
+  name = var.api_name
+}
+
+resource "aws_api_gateway_resource" "proxy" {
+  rest_api_id = aws_api_gateway_rest_api.api.id
+  parent_id   = aws_api_gateway_rest_api.api.root_resource_id
+  path_part   = "api"
+}
+
+resource "aws_api_gateway_method" "proxy_method" {
+  rest_api_id   = aws_api_gateway_rest_api.api.id
+  resource_id   = aws_api_gateway_resource.proxy.id
+  http_method   = "ANY"
+  authorization = "NONE"
+}
+
+resource "aws_api_gateway_integration" "lambda" {
+  rest_api_id             = aws_api_gateway_rest_api.api.id
+  resource_id             = aws_api_gateway_resource.proxy.id
+  http_method             = aws_api_gateway_method.proxy_method.http_method
+  integration_http_method = "ANY"
+  type                    = "AWS_PROXY"
+  uri                     = aws_lambda_function.this.invoke_arn
+  timeout_milliseconds    = 29000
+}
+
+resource "aws_api_gateway_method_response" "cors_response" {
+  rest_api_id = aws_api_gateway_rest_api.api.id
+  resource_id = aws_api_gateway_resource.proxy.id
+  http_method = aws_api_gateway_method.proxy_method.http_method
+  status_code = "200"
+
+  response_parameters = {
+    "method.response.header.Access-Control-Allow-Origin"  = true
+    "method.response.header.Access-Control-Allow-Methods" = true
+    "method.response.header.Access-Control-Allow-Headers" = true
+  }
+}
+
+resource "aws_api_gateway_integration_response" "cors_integration_response" {
+  rest_api_id = aws_api_gateway_rest_api.api.id
+  resource_id = aws_api_gateway_resource.proxy.id
+  http_method = aws_api_gateway_method.proxy_method.http_method
+  status_code = aws_api_gateway_method_response.cors_response.status_code
+
+  response_parameters = {
+    "method.response.header.Access-Control-Allow-Origin"  = "'*'"
+    "method.response.header.Access-Control-Allow-Methods" = "'OPTIONS,GET,POST,PUT,DELETE'"
+    "method.response.header.Access-Control-Allow-Headers" = "'Content-Type'"
+  }
+
+  depends_on = [aws_api_gateway_integration.lambda]
+}
+
+resource "aws_api_gateway_deployment" "api_deployment" {
+  depends_on  = [aws_api_gateway_integration.lambda]
+  rest_api_id = aws_api_gateway_rest_api.api.id
+  stage_name = "production"
+}
+
+resource "aws_lambda_permission" "apigw_lambda" {
+  statement_id  = "AllowAPIGatewayInvoke"
+  action        = "lambda:InvokeFunction"
+  function_name = aws_lambda_function.this.function_name
+  principal     = "apigateway.amazonaws.com"
+
+  source_arn = "${aws_api_gateway_rest_api.api.execution_arn}/*/*"
+}

terraform/main.tf

@@ -5,3 +5,7 @@ output "ecr_repository_url" {
 output "lambda_function_arn" {
   value = aws_lambda_function.this.arn
 }
+
+output "api_gw_url" {
+  value = aws_api_gateway_deployment.api_deployment.invoke_url
+}

terraform/outputs.tf

@@ -28,3 +28,7 @@ variable "image_name" {
 variable "function_name" {
   type = string
 }
+
+variable "api_name" {
+  type = string
+}

terraform/variables.tf

@@ -18,7 +18,6 @@
     "typesync": "npx typesync"
   },
   "dependencies": {
-    "@aws-sdk/client-lambda": "^3.688.0",
     "@vercel/speed-insights": "^1.0.12",
     "next": "^14.2.15",
     "prism-react-renderer": "^2.4.0",

web/package.json

@@ -0,0 +1,38 @@
+import { Either, error, success } from './lib/either'
+import { safeParse, safeStringify } from './static/safe-json'
+import { FunctionData, Language, TreeViewerData } from './types'
+
+type RequestBody = {
+  lang: Language
+  functionData: FunctionData
+  options: {
+    memoize: boolean
+  }
+}
+
+export const runFunction = async (
+  requestBody: RequestBody
+): Promise<Either<string, TreeViewerData>> => {
+  try {
+    const response = await fetch('https://c1y17h6s33.execute-api.us-east-1.amazonaws.com/production/run', {
+      method: 'POST',
+      headers: {
+        'Content-Type': 'application/json',
+      },
+      mode: 'cors',
+      body: safeStringify(requestBody),
+    })
+    const responseBody = await response.text()
+
+    if (response.ok) {
+      const treeViewerData = safeParse(responseBody) as TreeViewerData
+      return success(treeViewerData)
+    } else {
+      const err = safeParse(responseBody) as { reason: string }
+      return error(err.reason || 'Internal server error')
+    }
+  } catch (e) {
+    console.error(e)
+    return error('Unexpected error')
+  }
+}

web/src/action/run-function.ts

@@ -1,13 +1,13 @@
 'use client'
-import React, { useState } from 'react'
+import { useState } from 'react'
 import { toast } from 'react-hot-toast'
 import styled from 'styled-components'
-import runFunction from '../../action/run-function'
 import { ThemeName } from '../../styles/themes'
 import { FunctionData, Language, TreeViewerData } from '../../types'
 import FunctionForm from '../function-form'
 import GraphViewer from '../graph-viewer'
 import Footer from './footer'
+import { runFunction } from '../../api'
 
 const App = (props: { onThemeChange: (themeName: ThemeName) => void }) => {
   const [treeViewerData, setTreeViewerData] = useState<TreeViewerData>(null)
@@ -28,7 +28,7 @@ const App = (props: { onThemeChange: (themeName: ThemeName) => void }) => {
         options: { memoize: options.memoize },
       })
 
-      if (result.ok) {
+      if (result.isSuccess()) {
         setTreeViewerData(result.value)
         setTreeViewerOptions({ animate: options.animate })
       } else {