Розгортання Full-Stack застосунків на безкоштовній інфраструктурі

Ми створили систему управління навчанням (LMS) для G3HUB. Стек: React 18, Node.js 20 та PostgreSQL 15.

У нас не було VPS. У нас не було бюджету на хмарні сервіси. У нас був лише акаунт спільного хостингу cPanel і дедлайн.

Більшість туторіалів припускають, що у вас є виділений сервер. Нам довелося шукати спосіб налаштувати взаємодію різних сервісів за $0 на місяць.

Архітектура

• Frontend: React + Vite (розміщено на cPanel) • Backend: Node.js + Express (розміщено на Render Free Tier) • Database: PostgreSQL (розміщено на Supabase Free Tier)

Перешкоди та рішення

1. Спільний хостинг блокує бази даних Ми намагалися запустити Node.js API на cPanel. Це не вдалося, оскільки хостинг блокував вихідні з'єднання з PostgreSQL через порт 5432. Рішення: Перенести API на Render. Render дозволяє такі з'єднання.

2. Помилки розгортання монорепозиторію Render не міг розпізнати залежності нашого pnpm workspace, такі як @workspace/db. Рішення: Ми використали esbuild, щоб зібрати все в один файл розміром 6,4 МБ. Потім ми використали мінімальний package.json лише із зовнішніми залежностями. Це зробило API автономним.

3. Проблема CORS та проксі Apache mod_proxy на спільному хостингу був обмежений. Ми не могли легко перенаправляти API-виклики з фронтенду на Render. Рішення: Ми використали PHP cURL проксі. Фронтенд викликає локальний PHP-скрипт. PHP-скрипт пересилає запит на Render. Це дозволяє обійти проблеми з CORS та обмеження брандмауера.

4. Помилки SSL-сертифікатів Supabase connection pooler спричиняв помилки SSL у Node.js. Рішення: Ми встановили змінну оточення NODE_TLS_REJECT_UNAUTHORIZED=0.

Розподіл витрат

• cPanel: $0 (вже є) • Render: $0 (Free Tier) • Supabase: $0 (Free Tier) • Разом: $0/місяць

Висновки для інженерів

  • Тестуйте вихідне з'єднання на ранніх етапах. Перевірте, чи може ваш сервер насправді зв'язатися з базою даних, перш ніж писати код.
  • Використовуйте esbuild для монорепозиторіїв. Один зібраний файл розгортати набагато простіше, ніж складну структуру папок.
  • Використовуйте UptimeRobot. Безкоштовний рівень Render "засинає" через 15 хвилин. Простий пінг підтримує його в робочому стані.
  • Уникайте спеціальних символів у паролях до баз даних. Використання @ або ! у рядку підключення створює нескінченну головну біль із URL-кодуванням.

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

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

Додаткова спільнота для навчання: https://t.me/GyaanSetuAi