Build a Serverless Calculator with API Gateway HTTP API, Lambda, and S3 – SAP-C02 Study Guide

Purpose of This Lesson

This hands-on exercise demonstrates how to connect a browser-based frontend to a serverless backend using:

• Amazon S3 for static website hosting
• Amazon API Gateway HTTP API as the HTTP interface
• AWS Lambda to perform calculator operations

The workflow illustrates several AWS fundamentals that appear in SAP-C02 scenarios: routing requests, integrating API Gateway with Lambda, granting invocation permissions, deploying API stages, and troubleshooting browser-to-API requests.

Key Concepts

Serverless request flow

The application follows this path:

1. A user opens an HTML page hosted by Amazon S3.
2. JavaScript in the page sends a request to an API Gateway HTTP API.
3. API Gateway matches the request to a route such as /calculate.
4. API Gateway invokes the configured Lambda function.
5. Lambda performs the requested operation and returns a response.
6. The response is sent back through API Gateway to the browser.

This design avoids managing servers, load balancers, or an always-running application tier.

API Gateway HTTP API

An HTTP API provides a lightweight API Gateway option for HTTP-based workloads. For this exercise, the API contains:

• A route: /calculate
• An HTTP method, potentially configured as ANY for a simple demonstration
• A Lambda integration
• A deployment stage, such as prod
• An invoke URL

The resulting endpoint typically follows this pattern:

https://{api-id}.execute-api.{region}.amazonaws.com/{stage}/calculate

The exact URL depends on the API ID, AWS Region, and stage configuration.

Lambda integration permissions

When API Gateway is configured to invoke Lambda, Lambda must trust the API Gateway service through a resource-based policy. The console can add this permission during integration setup.

This is separate from the Lambda function’s execution role:

• Lambda execution role: permissions Lambda has when calling other AWS services.
• Lambda resource-based policy: permissions for external principals, such as API Gateway, to invoke the function.

A common exam distinction is that granting Lambda’s execution role access does not, by itself, allow API Gateway to invoke the function.

Stages and deployments

API Gateway uses stages to expose deployed API configurations. A route or integration change may not be available at the public endpoint until the API is deployed to the relevant stage.

For example:

• API configuration: route and integration definitions
• Stage: prod
• Invoke URL: includes the deployed stage path

If the configuration is changed but the stage is not redeployed, requests can continue using the previous API configuration.

S3 static website hosting

The frontend can be placed in an S3 bucket and served as a static website. The bucket configuration requires an index document such as index.html.

Traditional S3 website endpoints generally require public access to the website content. However, public S3 buckets are not the preferred production architecture. A more secure design is usually:

• S3 bucket with Block Public Access enabled
• Amazon CloudFront distribution in front of the bucket
• Origin Access Control (OAC) allowing CloudFront to read the bucket
• HTTPS through CloudFront

The public-bucket approach is suitable only for a controlled demonstration and should be treated as a security tradeoff, not a default recommendation.

Browser access and CORS

A frontend hosted on S3 and an API hosted by API Gateway commonly use different origins. Browser same-origin rules can therefore block requests unless the API allows the frontend origin through Cross-Origin Resource Sharing (CORS).

If the page loads but API calls fail in the browser, inspect developer tools for CORS errors and configure API Gateway CORS appropriately. Avoid using * in production when requests involve credentials or when access should be restricted to known domains.

Architecture Decision Guide

Requirement	Recommended choice	Notes
Simple HTTP endpoint invoking Lambda	API Gateway HTTP API	Lower-complexity option for many HTTP APIs
Advanced API management features	API Gateway REST API	Consider when features such as usage plans, API keys, or more extensive transformations are required
Static files for a temporary lab	S3 static website hosting	Simple, but commonly requires public access
Production static website	S3 private bucket plus CloudFront and OAC	Improves security and supports HTTPS, caching, and edge delivery
Restrict Lambda invocation	Specific API Gateway source and function ARN	Prefer least privilege over broad invocation permissions
Quick demonstration route handling	ANY /calculate	Convenient for a lab, but overly broad for production
Production API contract	Explicit methods such as GET or POST	Reduces unintended behavior and improves governance

