Розгортання Full-Stack LMS на спільному хостингу та Render

Ми запустили production-застосунок на Node.js, React та PostgreSQL без використання VPS.

Ми створили повноцінну систему управління навчанням (LMS) для G3HUB. Стек включав: • Frontend: React 18, Vite та TailwindCSS • Backend: Node.js 20 та Express 5 • Database: PostgreSQL 15 через Supabase • ORM: Drizzle ORM

У нас не було хмарної VM або VPS. Ми мали лише акаунт спільного хостингу cPanel, на якому вже працював сайт на WordPress. Ось як ми змусили це працювати.

Розподіл інфраструктури Ми не могли запустити Node.js та PostgreSQL на одному сервері. Тому ми розділили застосунок на три сервіси: • Frontend: спільний хостинг cPanel (статичні файли) • API: Render (безкоштовний тариф) • Database: Supabase (безкоштовний тариф)

Найбільші перешкоди

1. Блокування бази даних Ми намагалися запустити Node.js API безпосередньо на cPanel. Це одразу провалилося. Провайдери спільного хостингу часто блокують вихідні з'єднання через порт 5432. Це означає, що ваш застосунок не може взаємодіяти із зовнішньою базою даних. Щоб вирішити цю проблему, ми перенесли API на Render.

2. Проблеми з монорепозиторієм Наш кодовий бази використовував pnpm workspaces. Коли ми зробили push на Render, збірка завершилася помилкою, оскільки Render не розпізнав наші локальні залежності воркспейсу. Рішення: ми використали esbuild, щоб зібрати все в один файл розміром 6,4 МБ. Ми замінили складний package.json мінімальною версією, що містила лише зовнішні залежності.

3. Війна з CORS та проксі Ми намагалися використовувати Apache mod_proxy для маршрутизації API-запитів з нашого домену на Render. Стався тайм-аут. Спільний хостинг часто обмежує цей модуль. Рішення: ми використали PHP cURL proxy. Оскільки фронтенд і PHP-скрипт знаходяться на одному домені, ми уникнули всіх проблем із CORS. PHP-скрипт непомітно перенаправляє запити на Render.

Поради щодо розгортання • Використовуйте PowerShell для збірки, а не Git Bash. Windows обробляє змінні оточення в Git Bash інакше. • Використовуйте пароль бази даних без спеціальних символів. Символи на кшталт @ або ! потребують URL-кодування та спричиняють помилки підключення. • Використовуйте UptimeRobot. Безкоштовний тариф Render "засинає" через 15 хвилин. Налаштуйте пінг на ваш health check endpoint, щоб підтримувати його в робочому стані.

Загальна вартість інфраструктури: $0/місяць.

Якщо у вас є бюджет, використовуйте VPS. Це позбавить вас усіх цих труднощів. Але якщо бюджет нульовий, креативна маршрутизація дозволяє створювати готові до продакшену застосунки.

Джерело: https://dev.to/oyohedmond/deploying-a-full-stack-lms-on-shared-hosting-render-free-the-hard-way-4ke0