我继续将我的引荐链接推广到IaaS提供商Exostate，并提交广告系列的第二篇文章。 在第一篇文章中，我将“ vue-storefront ”应用程序部署并启动为单独的服务器，而不受任何数据的束缚，以一种荒唐的方式掩盖了我在销售Exoscale服务方面的商业兴趣。 我的可怜尝试被aol-nnov同事成功开启 ，并带我去清洗水。 好吧，我的广告系列的第二阶段与第一阶段没有什么不同-同一页面上有错误：

现在，前端已绑定到后端（' vue-storefront-api '），但是客户端浏览器中出现了同样的惨淡消息“ Something出错了... ”。 因此，抛弃了虚假的谦虚，我将我​​的引荐链接呈现给kat，并将所有伪装置于kat下-有关如何将Vue Storefront与Vue Storefront API结合的详细信息。

目的

在这个阶段，我为自己设定了提高最低功能后端并关闭前端的任务。

方案

为了更清楚一点，我给出了一张基于对应用程序配置的分析而开发的图片：

我在上一篇文章中引用了vue-storefront部署vue-storefront 。 因此，需要提高vue-storefront-api ，Elasticsearch和Redis。 从configQL中的地址/端口来看， vue-storefront-api负责GraphQL本身。

工作环境

在此阶段，我还安装了Linux Ubuntu Ubuntu 18.04 LTS 64位服务器的小型版本（2x 2198 MHz CPU，2 GB RAM，10 GB磁盘）。 IaaS的优点是能够从头开始一遍又一遍地进行操作，从而将以前失败的实验丢进垃圾箱。

第一阶段

这是重复第一步的脚本：

 #!/usr/bin/env/bash set -e sudo apt update sleep 2 # wait 2 second before upgrade to prevent en error sudo apt upgrade -y sudo curl -sL https://deb.nodesource.com/setup_12.x | sudo -E bash - sudo apt install -y nodejs sudo curl -sL https://dl.yarnpkg.com/debian/pubkey.gpg | sudo apt-key add - sudo echo "deb https://dl.yarnpkg.com/debian/ stable main" | sudo tee /etc/apt/sources.list.d/yarn.list sudo apt update && sudo apt install yarn sudo npm install pm2@latest -g sudo npm install @vue-storefront/cli@latest -g # interactive command below: use 'Stable versions' / 'v1.10.4' (or latest) / 'Manual installation' vsf init 

在没有人工干预的情况下，有必要考虑自动部署vue-storefront 。 但是现在，像这样，使用vsf 。

安装Elasticsearch

 # apt install openjdk-11-jre-headless -y # java -version openjdk version "11.0.4" 2019-07-16 OpenJDK Runtime Environment (build 11.0.4+11-post-Ubuntu-1ubuntu218.04.3) OpenJDK 64-Bit Server VM (build 11.0.4+11-post-Ubuntu-1ubuntu218.04.3, mixed mode, sharing) # apt-get install apt-transport-https # wget -qO - https://artifacts.elastic.co/GPG-KEY-elasticsearch | sudo apt-key add - # add-apt-repository "deb https://artifacts.elastic.co/packages/7.x/apt stable main" # apt update # apt install elasticsearch -y 

在启动服务之前，您需要更改Elasticsearch的配置，以便可以从外部访问该服务（这不是必需的，但对我来说更方便）：

 $ sudo nano /etc/elasticsearch/elasticsearch.yml cluster.name: habr_demo node.name: exo01 path.data: /var/lib/elasticsearch path.logs: /var/log/elasticsearch network.host: 0.0.0.0 discovery.seed_hosts: [] 

服务启动：

 # service elasticsearch restart 

并检查其性能：

 $ curl -X GET "http://localhost:9200/?pretty" { "name" : "exo01", "cluster_name" : "habr_demo", "cluster_uuid" : "_na_", "version" : { "number" : "7.4.2", "build_flavor" : "default", "build_type" : "deb", "build_hash" : "2f90bbf7b93631e52bafb59b3b049cb44ec25e96", "build_date" : "2019-10-28T20:40:44.881551Z", "build_snapshot" : false, "lucene_version" : "8.2.0", "minimum_wire_compatibility_version" : "6.8.0", "minimum_index_compatibility_version" : "6.0.0-beta1" }, "tagline" : "You Know, for Search" } 

