Одним из выступленией, заинтересовавших меня на конференции Meet Magento Baltics, было выступление Sander Mangel о возможностях применения Vue Storefront (VSF) совместно с Magento.

PWA является перспективным направлением развития в web-разработке. Разработчики Magento 2 предлагают свой набор инструментов для создания современного, мобильно-ориентированного web-приложения, соответствующего традициям Magento, а разработчики Vue Storefront пошли по пути создания универсального фронта, способного через адаптеры взаимодействовать с различными backend'ами (Magento, WooComerce, Odoo, ...). Несколько месяцев назад я попробовал PWA Studio от Magento и пришёл к выводу, что решение пока что сыровато. Демо-версия Vue Storefront произвела на меня очень хорошее впечатление и мне захотелось пощупать это решение более интимно.

Отдаю должное ребятам, подготовившим демку для развёртывания — достаточно соответствовать условиям (иметь предустановленными nodejs, yarn, docker, ...), выбрать все опции по-умолчанию в процессе установки, и можно получить на собственной машине PWA, аналогичное демо-версии. Но мне же не нужно иметь ещё одну демку, мне нужно подключить Vue Storefront к уже имеющимся у меня проектам. И вот тут начинается засада.

У Magento-разработчиков хорошее представление о мире PHP и, как правило, не очень хорошее о мире nodejs. Вещи, тривиальные для второго мира, вызывают ступор у обитателей мира первого. Под катом я описал свой второй подход к развёртыванию Vue Storefront в попытке подключить его к имеющемуся у меня проекту. Сразу скажу, что результатом второго подхода у меня является приложение не подключенное ни к чему, но хотя бы загружающееся в браузер. Очень похоже, что мне придётся сделать ещё не один подход, пока я получу желаемый результат.

Цель

В процессе ознакомления с Vue Storefront мои цели становились всё скромнее и скромнее, пока я остановился на совсем скромной — собрать проект на отдельном сервере и загрузить приложение в браузер.

Рабочее окружение

Для чистоты экспериментов я использую IaaS. Из приведённых в таблице сервис-провайдеров я остановился на Exoscale (моя реферальная ссылка для регистрации). Минимальный депозит при регистрации 5 EUR (+ 21% европейский НДС), но этой суммы хватит, чтобы поиграться не один раз. Сервис действительно снимает деньги только за то, что ты используешь (вычислительные мощности, дисковое пространство, сеть).

Я игрался на small-версии Linux Ubuntu 18.04 LTS 64-bit (2x 2198 MHz CPU, 2 GB RAM, 10GB disk).

Подготовка рабочего окружения:

$ sudo -i
# apt update
# apt upgrade -y

Установка nodejs & npm:

# curl -sL https://deb.nodesource.com/setup_12.x | sudo -E bash -
# apt-get install -y nodejs
# node --version && npm --version
v12.13.0
6.12.0

Установка yarn:

# curl -sL https://dl.yarnpkg.com/debian/pubkey.gpg | apt-key add -
# echo "deb https://dl.yarnpkg.com/debian/ stable main" | tee /etc/apt/sources.list.d/yarn.list
# apt-get update && sudo apt-get install yarn
# yarn --version
1.19.1

Установка VSF

Предварительно устанавливаем PM2 и vue-storefront/cli:

# npm install pm2@latest -g
# pm2 --version
4.1.2
# npm install @vue-storefront/cli@latest -g

Выходим из root'а и создаём vue-storefront приложение версии 1.10.4 в ручном режиме:

# exit
$ cd ~
$ vsf init 
   Check avalilable versions
? Which version of Vue Storefront you'd like to install? Stable versions (recommended for production)
? Select specific version v1.10.4
? Would you like to use friendly installer or install Vue Storefront manually? Manual installation
   Copying Vue Storefront files

Переходим в корневой каталог приложения и создаём локальную конфигурацию:

$ cd vue-storefront/
$ cat > ./config/local.json 
{
    "server": {
      "host": "0.0.0.0"
    }
}

Базовая конфигурация находится в файле ./config/default.json. Она нас устраивает за исключением опции server.host, т.е. мы собираемся подключаться к серверу удалённо. Порт (server.port) я оставил по-умолчанию — 3000.

Сборка приложения

Вот тут пришлось поэкспериментировать, в конце концов пришёл к такой последовательности команд:

$ npm install
$ yarn install
$ yarn build
$ yarn upgrade # может и не нужно, но на предыдущем шаге попросили выполнить эту команду

Запуск и остановка приложения

$ yarn start
$ pm2 stop all

Подключение к приложению

Адрес приложения: http://xxx.xxx.xxx.xxx:3000/ В результате имеем сообщение об ошибке:

Заключение

Да, результат не слишком впечатляет, но зато обошлось и без особого magic'а. Redis, ElasticSearch, GraphQL — это всё настраивается в ./config/default.json и отсутствует на данный момент. А ещё должен быть vue-storefront-api и модуль для репликации данных между vue-storefront-api и Magento 2. Очень надеюсь, что я напишу ещё и про них.

Пока всё. Спасибо за прочтение.

Vue Storefront: Второй подход к снаряду