Overview
This project demonstrates a full-stack, serverless web application deployed entirely on AWS. It includes a static frontend hosted on S3, a custom domain with HTTPS via CloudFront and Route 53, and a backend visitor counter powered by Lambda, DynamoDB, and API Gateway. The system is secured with IAM roles and Origin Access Control, monitored via CloudWatch, and deployed automatically using a CI/CD pipeline with GitHub Actions.
Frontend Hosting and Delivery
Amazon S3
- Hosted static assets including HTML, CSS, and JavaScript.
- Configured for static website hosting with index.html as the root object.
- Public access blocked; content served securely via CloudFront.
Amazon CloudFront
- Global CDN for low-latency delivery.
- Origin Access Control (OAC) restricts direct S3 access.
- HTTPS enforced with ACM certificate; caching & compression enabled.
Amazon Route 53
- Managed DNS for dorian-a-diaz.click.
- Alias A record points to CloudFront.
- Used for DNS validation during ACM provisioning.
AWS Certificate Manager (ACM)
- Public SSL certificate for dorian-a-diaz.click.
- Validated via DNS using Route 53.
- Attached to CloudFront for secure HTTPS delivery.
Backend Visitor Counter
Amazon DynamoDB
- Table with primary key id to track visitor counts.
- Atomic increments via UpdateCommand.
- On-demand capacity for automatic scaling.
AWS Lambda
- VisitorCountHandler: increments and returns count with CORS headers.
- VisitorCountPreflightHandler: handles CORS preflight OPTIONS.
- Node.js runtime; packaged & deployed with AWS CLI.
API Gateway (HTTP API v2)
- Endpoint /visitor-count using Lambda proxy integration.
- CORS configured; dedicated OPTIONS route to preflight Lambda.
Security and Permissions
- IAM Roles: Lambda roles with AWSLambdaBasicExecutionRole; DynamoDB permissions scoped to table.
- Invoke Permissions: API Gateway explicitly allowed to invoke both Lambdas.
- Encryption: S3 and DynamoDB encrypted (AWS-managed keys); OAC + ACM enforce secure access.
Monitoring and Logging
- CloudWatch Logs enabled for both Lambdas.
- Console logs trace incoming requests, DynamoDB updates, and errors.
- Alarms can notify on errors, latency, or invocation spikes.
Frontend Integration
The site’s JavaScript calls the API Gateway endpoint and updates the DOM with the visitor count. It includes a fallback to display N/A on error and logs responses in the browser console for debugging.
CI/CD Pipeline (GitHub Actions)
- Workflow in .github/workflows/deploy.yml runs on push to main.
- Steps: checkout → configure AWS creds (GitHub Secrets) → aws s3 sync → CloudFront invalidation.
GitHub source: DDIZZ01/portfolio-site
Secrets Management
- AWS_ACCESS_KEY_ID
- AWS_SECRET_ACCESS_KEY
Benefits
- Automatic deployment on push, cache invalidation for freshness, secure credentials, versioned infra, easy to extend.
Architecture Summary
- Frontend Hosting: Route 53 → CloudFront → S3 (OAC), ACM for HTTPS.
- API Layer: API Gateway with CORS and dedicated preflight route.
- Backend Logic: Lambda updates DynamoDB via atomic operation; returns JSON.
- Monitoring: CloudWatch logs/alarms.
- Security: IAM least-privilege, encryption at rest, HTTPS in transit.
Summary of Architecture Flow
- User → Route 53 → CloudFront → S3 (static content).
- Frontend JS sends OPTIONS then GET to API Gateway.
- API Gateway → Preflight Lambda (CORS) → Visitor Counter Lambda.
- Lambda updates DynamoDB → returns count.
- CloudWatch logs everything; alarms optional.
- Security via IAM, encryption, and HTTPS.
Skills Demonstrated
- Serverless architecture design & secure static hosting
- CORS troubleshooting and preflight handling
- IAM role creation and permission scoping
- DynamoDB atomic updates & Lambda integration
- Real-time logging and error tracing
- CI/CD with GitHub Actions and CloudFront invalidations
- Infrastructure/deploy via AWS CLI