安装Redis

 # apt install redis-server -y 

就像Elasticsearch一样，我将Redis配置为可从外部访问：

 # nano /etc/redis/redis.conf bind 0.0.0.0 # service redis-server start 

我启动该服务并检查其性能：

 # service redis-server start # redis-cli > set test "It's working!" > get test > exit 

安装vue-storefront-api

 $ cd ~ $ git clone https://github.com/DivanteLtd/vue-storefront-api.git 

将前端链接到后端

正面配置

可用的前端配置选项可在~/vue-storefront/config/default.json 。 我在~/vue-storefront/config/local.json覆盖了一些选项：

 { "server": { "host": "0.0.0.0", "port": 3000 }, "redis": { "host": "194.182.181.149", "port": 6379, "db": 0 }, "graphql": { "host": "194.182.181.149", "port": 8080 }, "api": { "url": "http://194.182.181.149:8080" }, "elasticsearch": {} } 

server.host|.port我绑定一个nodejs服务器，该服务器将前端输出内容到相应端口上的所有可用ip地址。

redis和graphql绑定到我的测试服务器的外部ip地址。 我不知道发布内容的nodejs服务器是否使用这些设置，或者是否在浏览器的客户端使用了这些设置，所以我放置了外部地址。

api.uri在这里，您肯定需要注册服务器的外部IP地址，因为 在上一阶段，我在请求日志（工具栏的“ Network选项卡）中看到了来自浏览器（PWA应用程序）的API调用。 这是vue-storefront-api应用程序中的nodejs服务器将挂起的端口地址。

后端配置

可用的配置选项也可以在~/vue-storefront-api/config/default.json查看。 这是~/vue-storefront-api/config/local.json中的覆盖选项：

 { "server": { "host": "0.0.0.0", "port": 8080 }, "elasticsearch": { "host": "localhost", "port": 9200 }, "redis": { "host": "localhost", "port": 6379 } } 

server.host|.port我绑定一个nodejs服务器，该服务器将为API提供内容到相应端口上的所有可用ip地址。

elasticsearch和redis与API服务器位于同一主机上，因此我只重复默认参数。

应用程式建立

前部

 $ cd ~/vue-storefront $ yarn install $ yarn build 

后端

 $ cd ~/vue-storefront-api $ yarn install $ yarn build 

启动和停止应用程序

 $ cd ~/vue-storefront-api $ yarn start ... $ cd ~/vue-storefront $ yarn start ... [PM2][WARN] Applications server not running, starting... [PM2] App [server] launched (4 instances) ┌──────────┬────┬─────────┬──────┬────────┬─────────┬────────┬───────┬───────────┬────────┬──────────┐ │ App name │ id │ mode │ pid │ status │ restart │ uptime │ cpu │ mem │ user │ watching │ ├──────────┼────┼─────────┼──────┼────────┼─────────┼────────┼───────┼───────────┼────────┼──────────┤ │ api │ 0 │ fork │ 3690 │ online │ 0 │ 11s │ 0% │ 85.2 MB │ ubuntu │ disabled │ │ o2m │ 1 │ fork │ 3696 │ online │ 0 │ 11s │ 0% │ 48.4 MB │ ubuntu │ disabled │ │ server │ 2 │ cluster │ 3763 │ online │ 0 │ 0s │ 26.7% │ 66.9 MB │ ubuntu │ disabled │ │ server │ 3 │ cluster │ 3770 │ online │ 0 │ 0s │ 0% │ 68.1 MB │ ubuntu │ disabled │ │ server │ 4 │ cluster │ 3785 │ online │ 0 │ 0s │ 0% │ 40.9 MB │ ubuntu │ disabled │ │ server │ 5 │ cluster │ 3796 │ online │ 0 │ 0s │ 0% │ 40.9 MB │ ubuntu │ disabled │ └──────────┴────┴─────────┴──────┴────────┴─────────┴────────┴───────┴───────────┴────────┴──────────┘ Use `pm2 show <id|name>` to get more details about an app Done in 1.49s. 

停止：

 $ pm2 stop all 

查看日志：

 $ pm2 log 

应用程序连接

