Развертывание приложения, использующего 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 перейдите к разделу Computing → Elastic Cloud Server.

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

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

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

  3. Для запуска приложения установите 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
    
  4. Клонируйте репозиторий с приложением.

    git clone https://github.com/shwosner/realtime-chat-supabase-react.git
    
  5. Установите зависимости.

    cd realtime-chat-supabase-react
    npm install
    
  6. Настройте работу с 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
    
  7. Запустите приложение.

    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 protocolHTTP.

    • Port — 80.

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

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

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

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

  11. Нажмите Next.

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

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

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

    • Frontend protocolHTTP.

    • Port — 80.

  14. Нажмите Next.

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

    • Backend Server GroupUse existing.

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

    • Нажмите Finish.

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

http://<IP-адрес балансировщика>/
../../_images/s__front-app-ready.png
Масштабная конференция
GoCloud 2024:
облачные грани будущего