From 92a4fd48085ae79708e4ffdbd09bb602ab104066 Mon Sep 17 00:00:00 2001
From: Matchu <matchu1993@gmail.com>
Date: Wed, 12 May 2021 22:48:46 -0700
Subject: [PATCH] Use Fastly to cache our PNG assets from S3
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

We've been serving images directly from `impress-asset-images.s3.amazonaws.com` for a long time. While they serve with long-lasting HTTP cache headers, and the app requests them with the `updated_at` timestamp in the query string; each GET request still executes a full S3 ReadObject operation to get the latest version.

In the past, this was only relevant to users on Image Mode, not Flash Mode. But now that everyone's on Image Mode, this matters a lot more!

Now, we've configured a Fastly host at `impress-asset-images.openneo.net`, to sit in front of our S3 bucket. This should dramatically reduce the GET requests to S3 itself, as our cache warms up and gains copies of the most common asset PNGs.

That said, I'm not sure how much actual cost impact this change will have. Our AWS console isn't configured to differentiate cost by bucket yet—I've started this process, but it might take a few days to propagate. All I know is that our current costs are $35/mo data transfer + $20/mo storage, and that outfit images are responsible for most of the storage cost. I hypothesize that `impress-asset-images` is responsible for most of the reads and data transfers, but I'm not sure!

In the future, I think we'll be able to bring our AWS costs to near-zero, by:
- Obsolete `impress-asset-images`, by using the official Neopets PNGs instead, after the HTML5 conversion completes.
- Obsolete `impress-outfit-images`, by using a Node endpoint to generate the images, fronted by a CDN cache. (Transfer the actual data to a long-term storage backup, and replace the S3 objects with redirects, so that old S3 URLs will still work.)

I hope this will be a big slice of the costs though! 🤞

(Note: I'll be deploying this on a bit of a delay, because I want to see the DNS propagate across the globe before flipping to a new domain!)
---
 src/server/outfit-images.test.js    | 10 +++++-----
 src/server/types/AppearanceLayer.js |  2 +-
 2 files changed, 6 insertions(+), 6 deletions(-)

diff --git a/src/server/outfit-images.test.js b/src/server/outfit-images.test.js
index dbae5d4..e29f190 100644
--- a/src/server/outfit-images.test.js
+++ b/src/server/outfit-images.test.js
@@ -16,8 +16,8 @@ describe("renderOutfitImage", () => {
   it("renders the Moon and Stars Background and Green Leaf String Lights, as PNG", async () => {
     const image = await renderOutfitImage(
       [
-        "https://impress-asset-images.s3.amazonaws.com/object/000/000/006/6829/600x600.png",
-        "https://impress-asset-images.s3.amazonaws.com/object/000/000/036/36414/600x600.png",
+        "https://impress-asset-images.openneo.net/object/000/000/006/6829/600x600.png",
+        "https://impress-asset-images.openneo.net/object/000/000/036/36414/600x600.png",
       ],
       600
     );
@@ -40,14 +40,14 @@ describe("renderOutfitImage", () => {
   it("skips network failures, and logs an error", async () => {
     const image = await renderOutfitImage(
       [
-        "https://impress-asset-images.s3.amazonaws.com/object/000/000/006/6829/600x600.png",
-        "https://impress-asset-images.s3.amazonaws.com/object/000/000/000/00000000/600x600.png", // fake URL
+        "https://impress-asset-images.openneo.net/object/000/000/006/6829/600x600.png",
+        "https://impress-asset-images.openneo.net/object/000/000/000/00000000/600x600.png", // fake URL
       ],
       600
     );
     expect(image).toMatchImageSnapshot();
     expect(console.warn).toHaveBeenCalledWith(
-      `Error loading layer, skipping: Server responded with 403. (https://impress-asset-images.s3.amazonaws.com/object/000/000/000/00000000/600x600.png)`
+      `Error loading layer, skipping: Server responded with 403. (https://impress-asset-images.openneo.net/object/000/000/000/00000000/600x600.png)`
     );
   });
 });
diff --git a/src/server/types/AppearanceLayer.js b/src/server/types/AppearanceLayer.js
index 07f04e8..f003242 100644
--- a/src/server/types/AppearanceLayer.js
+++ b/src/server/types/AppearanceLayer.js
@@ -213,7 +213,7 @@ const resolvers = {
       const time = Number(new Date(layer.convertedAt));
 
       return (
-        `https://impress-asset-images.s3.amazonaws.com/${layer.type}` +
+        `https://impress-asset-images.openneo.net/${layer.type}` +
         `/${rid1}/${rid2}/${rid3}/${rid}/${sizeNum}x${sizeNum}.png?v2-${time}`
       );
     },