“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
- Build Site
- Deploy on S3
- 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
References:
S3 Setup Part1 –https://community.aws/content/2cKdKbYy9fz0hIakU5tqf42siAA/hosting-my-static-website-in-an-aws-s3-bucket-part-1
S3 Setup with CF Part2 – https://community.aws/content/2gkeMe8iWRTbsV0toyhgGv5NgiO/hosting-my-static-website-in-an-aws-s3-bucket-cloudfront-part-2
CI/CD – https://medium.com/@thecloudfairy/learn-about-set-up-ci-cd-using-bitbucket-pipelines-100c7bc4d2f1