Развертывание приложения, использующего SupaBase как бэкенд

После подготовки бэкенд-серверов нужно развернуть приложение для дальнейшего подключения.

В рамках лабораторной работы будет развернут аналог Slack, написанный на NextJS. Приложение нужно запустить на отдельном сервере и опубликовать его в интернет через балансировщик нагрузки на порту 80.

Исходный код приложения на GitHub.

Запуск приложения

Перед запуском приложения, необходимо создать таблицу для хранения данных в SupaBase:

  1. Откройте интерфейс SupaBase:

    http://<IP адрес балансировщика>:3000/

  2. Нажмите на кнопку Default project.

  3. В левом меню выберите пункт SQL Editor.

    ../../_images/s__supabase-sql-editor.png

  4. Вставьте в редактор код:

    CREATE TABLE messages (
id bigint GENERATED BY DEFAULT AS IDENTITY PRIMARY KEY,
username VARCHAR NOT NULL,
text TEXT NOT NULL,
country VARCHAR,
is_authenticated BOOLEAN DEFAULT FALSE,
timestamp timestamp default now() NOT NULL
);

  5. Нажмите RUN.

  6. Включите оповещения в реальном времени для таблицы:

    alter publication supabase_realtime add table public.messages;

Запуск приложения на отдельном сервере

Запуск приложения будет проходить на фронтенд-сервере, созданном в начале лабораторной работы:

  1. Войдите в консоль управления Advanced:

  2. Чтобы открыть список сервисов, нажмите Service List.

  3. Перейдите в раздел Computing → Elastic Cloud Server.

  4. Выберите нужный сервер и нажмите Remote login. Откроется консоль сервера.

    1. Введите имя пользователя — root и нажмите Enter.

    2. Введите пароль, который был указан при создании виртуальной машины, и нажмите Enter.

  5. Для запуска приложения установите NodeJS. Команды нужно выполнять построчно:

    curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.38.0/install.sh | bash
source ~/.bashrc
nvm install v18.12.1
nvm use v18.12.1

  6. Клонируйте репозиторий с приложением.

    git clone https://github.com/shwosner/realtime-chat-supabase-react.git

  7. Установите зависимости.

    cd realtime-chat-supabase-react
npm install

  8. Настройте работу с SupaBase.

    Внимание

    Необходимо указать адрес подключения к SupaBase, а также токен для анонимного доступа, который должен совпадать со значением переменной ANON_KEY, который указан в файле .env при старте SupaBase.

    При выполнении команды поменяйте IP-адрес SupaBase на IP-адрес (EIP) балансировщика нагрузки.

    cat <<EOT >> .env
VITE_SUPABASE_KEY=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyAgCiAgICAicm9sZSI6ICJhbm9uIiwKICAgICJpc3MiOiAic3VwYWJhc2UtZGVtbyIsCiAgICAiaWF0IjogMTY0MTc2OTIwMCwKICAgICJleHAiOiAxNzk5NTM1NjAwCn0.dc_X5iR_VP_qT0zsiyj_I_OZ2T9FtRU2BBNWN8Bu4GE
VITE_SUPABASE_URL=http://<IP-адрес балансировщика>:8000
EOT

  9. Запустите приложение.

    npm run dev -- --port 80 --host 0.0.0.0
../../_images/s__front-app-start.png

Публикация приложения

Теперь нужно опубликовать приложение, чтобы оно было доступно из интернета.

В этой лабораторной работе публикация будет происходить по аналогии с SupaBase:

  1. Войдите в консоль управления Advanced:

  2. Чтобы открыть список сервисов, нажмите Service List.

  3. Выберите Network → Elastic Load Balance.

  4. Нажмите на ранее созданный балансировщик.

  5. На вкладке Backend Server Groups нажмите Add Backend Server Group.

  6. Заполните параметры группы серверов:

    • Name — название группы серверов.

    • Backend protocol — HTTP.

    • Port — 80.

  7. Нажмите ОК.

  8. В правой части экрана нажим Add.

  9. Выберите подсеть, созданную для сервера.

  10. Выберите нужный сервер.

  11. Нажмите Next.

  12. Укажите порт 80 и нажмите Finish.

  13. На вкладке Listeners нажмите Add Listener и заполните параметры:

    • Name — название создаваемого listener.

    • Frontend protocol — HTTP.

    • Port — 80.

  14. Нажмите Next.

  15. На открывшейся странице настройте группу серверов:

    • Backend Server Group — Use existing.

    • Выберите ранее созданную группу.

    • Нажмите Finish.

Проверьте работоспособность приложения, открыв в браузере адрес.

http://<IP-адрес балансировщика>/
../../_images/s__front-app-ready.png
Запустили Evolution free tier
для Dev & Test
Получить