Repository files navigation

This project is aNext.js-based image gallery that fetches images from anAWS API Gateway endpoint and displays them in an attractive frontend. The application is containerized usingDocker, stored inAmazon ECR, and deployed toAWS ECS for scalable hosting.

• Fetches images from an API Gateway URL
• Displays images in a responsive gallery
• Deployed on AWS ECS using a containerized Next.js app
• Uses Amazon ECR for container storage

1. Frontend: Next.js application
2. Backend: AWS API Gateway serves image URLs
3. Containerization: Dockerized Next.js app stored in Amazon ECR
4. Hosting: ECS Fargate for scalable and serverless deployment

Before deploying, ensure you have:

• AWS Account
• AWS CLI installed and configured
• Docker installed
• A Next.js project ready to be containerized
• API Gateway endpoint for fetching images

# Build the Next.js projectnpm run build# Create a Docker imagedocker build -t nextjs-image-gallery.# Authenticate Docker with ECRaws ecr get-login-password --region<your-region>| docker login --username AWS --password-stdin<aws_account_id>.dkr.ecr.<your-region>.amazonaws.com# Tag the Docker imagedocker tag nextjs-image-gallery:latest<aws_account_id>.dkr.ecr.<your-region>.amazonaws.com/nextjs-image-gallery:latest# Push to ECRdocker push<aws_account_id>.dkr.ecr.<your-region>.amazonaws.com/nextjs-image-gallery:latest

1. Go toECS Console →Create a Cluster → SelectFargate.
2. Create aTask Definition with:
   • Task Role:ecsTaskExecutionRole (with ECR access)
   • Container Image:ECR image URL
   • Port Mapping:3000:3000
3. Create anECS Service under your cluster:
   • Set Task Definition
   • Desired tasks:1 (or more for scaling)
   • Configure Load Balancer if needed
4. Deploy the service and test the application.

• API Gateway URL: UpdateNEXT_PUBLIC_API_URL in.env.local.

NEXT_PUBLIC_API_URL=https://px893gsmql.execute-api.us-east-1.amazonaws.com/images

• Port Configuration: EnsureEXPOSE 3000 is set inDockerfile.

• Implement CI/CD pipeline with AWS CodePipeline
• Add caching mechanism for faster image loading
• Use AWS CloudFront for global content delivery