Fix /api/outfitImage for Vercel

Sigh, okay, serverless functions limiting us again :p

Still, though, we are *much closer* to portability than our original CRA+Vercel stuff though!!
This commit is contained in:
Emi Matchu 2021-11-02 01:40:20 -07:00
parent f45ae20471
commit 7205455ccb
4 changed files with 18 additions and 19 deletions

View file

@ -1,12 +1,15 @@
This is a hack to work around a limitation deploying to Vercel! This is a hack to work around limitations deploying to Vercel!
https://github.com/vercel/vercel/issues/4739#issuecomment-926879578
API endpoints declared in here *won't* work during local development, but *will* - https://github.com/vercel/vercel/issues/4739#issuecomment-926879578
- https://github.com/vercel/vercel/issues/3460
API endpoints declared in here _won't_ work during local development, but _will_
work when deployed to production. work when deployed to production.
Putting the endpoint here code-splits it separately from the rest of the app Putting the endpoint here code-splits it separately from the rest of the app
bundle, so its large dependencies aren't grouped in with the others, and thereby bundle, so its large dependencies aren't grouped in with the others, and thereby
it just barely stays within the dependency bundle size of 50MB. it just barely stays within the dependency bundle size of 50MB. It also enables
the dependencies in our `vercel-build` step to deploy with the bundle.
If we move off Vercel, it'll be a good idea to move these endpoints back into If we move off Vercel, it'll be a good idea to move these endpoints back into
the /pages/api folder! the /pages/api folder!

View file

@ -39,12 +39,12 @@ import fetch from "node-fetch";
import gql from "graphql-tag"; import gql from "graphql-tag";
import { print as graphqlPrint } from "graphql/language/printer"; import { print as graphqlPrint } from "graphql/language/printer";
import connectToDb from "../../src/server/db"; import connectToDb from "../src/server/db";
import { renderOutfitImage } from "../../src/server/outfit-images"; import { renderOutfitImage } from "../src/server/outfit-images";
import getVisibleLayers, { import getVisibleLayers, {
petAppearanceFragmentForGetVisibleLayers, petAppearanceFragmentForGetVisibleLayers,
itemAppearanceFragmentForGetVisibleLayers, itemAppearanceFragmentForGetVisibleLayers,
} from "../../src/shared/getVisibleLayers"; } from "../src/shared/getVisibleLayers";
const VALID_LAYER_URLS = [ const VALID_LAYER_URLS = [
/^https:\/\/(impress-asset-images\.openneo\.net|impress-asset-images\.s3\.amazonaws\.com)\/(biology|object)\/[0-9]{3}\/[0-9]{3}\/[0-9]{3}\/[0-9]+\/(150|300|600)x(150|300|600)\.png(\?[a-zA-Z0-9_-]+)?$/, /^https:\/\/(impress-asset-images\.openneo\.net|impress-asset-images\.s3\.amazonaws\.com)\/(biology|object)\/[0-9]{3}\/[0-9]{3}\/[0-9]{3}\/[0-9]+\/(150|300|600)x(150|300|600)\.png(\?[a-zA-Z0-9_-]+)?$/,

View file

@ -2,18 +2,6 @@ module.exports = {
env: { env: {
PUBLIC_URL: "", PUBLIC_URL: "",
}, },
async rewrites() {
return [
{
source: "/outfits/:id/:size(150|300|600).png",
destination: "/api/outfitImage?size=:size&id=:id",
},
{
source: "/outfits/:id/v/:updatedAt/:size(150|300|600).png",
destination: "/api/outfitImage?size=:size&id=:id&updatedAt=:updatedAt",
},
];
},
async redirects() { async redirects() {
return [ return [
{ {

View file

@ -1,5 +1,13 @@
{ {
"routes": [ "routes": [
{
"src": "/outfits/(?<id>[^/]+)/(?<size>150|300|600)\\.png",
"dest": "/api/outfitImage.js?size=$size&id=$id"
},
{
"src": "/outfits/(?<id>[^/]+)/v/(?<updatedAt>[^/]+)/(?<size>150|300|600)\\.png",
"dest": "/api/outfitImage.js?size=$size&id=$id&updatedAt=$updatedAt"
},
{ {
"handle": "filesystem" "handle": "filesystem"
}, },