feat: proxy for mapbox

[ap0nia]

Summary

• Addresses Replace public mapbox token #718
• Secure the access token on the backend by proxying requests to MapBox.
• Cache the request for map tiles because that overwhelms the free tier allowance.

[EricPedley]

Works on localhost, but on staging, directions work but tiles don't 😭

[EricPedley]

My only theory rn is that staging didn't actually update the backend when I updated the tile proxy code, so I'm gonna try opening another PR on the same branch to get another fresh staging deployment

[EricPedley]

Interestingly, now it marks the staging deploy for this PR as In progress as well while #732 is deploying.

[EricPedley]

CORS 💀💀💀💀💀

[EricPedley]

Maybe not CORS 🤔

[EricPedley]

localhost response (13128-2) has a different size than the response from the backend on staging 🤔🤔🤔

[EricPedley]

When we're reading the image from mapbox, it's the correct size, but when we send the response, it's 20kb larger????

[EricPedley]

ok I kinda figured it out. The response is larger because it's base64 encoding the image. I manually verified this with base64 -w 0 and diff utilities on my machine, and had the suspicion this was the case after reading this: https://docs.aws.amazon.com/apigateway/latest/developerguide/api-gateway-payload-encodings.html and then opening both files in a text editor.

[EricPedley]

So I noticed that the request headers didn't have image/png explicitly under their Accept header, but it turns out we can't even change that via library code or anything because it's done from HTML img elements:

[EricPedley]

The base64 to binary conversion isn't being run as a response integration because we're using a lambda proxy.

Apparently not doing this will fix it.

But, this is done by default in the component we're using to wrap our lambda in an API gateway :(

[ap0nia]

FWIW, this is exactly what I was anticipating when you suggested proxying image requests from S3 lol. Dealing with encoding over Lambda is a headache, and why I like to have the browser do it when it fetches directly from S3 :^)

P.S. If it's possible, I'd like to have a solution that doesn't involve editing the devops, because I don't like complexity there 🤓

[EricPedley]

FWIW, this is exactly what I was anticipating when you suggested proxying image requests from S3 lol. Dealing with encoding over Lambda is a headache, and why I like to have the browser do it when it fetches directly from S3 :^)

This isn't even touching S3 yet, what I'm stuck on is literally just the thinnest proxy possible with no caching on our end.

P.S. If it's possible, I'd like to have a solution that doesn't involve editing the devops, because I don't like complexity there 🤓

I'm not sure this is possible with how the current solution is looking. One thing we could do is swap out our tile provider but keep the directions api integration, but I've tried ~20 tilesets so far and they all are worse than MapBox's. https://wiki.openstreetmap.org/wiki/Raster_tile_providers

Most of them have either not enough detail like the names of the buildings, or too much extraneous overlay info.

[EricPedley]

IT WORKS NOW!!!!!

[EricPedley]

SO post that did the trick:
https://stackoverflow.com/a/47684868

[EricPedley]

@ap0nia can you take a look and lmk if it looks good? Since it's your PR I can't request your review (maybe you can self-request?) Worst-case I can just override and merge.

[MinhxNguyen7]

Holy shit you're actually doing this

[ap0nia]

I think everything looks reasonable 🅱️

[EricPedley]

Now we hope and pray that nothing different about prod breaks CORS or anything 🙏