Exam-Relevant Takeaways

• API Gateway HTTP APIs can integrate directly with Lambda without provisioning servers.
• A route combines a path and HTTP method, such as POST /calculate.
• API Gateway needs permission to invoke the target Lambda function. This is commonly granted through a Lambda resource-based policy.
• The Lambda execution role and Lambda resource-based policy solve different authorization problems.
• API changes must be deployed to a stage before clients use them through the stage invoke URL.
• The API endpoint includes the deployed stage when using the default API Gateway URL format.
• A browser frontend hosted on S3 may require API Gateway CORS configuration.
• ANY methods and wildcard permissions are useful for quick testing but are not least-privilege production designs.
• Public S3 website hosting exposes content directly. For production, prefer a private bucket behind CloudFront with OAC.
• Troubleshooting should begin with the browser developer tools, endpoint URL, route, method, API deployment status, Lambda integration, permissions, and CORS settings.
• Temporary lab resources should be deleted afterward to avoid unnecessary cost and security exposure.

Common Exam Traps

Confusing an API route with the full endpoint

/calculate is only the route path. A client must use the complete URL, including the API Gateway hostname and deployed stage when applicable.

Forgetting deployment

Creating or editing a route does not necessarily update the deployed stage. A request can therefore return a route-not-found or stale-configuration result until deployment is completed.

Using the wrong Lambda permission model

The Lambda execution role controls what the function can do after it starts. It does not authorize API Gateway to invoke the function. Invocation must be allowed through the function’s resource-based policy.

Treating ANY as a production best practice

An ANY route accepts all HTTP methods. This may simplify a lab but can permit operations that the application did not intend to expose. Define only required methods in a production API.

Making an S3 bucket public without considering alternatives

Turning off S3 Block Public Access and adding a public bucket policy is a significant exposure. In production, use CloudFront with a private bucket and OAC instead.

Ignoring CORS

A successful API test in the API Gateway console does not prove that a browser hosted on another origin can call the API. Browser enforcement of CORS can still block the frontend request.

Granting unnecessary S3 actions

A static HTML website normally needs read access to website objects. Granting write permissions such as s3:PutObject to anonymous users is dangerous and unnecessary.

Real-World Engineer Notes

• Use POST /calculate when the operation and operands are supplied in a request body, or use a carefully designed GET request when the operation is safe and naturally represented as query parameters.
• Validate operation names, operand types, numeric ranges, and malformed input in Lambda.
• Handle division by zero and unsupported operations explicitly.
• Return appropriate HTTP status codes rather than always returning a successful response.
• Restrict CORS to approved frontend origins and methods.
• Configure structured logging in Lambda and inspect API Gateway access logs when diagnosing production issues.
• Use separate stages or environments for development, testing, and production, with controlled promotion between them.
• Protect production APIs with authentication and authorization when they are not intended to be public. Options can include IAM authorization, JWT authorizers, or another identity layer depending on the client and API design.
• Use infrastructure as code for repeatability instead of manually recreating the API, Lambda function, permissions, and S3 configuration.
• Remove temporary API, Lambda, S3, and related resources after a lab. Also check for CloudWatch log groups and other retained resources.

Quick Reference Summary

Browser
  -> S3-hosted HTML and JavaScript
  -> API Gateway HTTP API
  -> Route: /calculate
  -> Lambda integration
  -> Calculator response

Key configuration checklist:

• Create a Lambda function containing the calculator logic.
• Create an API Gateway HTTP API.
• Add the required route and HTTP method.
• Attach the Lambda integration.
• Confirm Lambda resource-based invoke permission for API Gateway.
• Configure CORS if the browser frontend uses a different origin.
• Deploy the API to a stage such as prod.
• Use the complete invoke URL, including the stage and route.
• Host the HTML frontend using a secure static website pattern for production.
• Test browser requests and inspect developer tools for errors.
• Delete lab resources when finished.

