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

    Одним из выступленией, заинтересовавших меня на конференции 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 произвела на меня очень хорошее впечатление и мне захотелось пощупать это решение более интимно.


    image


    Отдаю должное ребятам, подготовившим демку для развёртывания — достаточно соответствовать условиям (иметь предустановленными 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/ В результате имеем сообщение об ошибке:


    image


    Заключение


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


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

    AdBlock похитил этот баннер, но баннеры не зубы — отрастут

    Подробнее
    Реклама

    Комментарии 10

      –1
      PWA является перспективным направлением развития в web-разработке.

      Да? А на какой-то прошлогодней лекции про опыт внедрения vue говорили это прошлый век, тупиковая ветвь и уже забыто и похоронено.
        0

        vue != PWA

          0
          я знаю, там есть режим pwa
          0
          Ну если на какой-то лекции так говорили — значит так оно и есть. Автор, удаляй статью.
          0
          ребята, сегодня поговорим о vuestorefront. еще раз.
          вот моя реферальная ссылка
          ну, нишмагла я! на этом всё. до скорых встреч!


          разочаровашка какая-то…
            0

            А в чём криминал с реферальной ссылкой? Она у меня есть, я её вставил и подписал. Не нравится — не ходите.


            Я вчера весь день пытался разобраться, как подключить VSF к M2 и этот результат — лучшее, что у меня получилось. С учётом того, что я PHP-девелопер, а не nodejs-девелопер. Возможно кому-то мои заметки покажутся полезными, остальным — не очень. Я ещё до ката написал, что результат так себе, а вы всё равно умудрились очароваться. Разочарование — ваша расплата за это.


            Получится пройти дальше — напишу ещё. Нет — значит нет.

              0
              никакого криминала, просто в статье, кроме неё больше ничего нет. уж извините за прямоту :)
                0

                Отсутствие результата — тоже результат. Разработчики VSF сделали очень хорошую демку. Но демка — это демка, а вот при более глубоком погружении начинаются проблемы. В демке всё спрятано где-то глубоко внутри и информации об устройстве VSF явно недостаточно. Об этом моя публикация.


                Если у вас есть ссылки на ресурсы с пошаговым описанием интеграции VSF & M2 — буду премного благодарен (это тоже одна из целей данной публикации).


                Ну и конечно же реферальная ссылка — ради неё в общем-то всё и затевалось. Не забудьте на неё кликнуть.

            0

            Обычно, команда yarn build, формирует прод-версию приложения. Поэтому, она, скорее всего, лишняя. Pm2 stop all, тоже выглядит странно, т.к. до этого я не видел команды pm2 start

              0
              Обычно, команда yarn build, формирует прод-версию приложения. Поэтому, она, скорее всего, лишняя.

              Вполне возможно.


              т.к. до этого я не видел команды pm2 start

              Она где-то внутри yarn start.

            Только полноправные пользователи могут оставлять комментарии. Войдите, пожалуйста.

            Самое читаемое