В этой статье я проведу вас через процесс развертывания приложения Vue Storefront 2 с интеграцией Shopify на Heroku за 5 минут!
Что такое Vue Storefront?
Vue Storefront — это молниеносная фронтенд-платформа для безголовой торговли. Повысьте производительность вашего сайта, сформируйте путешествие клиента и освободите творческий потенциал разработчика с помощью Vue Storefront — последнего фронтенда, который вам когда-либо понадобится.
Код
Первое, что нам нужно сделать для создания нового проекта Vue Storefront 2, это запустить CLI с помощью следующей команды:
npx @vue-storefront/cli init
CLI спросит вас об имени вашего проекта и желаемой интеграции.
Для этого руководства я выбрал Shopify, как показано на следующем снимке экрана:
Структура проекта должна выглядеть примерно следующим образом:
Теперь давайте установим все необходимые компоненты, выполнив команду :
yarn
И запустим проект в режиме разработки, чтобы проверить, работает ли он так, как ожидалось:
yarn dev
Когда вы откроете вкладку браузера с http://localhost:3001, вы должны увидеть следующий результат:
Последнее, что нам нужно изменить для того, чтобы наше приложение работало, это заменить переменную окружения с APP_PORT на PORT в nuxt.config.ts:
server: {
port: process.env.PORT || 3001, // Previously process.env.APP_PORT
host: '0.0.0.0'
},
Это позволит Heroku правильно собрать проект и обслуживать его на соответствующем порту.
Heroku
Чтобы развернуть Vue Storefront на Heroku, нам потребуется установить heroku CLI, который описан здесь.
Тем временем мы можем настроить необходимые переменные окружения для нашего экземпляра Heroku:
Я скопирую их ниже для более удобного тестирования:
BASE_URL=vsf-heroku.herokuapp.com
HOST=0.0.0.0
SHOPIFY_DOMAIN=vsf-next-pwa.myshopify.com
SHOPIFY_STOREFRONT_TOKEN=03f21475b97c18fa05c0ab452c368af4
Далее нам нужно войти в систему из нашего проекта Vue Storefront с помощью следующей команды:
heroku login
Давайте добавим удаленный git для heroku с именем, которое нам нравится:
heroku git:remote -a vsf-heroku
Наконец, если мы готовы, мы можем отправить новый код в ветку heroku:
git push heroku main
Если все прошло как ожидалось, то при посещении https://vsf-heroku.herokuapp.com/ мы должны увидеть следующий результат:
Summary
Отлично! Вы только что развернули и разместили приложение Vue Storefront 2 на Heroku! Сейчас я рекомендую вам ознакомиться с документацией Vue Storefront, чтобы узнать, как вы можете расширить свое приложение с помощью интеграций и модулей.