Flashcards

1. What is the role of API Gateway in this architecture?

It exposes an HTTP endpoint, matches requests to routes, and invokes the backend Lambda function.

2. What does a route consist of?

A route generally consists of an HTTP method and path, such as POST /calculate.

3. Which Lambda permission allows API Gateway to invoke a function?

A Lambda resource-based policy that authorizes the API Gateway service or the relevant API to invoke the function.

4. What does the Lambda execution role control?

It controls which AWS resources and APIs the Lambda function can access while executing.

5. Why is a stage important in API Gateway?

A stage provides a deployed version of the API configuration and is typically included in the invoke URL.

6. What can happen if an API change is not deployed?

The public endpoint may continue using the old configuration or fail to recognize a newly added route.

7. Why might a browser reject an otherwise working API request?

The frontend and API may have different origins, requiring appropriate CORS configuration.

8. Why is ANY usually unsuitable for a production route?

It permits every HTTP method, potentially exposing operations beyond those required by the application.

9. What is the preferred production pattern for S3-hosted static content?

Keep the S3 bucket private and serve it through CloudFront using Origin Access Control.

10. What is a common security problem with anonymous S3 access?

Granting public write access, such as anonymous s3:PutObject, allows unauthorized users to upload or alter content.

Practice Questions

Question 1

A team creates an API Gateway HTTP API route integrated with Lambda. The Lambda function works when tested directly, but requests through API Gateway return an access-denied error. The Lambda execution role already has broad permissions. What should the architect verify first?

A. That the Lambda function has a larger memory allocation
B. That API Gateway is allowed to invoke Lambda through a resource-based policy
C. That the S3 bucket has versioning enabled
D. That the API uses a REST API instead of an HTTP API

Correct answer: B

Explanation: The Lambda execution role controls the function’s outbound AWS permissions. API Gateway invocation requires permission on the Lambda function’s resource-based policy.

Question 2

A developer adds a /calculate route to an HTTP API and immediately tests the existing production URL. The URL returns a route-not-found response. The route is visible in the API configuration console. What is the most likely cause?

A. The API has not been deployed to the stage used by the URL
B. Lambda functions cannot be integrated with HTTP APIs
C. S3 Block Public Access is enabled
D. The Lambda function requires an instance profile

Correct answer: A

Explanation: API Gateway changes must be deployed to the relevant stage before they are available through the deployed invoke URL.

Question 3

A static frontend in an S3 bucket calls an API Gateway endpoint. Direct testing of the endpoint succeeds, but the browser console reports that the request was blocked by the same-origin policy. What is the best next step?

A. Add an S3 bucket lifecycle rule
B. Increase Lambda timeout to 15 minutes
C. Configure API Gateway CORS for the frontend origin and required methods
D. Replace Lambda with an EC2 instance

Correct answer: C

Explanation: A browser may block cross-origin calls even when the API itself works. API Gateway must return suitable CORS headers, ideally restricted to the approved frontend origin.

Question 4

An engineer is deploying a production static website. The initial design disables S3 Block Public Access and permits anonymous s3:GetObject access. Which redesign provides stronger security while retaining public website delivery?

A. Permit anonymous s3:PutObject and s3:GetObject
B. Store the HTML in a private S3 bucket and use CloudFront with Origin Access Control
C. Put the HTML in a Lambda deployment package
D. Allow all AWS principals to access the bucket

Correct answer: B

Explanation: CloudFront can serve public content while the S3 bucket remains private. OAC grants the distribution controlled access to the bucket and avoids direct anonymous S3 access.

Question 5

A calculator API only needs to accept calculation submissions. Which route design best follows least privilege?

A. ANY /calculate
B. GET /{proxy+}
C. POST /calculate
D. ANY /{proxy+}

Correct answer: C

Explanation: An explicit method and path expose only the required operation. Wildcard routes accept more requests than necessary and increase the risk of unintended API behavior.