outfit-images: fix prod-only bugs

We needed an extra build step to get node-canvas working! And `setHeader` is fluent in dev, but not in prod? Go figure!

api/outfitImage.js

@@ -16,20 +16,15 @@ const VALID_LAYER_URLS = [
 
 async function handle(req, res) {
   if (!req.query.layerUrls) {
-    return res
+    res.setHeader("Content-Type", "text/plain");
-      .status(400)
+    return res.status(400).send(`Missing required parameter: layerUrls`);
-      .setHeader("Content-Type", "text/plain")
-      .send(`Missing required parameter: layerUrls`);
   }
 
   const layerUrls = req.query.layerUrls.split(",");
 
   for (const layerUrl of layerUrls) {
     if (!VALID_LAYER_URLS.some((pattern) => layerUrl.match(pattern))) {
-      return res
+      return res.status(400).send(`Unexpected layer URL format: ${layerUrl}`);
-        .status(400)
-        .setHeader("Content-Type", "text/plain")
-        .send(`Unexpected layer URL format: ${layerUrl}`);
     }
   }
 
@@ -38,10 +33,8 @@ async function handle(req, res) {
     imageResult = await renderOutfitImage(layerUrls, 150);
   } catch (e) {
     console.error(e);
-    return res
+    res.setHeader("Content-Type", "text/plain");
-      .status(400)
+    return res.status(400).send(`Error rendering image: ${e.message}`);
-      .setHeader("Content-Type", "text/plain")
-      .send(`Error rendering image: ${e.message}`);
   }
 
   const { image, status } = imageResult;
@@ -51,9 +44,8 @@ async function handle(req, res) {
     // layers are ~immutable too, and that our rendering algorithm will almost
     // never change in a way that requires pushing changes. If it does, we
     // should add a cache-buster to the URL!
-    res
+    res.setHeader("Cache-Control", "public, max-age=604800, immutable");
-      .status(200)
+    res.status(200);
-      .setHeader("Cache-Control", "public, max-age=604800, immutable");
   } else {
     // On partial failure, we still send the image, but with a 500 status. We
     // send a long-lived cache header, but in such a way that the user can
@@ -61,10 +53,12 @@ async function handle(req, res) {
     // and we don't send `immutable`, which would save it even across reloads.)
     // The 500 won't really affect the client, which will still show the image
     // without feedback to the user - but it's a helpful debugging hint.
-    res.status(500).setHeader("Cache-Control", "private, max-age=604800");
+    res.setHeader("Cache-Control", "private, max-age=604800");
+    res.status(500);
   }
 
-  return res.setHeader("Content-Type", "image/png").send(image);
+  res.setHeader("Content-Type", "image/png");
+  return res.send(image);
 }
 
 export default async (req, res) => {

package.json

@@ -47,6 +47,7 @@
   "scripts": {
     "start": "yarn build-cached-data && react-scripts start",
     "build": "yarn build-cached-data && react-scripts build",
+    "vercel-build": "yum install libuuid-devel libmount-devel && cp /lib64/{libuuid,libmount,libblkid}.so.1 node_modules/canvas/build/Release/",
     "test": "react-scripts test --env=jsdom",
     "eject": "react-scripts eject",
     "mysql": "mysql --host=impress.openneo.net --user=$(dotenv -p IMPRESS_MYSQL_USER) --password=$(dotenv -p IMPRESS_MYSQL_PASSWORD) --database=openneo_impress",