Эта статья является гостевой серией великого Ekene Eze . Он возглавляет команду опытных разработчиков в Flutterwave и написал это сообщение в блоге через программу Write for the Community.
В этой серии статей вы познакомитесь с процессами настройки вашего собственного приложения для заказа еды и, как следствие, любого приложения для электронной коммерции с использованием современных инструментов разработки, таких как Strapi, Gridsome и Snipcart.
Содержание: 1. Часть 1 - Создание приложения Strapi и создание продуктов 2. Часть 2 - Настройка проекта Gridsome 3. Часть 3 - Использование продуктов с помощью Gridsome и GraphQL 4. Часть 4 - Создание отдельных представлений продукта с помощью шаблонов Gridsome 5. Часть 5 - Реализация корзины и оформления заказа с помощью Snipcart 6. Часть 6 - Развертывание приложений
Репо:
- Gridsome Frontend - https://github.com/kenny-io/mealzers-frontend
- Бэкэнд Strapi - https://github.com/kenny-io/mealz
В прошлой части мы добавили функции корзины и оформления заказа в приложение Gridsome с помощью Snipcart. Можно с уверенностью сказать, что пользователи могут размещать заказы на наши продукты, и вы также можете управлять этими заказами на панели инструментов Snipcart. В этой части мы рассмотрим процесс развертывания приложений Strapi и Gridsome.
Развертывание приложения Strapi
Различные хостинговые платформы поддерживают Strapi. В рамках этой серии я разверну на Heroku. Следующие шаги проведут вас через тот же процесс развертывания приложения Strapi на Strapi. Это заняло у меня немного времени, чтобы понять, но хорошая новость в том, что я прошел все этапы процесса, так что вам не придется.
Настройка производственной среды.
Первое, что вам нужно сделать, это разделить ваши среды. Я думаю, это очень важно отметить. На данный момент, если вы снова посмотрите на структуру папок вашего приложения Strapi, config каталог выглядит следующим образом:
database.js Файл здесь локальная база данных , которая обрабатывает все данные в то время как в процессе разработки. Теперь, когда мы выполняем развертывание в производственной среде, нам нужно настроить производственную базу данных. В документации к новой бета-версии Strapi используется структура вроде config/environment/production/database.json. Мы примем эту структуру, чтобы лучше различать наши конфигурации разработки и производства. Затем реорганизуйте файловую систему и обновите configкаталог, чтобы он выглядел так:
environment Каталог счетов для производства , так и развития. Это также позволит вам добавить больше окружений в будущем, например, staging или pilot.
Затем обновите config/environment/production/database.js файл приведенным ниже фрагментом:
// src/config/environment/production/database.js
const parse = require("pg-connection-string").parse;
const config = parse(process.env.DATABASE_URL);
module.exports = ({ env }) => ({
defaultConnection: "default",
connections: {
default: {
connector: "bookshelf",
settings: {
client: "postgres",
host: config.host,
port: config.port,
database: config.database,
username: config.user,
password: config.password,
},
options: {
ssl: false,
},
},
},
});
Здесь стоит упомянуть, что мы используем Postgres для удовлетворения потребностей нашей производственной базы данных. Это просто личное предпочтение, Strapi поддерживает множество других параметров базы данных, которые вы можете проверить здесь.
Настроить Heroku
После этого создайте учетную запись Heroku, если у вас ее еще нет. Когда вы закончите, создайте новое приложение Heroku mealzers-backend
Затем перейдите на вкладку «Ресурсы», Add-on найдите Postgres Heroku надстройку и установите ее в свое приложение. После установки Postgres перейдите к настройкам и откройте переменные конфигурации следующим образом:
Что вам нужно сделать дальше, так это скопировать DATABASE_URL и разделить его для соответствия тем же переменным, которые содержатся в вашем config/environment/production/database.json файле. Согласно моему проекту (запись экрана выше), это мой:
DATABASE_URL = postgres://yaygszolwrqhpr:f075dae0a697e565545ac15003064f9814f2e2c584969804a2de56f1969ebbdc@ec2-52-73-199-211.compute-1.amazonaws.com:5432/d2s3u3oalapsgc
Это значит, что -
DATABASE_HOST = ec2-52-73-199-211.compute-1.amazonaws.com
DATABASE_PORT = 5432
DATABASE_NAME = d2s3u3oalapsgc
DATABASE_USERNAME = yaygszolwrqhpr
DATABASE_PASSWORD = f075dae0a697e565545ac15003064f9814f2e2c584969804a2de56f1969ebbdc
NODE_ENV = production
В разделе Heroku Config Vars добавьте указанные выше ключи и значения из своих собственных DATABASE_URL. Это позволяет Strapi подключиться к этой базе данных. Когда вы закончите, ваши переменные конфигурации должны выглядеть так:
На данный момент мы все настроены как на Heroku, так и на Postgres.
Разверните приложение Strapi на Heroku
Сначала установите Heroku CLI локально. Это позволит вам запускать herokuкоманды на вашем терминале. Затем инициализируйте репозиторий Git и зафиксируйте проект с помощью следующих команд:
cd mealzers
git init
Обратите внимание, что указанная выше команда должна выполняться в корневом каталоге проекта Strapi. Название, которое мы дали проекту Strapi в Части 1, является, mealzers следовательно, приведенной выше командой.
Чтобы подключить репозиторий Git, который мы только что инициализировали с помощью нашего приложения Heroku, выполните следующую команду:
heroku git:remote -a mealzers-backend
mealzers-backend - это название созданного нами приложения Heroku.
Зафиксируйте все недавние изменения, которые мы внесли в приложение Strapi (в основном, файлы и папки с настройками базы данных) с помощью следующей команды:
git add .
git commit -m "Set up postgres database for prod"
Обязательно опустите файлы package-lock.json или yarn.lock, поскольку они могут вызвать проблемы с развертыванием, если они есть.
Наконец, чтобы развернуть приложение на Heroku, мы запускаем следующую команду:
git push heroku master
Это должно развернуть приложение и вернуть рабочий URL-адрес в журналах следующим образом:
Если вы перейдете к https://mealzers-backend.herokuapp.com/admin маршруту, указанному выше, вы сможете создать учетную запись администратора и настроить больше продуктов, которые будут храниться в вашей производственной базе данных. Вы также можете установить разрешения для пользователей, как мы это делали при разработке, и попробовать еще раз.
Развертывание приложения Gridsome
Перед развертыванием существующего приложения Gridsome необходимо выполнить несколько обновлений, чтобы убедиться, что развертывание не завершится ошибкой. Вам нужно обновить изображения в components/Products.vue и в templates/Product.vue. Замените все вхождения:
http://localhost:1337${edge.node.image}
с участием
https://mealzers-backend.herokuapp.com${edge.node.image}
Таким образом, мы читаем изображения с живого сервера.
Моя предпочтительная платформа для развертывания статических сайтов - Netlify. За три простых шага вы можете настроить и запустить свои статические сайты на Netlify за считанные минуты.
- Подключите свой репозиторий
- Добавьте настройки сборки вашего проекта
- Разверните свой сайт.
Подключите свой репозиторий
Первое, что вам нужно сделать, это отправить приложение Gridsome в репозиторий Git. Я хочу слепо предположить, что вы можете сделать это самостоятельно, чтобы мы могли двигаться дальше и подключиться к Netlify. Однако ничего страшного, если вы не можете, вот вам краткое руководство. Я уже разместил свое приложение Gridsome на Github здесь:
Затем создайте бесплатную учетную запись Netlify здесь. Когда вы закончите, войдите в свою панель управления и создайте новый сайт из Git.
Если у вас есть новая учетная запись Netlify, ваша панель управления, вероятно, на этом этапе будет выглядеть иначе, но вы сможете легко найти кнопку для создания нового сайта из Git.
Здесь выберите Github в качестве предпочтительного поставщика (поскольку наш проект Gridsome размещен на Github). Затем завершите подключение к Github, а затем найдите репозиторий, содержащий проект, который вы хотите развернуть. Netlify не будет иметь доступа к какому-либо репозиторию по умолчанию, поэтому вам необходимо авторизовать его, настроив Netlify на Github.
Подтвердите запросы входа на Github и выберите репозиторий, который вы хотите подключить к Netlify. В этом случае я mealzers-frontend выбираю репозиторий, в котором есть исходный код моего проекта Gridsome.
Как только это будет сделано, нажмите кнопку «Сохранить», и вы будете перенаправлены на Netlify, где теперь должен появиться выбранный репозиторий. Щелкните по нему, чтобы продолжить.
Отсюда вам будет представлена страница для настройки параметров сборки. Вы сообщаете Netlify, что делать для развертывания сайта для вас, предоставляя команду сборки и каталог публикации, запрошенные на следующем шаге:
Нажмите кнопку «Развернуть сайт» и вуаля, ваш сайт будет развернут. Netlify развернет ваше приложение Gridsome и предоставит вам действующий URL-адрес, по которому вы можете получить к нему доступ. Что еще? вы можете изменить URL-адрес по умолчанию на любое имя по вашему выбору.
Вывод
На этом мы подошли к завершению этой серии. В первой части мы настроили приложение Strapi и создали несколько продуктов. Во второй части мы настроили приложение Gridsome и подготовили его для использования продуктов, которые мы создали в части 1 . Переходя к третьей части , мы использовали продукты Strapi и отобразили их в приложении Gridsome, где пользователи могут взаимодействовать с ним. В четвертой части мы добавили просмотры страниц одного продукта, чтобы показать больше информации об отдельных продуктах. В пятой части мы добавили в приложение функции корзины и оформления заказа, чтобы пользователи могли размещать заказы на продукты. Наконец, в этой части мы развернули приложение Strapi на Heroku и развернули приложение Gridsome на Netlify.