Развертывание SuperToken с помощью React и NodeJS на Vercel

В этом руководстве вы узнаете, как добавить аутентификацию SuperTokens в ваше приложение React и NodeJS и развернуть его на Vercel.

Начиная

Чтобы начать работу с SuperTokens, посетите [страницу руководств по рецептам] (https://supertokens.com/docs/guides) и выберите метод входа в систему, который вы хотите использовать для своего приложения. Выбрав руководство, следуйте разделу быстрой настройки или одному из разделов по интеграции с выбранным вами фреймворком.

У нас также есть сообщение в блоге о том, как интегрировать [пароль электронной почты + вход в социальную сеть с помощью экспресс и реакции] (https://supertokens.com/blog/how-to-set-up-social-and-email-password-login- with-reactjs), если это то, что вы ищете.

Реструктуризация вашего приложения для развертывания Vercel

После того, как вы выполнили базовую реализацию в вашей локальной системе, мы хотим сделать следующее, чтобы преобразовать ваше приложение, чтобы его можно было развернуть в Vercel:

1. Создайте папку api. Эта папка будет содержать логику API, которую мы можем развернуть на Vercel. Мы будем предоставлять точку входа API через файл index.js в этой папке.

1. Откройте index.js и экспортируйте app в конец файла, как показано ниже.

```javascript

модуль.экспорт = приложение;

Примечание. Мы развертываем нашу серверную часть как отдельное экспресс-приложение, а не с бессерверными функциями /pages/api, которые предоставляет Vercel. Если вы хотите выполнить развертывание с помощью /pages/api, вы можете ознакомиться с нашим руководством по интеграции среды nextJS, которое находится в руководстве по рецептам.

Измените конфигурацию appInfo, чтобы развертывание Vercel заработало

Чтобы ваш проект мог работать в рабочей среде и проверять сайты для Vercel, вам необходимо сделать так, чтобы websiteDomain и appDomain указывали на URL-адреса, сгенерированные Vercel. Рабочий URL-адрес всегда один и тот же для приложения, но URL-адрес проверки постоянно меняется. Чтобы позволить ему работать в этом динамическом состоянии, мы должны динамически установить значения apiDomain и websiteDomain.

На бэкенде

```js

информация о приложении = {

appName: "Мое приложение",

apiDomain: процесс.env.VERCEL_URL,

домен веб-сайта: process.env.VERCEL_URL,

апибасепас: "/апи/авторизация",

веб-сайтBasePath: "/auth",

Vercel предоставляет переменную среды — process.env.VERCEL_URL — для серверной части, которая равна URL-адресу проверки / URL-адресу производства (в зависимости от загруженного сайта). Поэтому мы используем это для динамической установки значений apiDomain и websiteDomain.

На фронтенде

Мы можем использовать window.location.origin, чтобы получить текущий загруженный URL-адрес и установить их в apiDomain и websiteDomain. Таким образом, даже если URL-адрес проверки продолжает меняться, он все равно будет указывать на текущий домен.

```js

информация о приложении = {

appName: "ТодоАпп",

apiDomain: окно.местоположение.происхождение,

веб-сайтДомен: window.location.origin,

апибасепас: "/апи/авторизация",

веб-сайтBasePath: "/auth",

Это работает только в том случае, если интерфейс и серверная часть вашего приложения имеют один и тот же домен. Если ваша серверная часть размещена в другом месте и вы используете Vercel только для внешнего интерфейса, обязательно измените apiDomain во внешнем и внутреннем интерфейсе, чтобы он указывал на ваш внутренний сервер. Однако в этом случае ваше приложение может не работать должным образом для проверки развертываний, поскольку ваш внутренний сервер не имеет возможности узнать, каким будет URL-адрес проверки внешнего интерфейса для каждого развертывания.

Обновление ПО промежуточного слоя CORS

Вам также необходимо обновить источник промежуточного программного обеспечения CORS с помощью переменной среды VERCEL_URL.

```js

приложение.использовать(

корс({

происхождение: процесс.env.VERCEL_URL,

allowHeaders: ['content-type', ...SuperTokens.getAllCORSHeaders()], учетные данные: правда,

Настройте Vercel и разверните

После обновления внутреннего и внешнего интерфейса вашего приложения создайте файл vercel.json в корневом каталоге вашего приложения, который будет указывать Vercel направлять весь трафик по пути /api/* на наш экспресс-сервер бэкенда:

```js

"переписывает": [{ "источник": "/api/(.*)", "назначение": "/api" }]

Наконец, чтобы развернуть приложение в Vercel, вам нужно запустить команду Vercel в корне вашего проекта:

``ш

версель

После развертывания вы сможете протестировать функциональность входа в систему по URL-адресу проверки и рабочему URL-адресу.

Демонстрационное приложение

У нас также есть [демонстрационное приложение на нашем GitHub] (https://github.com/supertokens/supertokens-auth-react/tree/master/examples/with-emailpassword-vercel), которое имеет вход в систему с паролем электронной почты с помощью экспресс и React, и настроен для работы с Vercel. Вы даже можете увидеть его [предварительный просмотр] (https://with-emailpassword-vercel-beryl.vercel.app/).

Написано людьми с SuperTokens — надеюсь, вам понравилось! Мы всегда доступны на нашем сервере Discord. Присоединяйтесь к нам, если у вас есть вопросы или вам нужна помощь.