Логотипи Supabase та Render
Як початківці-розробники, ми працюємо над низкою невеликих проєктів на своїх комп'ютерах і публікуємо наші улюблені на Github. Але тепер ми хочемо йти трохи далі. Крок за кроком — і я спробую допомогти вам розгорнути ваше перше API. Прощавай дорогий localhost:3000!
Побудова та хостинг бази даних Postgres за допомогою Supabase
У цьому посібнику ми будемо використовувати Supabase для створення та хостингу нашої бази даних. Supabase дозволяє швидко створювати PostgreSQL бази даних. Все, що вам потрібно знати, є в документації тут.
Після створення нашого облікового запису в Supabase, давайте створимо новий проєкт та заповнимо необхідні поля.
Зверніть увагу: залиште значення за замовчуванням такими, як вони є.
Зачекайте кілька секунд, поки Supabase налаштує ваш проєкт. Як тільки ми побачимо NANO біля [Назви] Проєкту, можна переходити до наступного кроку!
Створення нових таблиць…
Supabase надає готовий інструмент для створення таблиць, але оскільки ми хочемо зрозуміти наш код, щоб стати хорошими розробниками, ми створимо наші перші таблиці за допомогою SQL скрипта. Для цього невеликого проєкту ми створимо:
- таблицю country, яка буде містити країни (<= ніколи ще щось не було так логічно)
- таблицю city, яка буде містити наші улюблені міста, їх регіон/штат та країну, в якій вони знаходяться (посилаючись на country)
Натискаємо на SQL Editor🖱️
Підпис з панелі керування проєктом.
Скопіюйте та вставте наступний скрипт:
CREATE TABLE country (
id SERIAL PRIMARY KEY,
name text NOT NULL,
created_at TIMESTAMP,
updated_at TIMESTAMP
);
CREATE TABLE city (
id SERIAL PRIMARY KEY,
name text NOT NULL,
region text,
country_id INT NOT NULL,
created_at TIMESTAMP,
updated_at TIMESTAMP,
FOREIGN KEY (country_id) REFERENCES country(id) ON DELETE CASCADE
);
Натискаємо Run. Консоль повинна показати щось на зразок "Success. No rows returned". Чудово, наші таблиці створено!
… і заповнюємо їх!
Очистимо SQL Editor.
Скопіюйте та вставте наступний скрипт:
INSERT INTO country (name) VALUES
('Republic of France'),
('United States of America');
INSERT INTO city (name, region, country_id) VALUES
('Caen', 'Normandie', 1),
('Dives-sur-Mer', 'Normandie', 1),
('New York', 'New York', 2),
('Los Angeles', 'California', 2),
('Seattle', 'Washington', 2);
Натискаємо Run. Консоль повинна показати щось на зразок "Success. No rows returned". Чудово, наші таблиці заповнено!
Вітаємо! Тепер ми хостимо наші перші дві PostgreSQL таблиці на Supabase 🚀 Як перевірити? Повертаємося до Table Editor через меню зліва на панелі керування. Наші дві новостворені таблиці вже тут разом з даними, які ми їм надали!
Редагування рядків та стовпців
Хоча не рекомендується, Supabase дозволяє редагувати значення рядків та стовпців у ваших таблицях.
Натискайте на стрілку вниз для редагування стовпця або ⚠️ двічі клацніть на поле для редагування вмісту ⚠️
Для маніпулювання цим я рекомендую змінити тип timestamp, який ми присвоїли колонкам ‘created_at’ та ‘updated_at’, на timestampz (як рекомендовано Supabase).
Час на каву, чи не так? ☕️
Швидкий огляд нашої роботи
Митці, якими ми є, мають право перевірити свою нову роботу. Supabase це знає. Знайдіть і натискайте на Database в лівому меню. Ось так, Пікассо! 🎨
Тепер нам потрібен простий код API для керування всім цим.
Feel free to get the repo I’ve made for you! Перевірте репозиторій тут 🚀
Хостинг нашого API коду на Render
Ми могли б вибрати хостинг нашої бази даних на Render, оскільки він пропонує широкий вибір варіантів хостингу. Але крута річ в тому, що Render не турбується, де хоститься ваша база даних.
Створіть акаунт на Render. Рекомендую підключити ваш акаунт Github, щоб легше мати доступ до ваших репозиторіїв. Як тільки це буде зроблено, можна переходити до наступного кроку.
Натискайте на + New > Web Service > Виберіть репозиторій, який ви хочете, щоб Render хостив. Натискайте Connect.
Налаштування
Render автоматично розпізнає, що ми використовуємо Node, тому налаштує кілька параметрів для нас. Перевірте та заповніть відсутні необхідні поля.
Примітка: з безкоштовним акаунтом можна хостити лише 1 проєкт і 2 середовища одночасно.
У випадку, якщо ви вибрали мій репозиторій, команди для побудови та запуску вже прописані у файлі package.json на корені проєкту.
package.json
Змінні середовища
Render просить нас надати змінні середовища. Це логічно, оскільки наш репозиторій не надає їх, оскільки він ігнорується git. Render має записати їх самостійно.
Render пропонує два способи зробити це: або ми вручну пишемо наші змінні середовища, або надаємо вміст нашого .env файлу. Вибирайте той, який вам зручніший. Я вибираю другий спосіб, щоб уникнути будь-яких пропусків.
⚠️ ВАЖЛИВО ⚠️ Render працює лише з IPv4. Поверніться до Supabase, перейдіть до вашого проєкту. Знайдіть і натискайте Connect вгорі панелі керування. Скопіюйте рядок підключення з Transaction pooler. Поверніться в Render і вставте цей рядок у поле змінних середовища.
Слідуєте за моїм репозиторієм? Ви МАЄТЕ називати змінну PGURL ось так. В іншому випадку назвіть її так, як ви її ввели у вашому проєкті._
Потім надайте змінну PORT. Згідно з документацією Render, "Типове значення PORT — це 10000 для всіх веб-сервісів Render".
Слідуєте за моїм репозиторієм? Ви МАЄТЕ називати змінну PORT ось так. В іншому випадку назвіть її так, як ви її ввели у вашому проєкті.
Натискайте Deploy.
Оглядайте журнали під час виконання
Готово! Зачекайте кілька секунд і насолоджуйтесь цим вікном:
Успішне завершення цього посібника буде виглядати так:
ВІТАЄМО, ВАШЕ API ДОСТУПНЕ 🍾
Сподіваюся, цей посібник допоможе вам зрозуміти, як хостити вашу першу базу даних та API за допомогою Supabase та Render. Повідомте, чи скористалися ви цим маленьким посібником, чи сподобалося вам, чи стикнулися з якимись проблемами. Ви можете прокоментувати прямо тут або приєднатися до обговорення на Github репозиторії.
Дякую, що дочитали до кінця 🙏🏻
Перекладено з: Juniors , here’s how to host your first API (with a little help from Supabase & Render)