Vercel에서 React 및 NodeJS로 SuperToken을 배포하는 방법

시작하기

Vercel 배포를 위한 애플리케이션 재구성

module.exports = app;

Note: We are deploying our backend as a standalone express app, and not with /pages/api serverless functions that Vercel provides. If you want to deploy using /pages/api, then you can check out our nextJS framework integration guide that's within the recipe guide.

Vercel 배포가 작동하도록 appInfo 구성 변경

백엔드에서

appInfo = {
    appName: "My App",
    apiDomain: process.env.VERCEL_URL,
    websiteDomain: process.env.VERCEL_URL,
    apiBasePath: "/api/auth",
    websiteBasePath: "/auth",
},

프론트엔드에서

appInfo = {
    appName: "TodoApp",
    apiDomain: window.location.origin,
    websiteDomain: window.location.origin,
    apiBasePath: "/api/auth",
    websiteBasePath: "/auth",      
},

This only works if the frontend and backend of your application have the same domain. If your backend is hosted elsewhere and you use Vercel only for the frontend, be sure to change the apiDomain on the frontend and backend to point to your backend server. In this case however, your app may not function properly for inspect deployments since your backend server has no way of knowing what the inspect URL of the frontend site would be on each deployment.

CORS 미들웨어 업데이트

app.use(
    cors({
        origin: process.env.VERCEL_URL,
        allowedHeaders: ['content-type', ...SuperTokens.getAllCORSHeaders()],credentials: true,
    })
);

Vercel 구성 및 배포

{
    "rewrites": [{ "source": "/api/(.*)", "destination": "/api" }]
}

vercel

데모 앱