How to set up NextJS + API Server on Vercel

[bryanveloso]

Continuing a discussion that @aeneasr and I had earlier. I'd like to workshop how one would use the Ory Proxy in a Vercel environment.

Currently, Altair deploys its Next.js frontend to Vercel. The frontend lives in a monorepo with our design system and other related packages. Here's a screenshot of the deployment settings from Vercel. It's pretty straightforward. Dependencies are built, and the main app is built and deployed.

Preview builds, like those generated alongside a pull request are hosted at [project]-[sha]-altair.vercel.app. The Next.js app is hosted at https://altair.tv. The backend may be hosted on a subdomain of altair.tv or a completely different domain altogether. My CTO has yet to decide that direction yet. 😄 We don't want to host it on the same domain, since we will in the future have a desktop app, a mobile app, etc.

We've talked about hosting the proxy somewhere in a container, but more specifics on that would be great.

[aeneasr]

Thank you for the explanation! So there are a few layers to this:

1. You are running an API server at a subdomain or the same domain. I strongly want to discourage you from using a third top level domain (e.g. notalatir.tv) because you will run into tons of issues with CORS, and in particular cookies as all browsers are cracking down on third-party (which would be the case here) cookies.
2. You are running the UI on Vercel
3. You have previews of the UI on Vercel

So in general you want to protect your API server from unauthorized access. The easiest way to do that is to use the Ory Proxy. Here, you can follow two patterns:

1. Run the proxy in a docker container "in front of" your API server so that Internet -> Proxy -> API Server. This does not work on platforms like Heroku as these do not expose the networking. In this scenario, you probably want the API Server to not be exposed to the internet, and only the proxy. So this would work well in Kubernetes or some other deployment infra that allows you to define what is exposed and what is not, and also allows you to route internet traffic.
2. Run the proxy within the docker container, basically having an init script for your docker container which is doing something along the lines of:

   #!/bin/bash
   ory proxy production --port 3000 http://localhost:3001 api.altair.tv &
   npm run start:server --port 3001
   

   The Dockerfile would kinda look like this:

   EXPOSE 3000
   ENTRYPOINT (bin/bash
   CMD ./path/to/script.sh
   

The third option would be for us (Ory) to provide the proxy as an NPM package which would allow you to do in your package.json

"scripts":{
  "start:proxy": "ory proxy ..."
}

Regardless of which path you chose, in your UI you would then set up the Ory SDK like so:

import {Configuration, V0Alpha1} from "@ory/client";
export const ory = new V0Alpha1(new Configuration({
  basePath: 'https://api.altair.tv/.ory'
  // DO NOT include the Ory Access Token here!
}))

I believe that should be all you need to get this to work on vercel.

On problem could be that the deployment previews do not work. The problem being that you are on separate domains - so altair.tv and vercel.app. I am not sure if vercel allows you to set up previews on your CNAME?

Theoretically, it is still possible to configure this to work cross-domains. But it is quite likely that it will break in a few months or a year when FireFox or Chrome bring out new cookie rules.

[aeneasr]

One more note - right now it will be difficult to get this working if your UI and your API are running on the same "level" of subdomain - so ui.altair.tv and api.altair.tv. That is because these are seen as two different TLDs, meaning that you need to set up CORS, need special handling of cookies, and more. So I recommend to have it on the same domain, or have the UI one "level" up!

[bryanveloso]

We can set up previews on a CNAME, but that's an upcharge AFAIK. It'll be worth the cost though if we can get this working. Also, we do plan to have the main front-end on the root domain, so that shouldn't be an issue. Thanks for the help so far @aeneasr!

[aeneasr]

No problem, let me know how it goes!