Giter Club home page Giter Club logo

tacocat-gallery-hosting-aws's Introduction

tacocat-gallery-hosting-aws

This defines the hosting infrastructure for the static files of the Tacocat photo gallery website single page application (SPA) on AWS.

It does NOT contain the actual website itself. That's a separate project that deploys its contents to this infrastructure.

Key services

The SPA's static file assets are stored in an Amazon AWS S3 Bucket fronted by CloudFront.

SAM

This project uses the Amazon AWS Serverless Application Model (SAM). You can see all the assets defined in the standard template.yaml file.

It's a little weird to use SAM because there's no code, no lambdas. I'm using it because:

  • At some point this project might contain lambdas
  • Since every other project in the system uses SAM, it's easier to make them all similar

Prerequisites

  • The AWS Serverless Application Model Command Line Interface (SAM CLI)
  • Node.js 18 or higher

Install

  • Clone this project from github
  • There's no dependencies to install and no code to build

Deploy to dev

sam validate # validates any changes you've made to template.yaml
sam build # transforms the template
sam deploy # deploys the infrastructure to AWS

Then go to the project that builds the actual website assets and deploy it to this infrastructure.

Deploy to prod

sam deploy --config-env prod

This will change the name of the stack to tacocat-gallery-website-hosting-prod (look in samconfig.toml for how). Changing the name of the stack will create an entirely new stack with different resources.

Cleanup

To entirely delete the dev infrastructure from AWS:

sam delete

⚠️ ⚠️ There's a slight chance this might delete the prod infrastructure, though I think it'll hit dev.

tacocat-gallery-hosting-aws's People

Contributors

deanmoses avatar

Watchers

 avatar  avatar

tacocat-gallery-hosting-aws's Issues

Use CloudFront Function to rewrite SPA URLs rather than rely on 404 behavior

The Sveltekit SPA app has "virtual" URLs like /2001/12-31 that don't correspond to actual HTML files on disk. Currently, this is handled by CloudFront requesting the virtual asset from S3, getting a 404, and serving up the index.html fallback.

I'm wondering if it'd be faster to instead rewrite the URL using CloudFront Functions, so that all the virtual URLs ask for the right resource in the first place, no 404 needed.

I'm having a hard time imagining it will be faster because CloudFront will need to spin up the lambda. AWS claims CloudFront Functions are sub-millisecond but I just don't believe it.

So test it. Measure current performance, add the function, measure perf again.

Tell browser to permanently cache SPA .js & .css

Tell browsers to cache the SPA's .js and .css permanently. We can do this because the Sveltekit bundler creates versioned .js and .css bundles. It even very nicely sticks them in an /_app/immutable/ directory, so we can tell the CDN to permanently cache anything in that path.

index.html and image assets (like tacocat_logo.png and such) cannot be permanently cached:

  • The bundler does not do anything to version image assets, so they still need to be cached based on ETag.
  • index.html must be able to be re-retrieved by browsers -- it's the thing that contains the versions for all the other things. So it still needs to be cached based on ETag.

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.