应用程序地址： http ： //194.182.181.149haps000/结果，一开始我们在浏览器中收到一条错误消息，但是在API服务器的日志中，我们可以记录浏览器对API的调用：

 $ pm2 log 3|server | 2019-11-16 07:44:33: Error during render : / 3|server | 2019-11-16 07:44:33: Error: FetchError in request to ES: FetchError: invalid json response body at http://194.182.181.149:8080/api/catalog/vue_storefront_catalog/product/_search?_source_exclude=%2A.msrp_display_actual_price_type%2Crequired_options%2Cupdated_at%2Ccreated_at%2Cattribute_set_id%2Coptions_container%2Cmsrp_display_actual_price_type%2Chas_options%2Cstock.manage_stock%2Cstock.use_config_min_qty%2Cstock.use_config_notify_stock_qty%2Cstock.stock_id%2Cstock.use_config_backorders%2Cstock.use_config_enable_qty_inc%2Cstock.enable_qty_increments%2Cstock.use_config_manage_stock%2Cstock.use_config_min_sale_qty%2Cstock.notify_stock_qty%2Cstock.use_config_max_sale_qty%2Cstock.use_config_max_sale_qty%2Cstock.qty_increments%2Csmall_image%2Csgn%2C%2A.sgn&from=0&request=%7B%22query%22%3A%7B%22bool%22%3A%7B%22filter%22%3A%7B%22bool%22%3A%7B%22must%22%3A%5B%7B%22terms%22%3A%7B%22category.name.keyword%22%3A%5B%22Tees%22%5D%7D%7D%2C%7B%22terms%22%3A%7B%22visibility%22%3A%5B2%2C3%2C4%5D%7D%7D%2C%7B%22terms%22%3A%7B%22status%22%3A%5B0%2C1%5D%7D%7D%5D%7D%7D%7D%7D%7D&size=8&sort=created_at%3Adesc reason: Unexpected end of JSON input 3|server | at w (core/server-entry.ts:23:25) 3|server | at server-bundle.js:1:468554 3|server | at processTicksAndRejections (internal/process/task_queues.js:93:5) 3|server | 2019-11-16 07:44:33: whole request [/error]: 56ms 0|api | 2019-11-16 07:44:34: OPTIONS /api/cart/create?token= 204 1.320 ms - 0 0|api | 2019-11-16 07:44:34: POST /api/cart/create?token= 200 465.416 ms - 56 0|api | 2019-11-16 07:44:34: OPTIONS /api/cart/pull?token=&cartId=35bea3b7dcf8fb841187d69489fe8c51 204 0.239 ms - 0 0|api | 2019-11-16 07:44:34: GET /api/cart/pull?token=&cartId=35bea3b7dcf8fb841187d69489fe8c51 200 103.949 ms - 24 2Cattribute_set_id％2Coptions_container％2Cmsrp_display_actual_price_type％2Chas_options％2Cstock.manage_stock％2Cstock.use_config_min_qty％2Cstock.use_config_notify_stock_qty％2Cstock.stock_id％2Cstock.use_config_backorders％2Cstock.use_config_enable_qty_inc％2Cstock.enable_qty_increments％2Cstock.use_config_manage_stock％2Cstock $ pm2 log 3|server | 2019-11-16 07:44:33: Error during render : / 3|server | 2019-11-16 07:44:33: Error: FetchError in request to ES: FetchError: invalid json response body at http://194.182.181.149:8080/api/catalog/vue_storefront_catalog/product/_search?_source_exclude=%2A.msrp_display_actual_price_type%2Crequired_options%2Cupdated_at%2Ccreated_at%2Cattribute_set_id%2Coptions_container%2Cmsrp_display_actual_price_type%2Chas_options%2Cstock.manage_stock%2Cstock.use_config_min_qty%2Cstock.use_config_notify_stock_qty%2Cstock.stock_id%2Cstock.use_config_backorders%2Cstock.use_config_enable_qty_inc%2Cstock.enable_qty_increments%2Cstock.use_config_manage_stock%2Cstock.use_config_min_sale_qty%2Cstock.notify_stock_qty%2Cstock.use_config_max_sale_qty%2Cstock.use_config_max_sale_qty%2Cstock.qty_increments%2Csmall_image%2Csgn%2C%2A.sgn&from=0&request=%7B%22query%22%3A%7B%22bool%22%3A%7B%22filter%22%3A%7B%22bool%22%3A%7B%22must%22%3A%5B%7B%22terms%22%3A%7B%22category.name.keyword%22%3A%5B%22Tees%22%5D%7D%7D%2C%7B%22terms%22%3A%7B%22visibility%22%3A%5B2%2C3%2C4%5D%7D%7D%2C%7B%22terms%22%3A%7B%22status%22%3A%5B0%2C1%5D%7D%7D%5D%7D%7D%7D%7D%7D&size=8&sort=created_at%3Adesc reason: Unexpected end of JSON input 3|server | at w (core/server-entry.ts:23:25) 3|server | at server-bundle.js:1:468554 3|server | at processTicksAndRejections (internal/process/task_queues.js:93:5) 3|server | 2019-11-16 07:44:33: whole request [/error]: 56ms 0|api | 2019-11-16 07:44:34: OPTIONS /api/cart/create?token= 204 1.320 ms - 0 0|api | 2019-11-16 07:44:34: POST /api/cart/create?token= 200 465.416 ms - 56 0|api | 2019-11-16 07:44:34: OPTIONS /api/cart/pull?token=&cartId=35bea3b7dcf8fb841187d69489fe8c51 204 0.239 ms - 0 0|api | 2019-11-16 07:44:34: GET /api/cart/pull?token=&cartId=35bea3b7dcf8fb841187d69489fe8c51 200 103.949 ms - 24 2Cstock.qty_increments％2Csmall_image％2Csgn％2C％2A.sgn＆从= $ pm2 log 3|server | 2019-11-16 07:44:33: Error during render : / 3|server | 2019-11-16 07:44:33: Error: FetchError in request to ES: FetchError: invalid json response body at http://194.182.181.149:8080/api/catalog/vue_storefront_catalog/product/_search?_source_exclude=%2A.msrp_display_actual_price_type%2Crequired_options%2Cupdated_at%2Ccreated_at%2Cattribute_set_id%2Coptions_container%2Cmsrp_display_actual_price_type%2Chas_options%2Cstock.manage_stock%2Cstock.use_config_min_qty%2Cstock.use_config_notify_stock_qty%2Cstock.stock_id%2Cstock.use_config_backorders%2Cstock.use_config_enable_qty_inc%2Cstock.enable_qty_increments%2Cstock.use_config_manage_stock%2Cstock.use_config_min_sale_qty%2Cstock.notify_stock_qty%2Cstock.use_config_max_sale_qty%2Cstock.use_config_max_sale_qty%2Cstock.qty_increments%2Csmall_image%2Csgn%2C%2A.sgn&from=0&request=%7B%22query%22%3A%7B%22bool%22%3A%7B%22filter%22%3A%7B%22bool%22%3A%7B%22must%22%3A%5B%7B%22terms%22%3A%7B%22category.name.keyword%22%3A%5B%22Tees%22%5D%7D%7D%2C%7B%22terms%22%3A%7B%22visibility%22%3A%5B2%2C3%2C4%5D%7D%7D%2C%7B%22terms%22%3A%7B%22status%22%3A%5B0%2C1%5D%7D%7D%5D%7D%7D%7D%7D%7D&size=8&sort=created_at%3Adesc reason: Unexpected end of JSON input 3|server | at w (core/server-entry.ts:23:25) 3|server | at server-bundle.js:1:468554 3|server | at processTicksAndRejections (internal/process/task_queues.js:93:5) 3|server | 2019-11-16 07:44:33: whole request [/error]: 56ms 0|api | 2019-11-16 07:44:34: OPTIONS /api/cart/create?token= 204 1.320 ms - 0 0|api | 2019-11-16 07:44:34: POST /api/cart/create?token= 200 465.416 ms - 56 0|api | 2019-11-16 07:44:34: OPTIONS /api/cart/pull?token=&cartId=35bea3b7dcf8fb841187d69489fe8c51 204 0.239 ms - 0 0|api | 2019-11-16 07:44:34: GET /api/cart/pull?token=&cartId=35bea3b7dcf8fb841187d69489fe8c51 200 103.949 ms - 24 

结论

迈出了进一步的一步-Vue Storefront PWA与Vue Storefront API通信。 接下来，您需要处理后端的内容。 在Elasticsearch中索引哪些数据，如何到达那里以及如何检索它们。

感谢您阅读并点击我的推荐链接。 好吧，该死，为了她，在这里堆满了这一切。