“Choosing the Right Rendering Strategy for Your Frontend” where I recommend S3 with CloudFront which offers unmatched scale, elasticity, performance, and security. We achieved the optimal solution in terms of serving sites but after that, we started looking into CI/CD, again there are multiple options depending on requirements but we selected GitLab which provides seamless CI/CD. Here I am sharing the same experience with BitBuckt, the flow is the same, just a different tool.

Once we host our codebase on GitLab/BitBucket and tag a release, CI/CD built site, then deploy on the S3 bucket with CloudFront in front. so the Flow is

  1. Build Site
  2. Deploy on S3
  3. Invalidate CF cache
YML for CI/CD

A simple .yml for building and deploying static NuxtJS on S3 and invalidating the cache. Each setup is very basic and descriptive

image: node:latest

pipelines:
  branches:
    master:
      - step:
          name: Build Sites
          caches:
            - node
          script:
            - echo "Starting build process..."
            - npm install
            - npm run generate
          artifacts:
            - dist/**
            
      - step:
          name: Deploy to S3
          image: amazon/aws-cli:latest
          script:
            - pipe: atlassian/aws-s3-deploy:1.6.0
              variables:
                AWS_ACCESS_KEY_ID: $AWS_ACCESS_KEY_ID
                AWS_SECRET_ACCESS_KEY: $AWS_SECRET_ACCESS_KEY
                AWS_DEFAULT_REGION: 'us-east-1'
                S3_BUCKET: '{BUCKET NAME}'
                LOCAL_PATH: 'dist'

      - step:
          name: Invalidate CloudFront Cache
          image: amazon/aws-cli:latest
          script:
            - echo "Invalidating CloudFront cache..."
            - aws cloudfront create-invalidation --distribution-id $CLOUDFRONT_DISTRIBUTION_ID --paths "/*"

 

This is what it looks like on BitBucket