在参加Magento波罗的海会议上令我感兴趣的演讲之一是Sander Mangel谈及与Magento一起使用Vue Storefront （VSF）的可能性。

PWA是Web开发中一个有希望的发展领域。 Magento 2开发人员提供了自己的工具集，用于创建符合Magento传统的现代，面向移动的Web应用程序，Vue Storefront开发人员已采取了创建可通过适配器与各种后端进行交互的通用前端（Magento，WooComerce，Odoo等）的方法。 ..）。 几个月前，我尝试了Magento的PWA Studio，得出的结论是该解决方案仍然很潮湿。 Vue Storefront 的演示版给我留下了很好的印象，我想更亲密地感受到这个解决方案。

我向准备部署演示的家伙致敬-它足以满足条件（已经预安装了nodejs，yarn，docker等），在安装过程中默认选择了所有选项，您可以在与演示版本类似的PWA机器上使用。 但是我不需要再进行演示，我需要将Vue Storefront连接到我已有的项目。 埋伏开始了。

Magento开发人员对PHP的世界有很好的了解，并且通常对Node.js的世界不太了解。 对于第二世界来说微不足道的事情在第一世界的居民中引起昏迷。 在削减的基础上，我描述了部署Vue Storefront的第二种方法，以尝试将其连接到我的现有项目。 我必须马上说，第二种方法的结果是一个没有连接任何东西的应用程序，但至少已加载到浏览器中。 在获得期望的结果之前，很可能我将不得不采取多种方法。

目的

在熟悉Vue Storefront的过程中，我的目标变得越来越谦虚，而我却选择了一个非常谦虚的目标-将项目组装在单独的服务器上并将应用程序加载到浏览器中。

工作环境

为了实验的纯正，我使用IaaS 。 在表中列出的服务提供商中，我选择了Exoscale （我的推荐链接）进行注册。 注册时的最低存款额为5欧元（+ 21％的欧洲增值税），但这笔金额足以玩多次。 该服务实际上只为您使用的东西（计算能力，磁盘空间，网络）赚钱。

我使用的是64位Linux Ubuntu 18.04 LTS（2x 2198 MHz CPU，2 GB RAM，10GB磁盘）的小型版本。

准备工作环境：

$ 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 

纱线安装：

 # 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 ） server.port 。

构建应用

在这里，我必须进行试验，最后我来到了以下命令序列：

 $ npm install $ yarn install $ yarn build $ yarn upgrade #    ,         

启动和停止应用程序

 $ yarn start $ pm2 stop all 

应用程序连接

应用程序地址： http ： //xxx.xxx.xxx.xxxhaps000/因此，我们收到一条错误消息：

结论

是的，结果不是很令人印象深刻，但是它没有特殊的magic 。 Redis，ElasticSearch和GraphQL-所有这些都在./config/default.json配置，目前不存在。 而且还应该有vue-storefront-api和一个用于在vue-storefront-api和Magento 2之间进行数据复制的模块。我真的希望我会写更多关于它们的信息。

现在就这些了。 感谢您的阅读。