Deploying a Next.js Application for an Agritech Startup

At AMJ Cloud Technologies, we optimized the cloud infrastructure for GreenLeaf, an agritech startup focused on sustainable farming solutions. By leveraging AWS S3, CloudFront, GitHub Actions, and Terraform, we deployed a Next.js application that delivers real-time farming insights to users globally. This portfolio showcases our expertise in creating scalable, cost-effective, and high-performance cloud solutions.

Situation

GreenLeaf, a rapidly growing agritech startup, needed a robust platform to deliver its Next.js web application, providing farmers with real-time data on soil health, weather patterns, and crop yields. The application faced challenges with manual deployment processes, inconsistent performance, and high hosting costs on their existing infrastructure. Users in rural areas experienced latency issues, impacting adoption. The startup sought a modernized deployment pipeline and optimized content delivery to support global growth.

Task

Our goal was to design and implement an automated deployment pipeline for GreenLeaf’s Next.js application. Key objectives included:

• Host static assets on a scalable, cost-effective platform.
• Ensure low-latency content delivery worldwide.
• Automate build, test, and deployment to eliminate manual intervention.
• Use infrastructure-as-code (IaC) for consistent resource management.
• Maintain security best practices for public access.
• Complete the project within four months.

Action

To meet GreenLeaf’s requirements, we took the following actions:

1. Creating the Next.js Application:

   • Developed the application with static site generation (SSG) to pre-render pages, reducing server load and enabling fast page loads.
   • Configured the application to export static HTML, CSS, and JavaScript files, optimized for S3 hosting.

2. Setting Up Amazon S3 for Static Website Hosting:

   • Created an S3 bucket (greenleaf-app) for high-durability, cost-effective storage of static assets.

   • Enabled static website hosting with index.html as the default document and error.html for error handling.

   • Configured public read access via a bucket policy:

     {
       "Version": "2012-10-17",
       "Statement": [
         {
           "Sid": "PublicReadGetObject",
           "Effect": "Allow",
           "Principal": "*",
           "Action": "s3:GetObject",
           "Resource": "arn:aws:s3:::greenleaf-app/*"
         }
       ]
     }

   • Set object ACLs for public readability.

   • Defined the S3 bucket in Terraform:

     resource "aws_s3_bucket" "website" {
       bucket = "greenleaf-app"
     }
      
     resource "aws_s3_bucket_website_configuration" "website" {
       bucket = aws_s3_bucket.website.bucket
       index_document {
         suffix = "index.html"
       }
       error_document {
         key = "error.html"
       }
     }
      
     resource "aws_s3_bucket_policy" "public_access" {
       bucket = aws_s3_bucket.website.bucket
       policy = data.aws_iam_policy_document.public_read.json
     }

3. Configuring CloudFront for Global Content Delivery:

   • Set up a CloudFront distribution with the S3 bucket as the origin to cache assets at global edge locations.

   • Enforced HTTPS-only traffic and enabled compression for text-based assets.

   • Configured caching with a 24-hour TTL and invalidation triggers for updates.

   • Associated a custom domain (app.greenleaf.io) using Route 53.

   • Defined the CloudFront distribution in Terraform:

     resource "aws_cloudfront_distribution" "website" {
       origin {
         domain_name = aws_s3_bucket.website.bucket_regional_domain_name
         origin_id   = "S3-greenleaf-app"
       }
       enabled             = true
       is_ipv6_enabled     = true
       default_root_object = "index.html"
      
       default_cache_behavior {
         allowed_methods  = ["GET", "HEAD"]
         cached_methods   = ["GET", "HEAD"]
         target_origin_id = "S3-greenleaf-app"
         viewer_protocol_policy = "redirect-to-https"
       }
      
       restrictions {
         geo_restriction {
           restriction_type = "none"
         }
       }
      
       viewer_certificate {
         cloudfront_default_certificate = true
       }
     }

4. Automating Deployment with GitHub Actions:

   • Created a GitHub Actions workflow (.github/workflows/deploy.yml) to automate build, test, and deployment:

     name: Deploy to S3 and CloudFront
     on:
       push:
         branches: [main]
     jobs:
       deploy:
         runs-on: ubuntu-latest
         steps:
           - uses: actions/checkout@v3
           - name: Set up Node.js
             uses: actions/setup-node@v3
             with:
               node-version: "18"
           - run: npm install
           - run: npm run build
           - name: Deploy to S3
             uses: aws-actions/configure-aws-credentials@v2
             with:
               role-to-assume: ${{ secrets.AWS_ROLE_ARN }}
               aws-region: us-east-1
           - run: aws s3 sync ./out/ s3://greenleaf-app --delete
           - name: Invalidate CloudFront
             run: aws cloudfront create-invalidation --distribution-id ${{ secrets.CLOUDFRONT_DISTRIBUTION_ID }} --paths "/*"

   • Configured OIDC for secure AWS authentication, using an IAM role with s3:PutObject, s3:DeleteObject, and cloudfront:CreateInvalidation permissions.

   • Stored secrets in GitHub for the IAM role ARN and CloudFront distribution ID.

5. Managing Infrastructure with Terraform:

   • Organized Terraform code into modules for S3, CloudFront, and IAM.
   • Stored state in an S3 backend with DynamoDB for locking.
   • Automated infrastructure updates via a separate GitHub Actions workflow.

6. Security and Monitoring:

   • Enabled AWS WAF on CloudFront to protect against web exploits.
   • Set up CloudWatch alarms for S3 and CloudFront metrics.
   • Used AWS Config to enforce security compliance, such as bucket encryption.

Result

The deployment delivered transformative outcomes for GreenLeaf:

• 60% Performance Improvement: CloudFront caching reduced page load times by 60%, enhancing user experience in rural areas.
• 40% Cost Reduction: Serverless S3 and CloudFront cut infrastructure costs by 40% compared to the previous solution.
• 300% Traffic Increase: Handled peak season traffic surges without degradation.
• Deployment Automation: GitHub Actions reduced deployment time from hours to minutes, enabling weekly releases.
• Enhanced Security: OIDC and AWS WAF ensured a secure pipeline and application.
• Sustainability: Optimized infrastructure aligned with GreenLeaf’s mission.

This project underscores AMJ Cloud Technologies’ expertise in cloud-native solutions for agritech.

Technologies Used

• AWS S3: Hosted static assets.
• AWS CloudFront: Delivered content globally.
• AWS Route 53: Managed DNS.
• GitHub Actions: Automated deployments.
• Terraform: Defined infrastructure.
• AWS WAF: Secured the application.
• AWS CloudWatch: Monitored performance.
• AWS Config: Enforced compliance.

Key Takeaways

This project highlights the power of serverless architectures and IaC in agritech, enabling scalability, cost efficiency, and automation. AMJ Cloud Technologies continues to empower startups with innovative cloud solutions.

Architectural Diagram