App Router: Настройка базы данных

Прежде чем продолжить работу над панелью управления, вам понадобятся данные. В этой главе вы настроите базу данных PostgreSQL, используя одну из интеграций маркетплейса Vercel. Если вы уже знакомы с PostgreSQL и предпочитаете использовать собственного провайдера базы данных, можете пропустить эту главу и настроить её самостоятельно. В противном случае продолжим!

Создание репозитория на GitHub

Для начала, если вы ещё не сделали этого, давайте загрузим ваш репозиторий на GitHub. Это упростит настройку базы данных и развертывание.

Если вам нужна помощь в настройке репозитория, ознакомьтесь с этим руководством на GitHub.

Полезно знать:

Вы также можете использовать другие git-провайдеры, такие как GitLab или Bitbucket.

Если вы новичок в GitHub, мы рекомендуем GitHub Desktop App для упрощения рабочего процесса разработки.

Создание аккаунта Vercel

Перейдите на vercel.com/signup для создания аккаунта. Выберите бесплатный тариф "hobby". Нажмите Continue with GitHub, чтобы связать ваши аккаунты GitHub и Vercel.

Подключение и развертывание проекта

Далее вы попадёте на экран, где можно выбрать и импортировать только что созданный репозиторий GitHub:

Скриншот панели управления Vercel, показывающий экран импорта проекта со списком репозиториев GitHub пользователя

Назовите проект и нажмите Deploy.

Экран развертывания с полем для имени проекта и кнопкой deploy

Ура! 🎉 Ваш проект теперь развернут.

Обзор проекта, показывающий имя проекта, домен и статус развертывания

После подключения репозитория GitHub, при каждом пуше изменений в ветку main, Vercel будет автоматически переразвертывать ваше приложение без дополнительной настройки. При открытии pull request'ов вы также получите URL-адреса для мгновенного предпросмотра, которые позволяют выявлять ошибки развертывания на ранних этапах и делиться предпросмотром проекта с членами команды для получения обратной связи.

Создание базы данных Postgres

Для настройки базы данных нажмите Continue to Dashboard и выберите вкладку Storage в панели управления проектом. Нажмите Create Database. В зависимости от времени создания вашего аккаунта Vercel, вы можете увидеть варианты Neon или Supabase. Выберите предпочитаемого провайдера и нажмите Continue.

Экран Connect Store с опцией Postgres, а также KV, Blob и Edge Config

Выберите регион и тариф хранилища, если требуется. Регион по умолчанию для всех проектов Vercel — Вашингтон (iad1), и мы рекомендуем выбрать его, если он доступен, чтобы уменьшить задержку при запросах данных.

Модальное окно создания базы данных с полями для имени базы данных и региона

После подключения перейдите на вкладку .env.local, нажмите Show secret и Copy Snippet. Убедитесь, что вы раскрыли секреты перед их копированием.

Вкладка .env.local с отображением скрытых секретов базы данных

Вернитесь в редактор кода и переименуйте файл .env.example в .env. Вставьте скопированное содержимое из Vercel.

Важно: Проверьте файл .gitignore и убедитесь, что .env находится в списке игнорируемых файлов, чтобы предотвратить раскрытие секретов базы данных при пуше на GitHub.

Заполнение базы данных

Теперь, когда база данных создана, давайте заполним её начальными данными.

Мы включили API, доступный в браузере, который запустит скрипт для заполнения базы данных начальным набором данных.

Скрипт использует SQL для создания таблиц и данные из файла placeholder-data.ts для их заполнения после создания.

Убедитесь, что локальный сервер разработки запущен командой pnpm run dev, и перейдите по адресу localhost:3000/seed в браузере. По завершении вы увидите сообщение "Database seeded successfully" в браузере. После завершения вы можете удалить этот файл.

Решение проблем:

Убедитесь, что вы раскрыли секреты базы данных перед копированием в файл .env.

Скрипт использует bcrypt для хеширования паролей пользователей. Если bcrypt несовместим с вашей средой, вы можете обновить скрипт, используя bcryptjs.

Если у вас возникли проблемы при заполнении базы данных и вы хотите запустить скрипт снова, вы можете удалить существующие таблицы, выполнив DROP TABLE tablename в интерфейсе запросов базы данных. Подробнее см. в разделе выполнение запросов ниже. Но будьте осторожны — эта команда удалит таблицы и все их данные. Это допустимо для примера приложения, так как вы работаете с тестовыми данными, но не следует выполнять эту команду в рабочем приложении.

Выполнение запросов

Давайте выполним запрос, чтобы убедиться, что всё работает как ожидается. Мы используем ещё один обработчик маршрута app/query/route.ts для запроса к базе данных. Внутри этого файла вы найдёте функцию listInvoices() со следующим SQL-запросом.

SELECT invoices.amount, customers.name
FROM invoices
JOIN customers ON invoices.customer_id = customers.id
WHERE invoices.amount = 666;

Раскомментируйте файл, удалите блок Response.json() и перейдите по адресу localhost:3000/query в браузере. Вы должны увидеть возвращённые значения amount и name счёта.