Magento PWA Studio 测试环境安装步骤及碰到的问题解决过程记录

最新推荐文章于 2024-01-25 17:28:36 发布

CyrusZhou

最新推荐文章于 2024-01-25 17:28:36 发布

阅读量2.7k

点赞数

分类专栏： Magento Apache2 Linux 文章标签： Magento PWA php

本文链接：https://blog.csdn.net/lsqtzj/article/details/113791827

版权

Linux 同时被 3 个专栏收录

83 篇文章 6 订阅

订阅专栏

Magento

46 篇文章 2 订阅

订阅专栏

Apache2

20 篇文章 0 订阅

订阅专栏

说明

1、下载PWA Studio

2、安装

用yarn安装错误提示：command sh -c npm-is "yarn"

1) MAGENTO_BACKEND_URL

2) CHECKOUT_BRAINTREE_TOKEN

Invalid value of "US" provided for the countryId field.

Original exception message: Something went wrong while saving the file(s)

说明

Magento PWA Studio 渐进式网页应用的优势网络上一堆就不说明了，这里只记录本人安装过程中碰到的坑和解决方法。

pwa-studio v9.0.1 需要magento2.4.2以上版本，如果安装的是magento2.4.2以上版本可以省去很多麻烦，兼容说明：https://magento.github.io/pwa-studio/technologies/magento-compatibility/

1、下载PWA Studio

目前版本是v9.0.1 https://github.com/magento/pwa-studio/releases/tag/v9.0.1

wget https://github.com/magento/pwa-studio/archive/v9.0.1.tar.gz --no-check-certificate

2、安装

解压：

tar -xzvf  v9.0.1.tar.gz

安装：

cd pwa-studio-9.0.1
yarn install

用yarn安装错误提示：command sh -c npm-is "yarn"

yarn install

yarn install v1.22.5
$ node -e 'process.env.CI||process.exit(1)' || npx npm-is yarn
/root/.npm/_npx/eb07260b9bcce2ea/node_modules/npm-is/npm-is.js:67
    throw new WrongPackageManagerError(allowed, invoked);
    ^

WrongPackageManagerError: This project can only be used with the "yarn" package manager, but it was invoked by "/usr/local/lib/node_modules/npm/bin/npx-cli.js", which is not supported.
    at Function.assert (/root/.npm/_npx/eb07260b9bcce2ea/node_modules/npm-is/npm-is.js:67:11)
    at Object.<anonymous> (/root/.npm/_npx/eb07260b9bcce2ea/node_modules/npm-is/bin/npm-is:7:9)
    at Module._compile (node:internal/modules/cjs/loader:1108:14)
    at Object.Module._extensions..js (node:internal/modules/cjs/loader:1137:10)
    at Module.load (node:internal/modules/cjs/loader:973:32)
    at Function.Module._load (node:internal/modules/cjs/loader:813:14)
    at Function.executeUserEntryPoint [as runMain] (node:internal/modules/run_main:76:12)
    at node:internal/main/run_main_module:17:47 {
  info: {
    allowedPackageManagers: [ 'yarn' ],
    invokedPackageManager: '/usr/local/lib/node_modules/npm/bin/npx-cli.js'
  }
}
npm ERR! code 1
npm ERR! path /www/wwwroot/pwa-studio-9.0.1
npm ERR! command failed
npm ERR! command sh -c npm-is "yarn"

npm ERR! A complete log of this run can be found in:
npm ERR!     /root/.npm/_logs/2021-02-11T17_13_18_525Z-debug.log
error Command failed with exit code 1.
info Visit https://yarnpkg.com/en/docs/cli/install for documentation about this command.

问题原因：

经过一阵倒腾发现这是由于node版本引起的，我安装的版本是v15.8.0改成v14.15.5

解决方法：

用n插件更改node版本

npm install -g n    //安装n插件
n v14.15.5          //安装指定版本node
node -v             //查看node版本

重新执行安装命令

yarn install

注意：提示中的更新caniuse-lite不用管目前更新后会有问题，更新了也没大事删除目录重新解压一遍就可以了。

3、运行服务

yarn run build && yarn run watch:venia

或者

yarn run build &&yarn run watch:all

 ｢wdm｣:    1654 modules                                          
ℹ ｢wdm｣: Compiled successfully.

                  ┌───────────────────────────────────────────────────────────────┐
                  │                                                               │
                  │          PWADevServer ready at http://0.0.0.0:10000/          │
                  │   GraphQL Playground ready at http://0.0.0.0:10000/graphiql   │
                  │                                                               │
                  └───────────────────────────────────────────────────────────────┘

出现上面的提示说明服务已经正常启动，浏览器输入 http://IP:10000,本机输入 http://127.0.0.1:10000 就可以访问了

4、配置PWA Studio

MAGENTO_BACKEND_URL="https://magento.local/" \
CHECKOUT_BRAINTREE_TOKEN="sandbox_8yrzsvtm_s2bg8fs563crhqzk" \
yarn buildpack create-env-file packages/venia-concept

1) MAGENTO_BACKEND_URL

Magento2.4.2网站地址

2) CHECKOUT_BRAINTREE_TOKEN

可以去https://developers.braintreepayments.com/申请

A、错误提示：

Cannot query field "availableStores" on type "Query".

原因：这是由于availableStores是2.4.2版本新加的功能参考https://github.com/magento/devdocs/pull/8001,需要升级程序：

进入到magento目录进行更新：

bin/magento maintenance:enable    //进入维护模式
composer require magento/product-community-edition 2.4.2 --no-update
composer update -vvv           //建议加-vvv卡了好发现问题
find generated/code/ -type f -delete && rm -rf generated/code/*
find generated/metadata/ -type f -delete && rm -rf generated/metadata/* 
find pub/static/_cache/ -type f -delete && rm -rf pub/static/_cache/*
find pub/static/frontend/ -type f -delete && rm -rf pub/static/frontend/*
find pub/static/adminhtml/ -type f -delete && rm -rf pub/static/adminhtml/*
find var/view_preprocessed/ -type f -delete && rm -rf var/view_preprocessed/*
find var/cache/ -type f -delete && rm -rf var/cache/*
bin/magento setup:upgrade
bin/magento setup:di:compile
bin/magento setup:static-content:deploy en_US zh_Hans_CN -f
bin/magento maintenance:disable       //退出维护模式

如果是第一次升级安装会提示输入验证信息，Access Key获得方式：ubuntu 20 安装 magento2.4

如出现Declaration of Psr\Log\LoggerInterface\Proxy::emergency错误请参考：更新magento 2.4.2 错误 PHP Fatal error: Declaration of Psr\Log\LoggerInterface\Proxy::emergency 问题解决

B、错误提示：

PHP Fatal error:  Uncaught Error: Cannot instantiate interface Magento\MediaContentSynchronizationApi\Model\GetEntitiesInterface in /www/wwwroot/magento/vendor/magento/framework/ObjectManager/Factory/Dynamic/Developer.php:50
Stack trace:
#0 /www/wwwroot/magento/vendor/magento/framework/ObjectManager/ObjectManager.php(70): Magento\Framework\ObjectManager\Factory\Dynamic\Developer->create('Magento\\MediaCo...')
#1 /www/wwwroot/magento/vendor/magento/framework/ObjectManager/Factory/AbstractFactory.php(170): Magento\Framework\ObjectManager\ObjectManager->get('Magento\\MediaCo...')
#2 /www/wwwroot/magento/vendor/magento/framework/ObjectManager/Factory/AbstractFactory.php(276): Magento\Framework\ObjectManager\Factory\AbstractFactory->resolveArgument(Array, 'Magento\\MediaCo...', NULL, 'getEntities', 'Magento\\MediaCo...')
#3 /www/wwwroot/magento/vendor/magento/framework/ObjectManager/Factory/AbstractFactory.php(239): Magento\Framework\ObjectManager\Factory\AbstractFactory->getResolvedArgument('Magento\\MediaCo...', Array, Array)
#4  in /www/wwwroot/magento/vendor/magento/framework/ObjectManager/Factory/Dynamic/Developer.php on line 50

Fatal error: Uncaught Error: Cannot instantiate interface Magento\MediaContentSynchronizationApi\Model\GetEntitiesInterface in /www/wwwroot/magento/vendor/magento/framework/ObjectManager/Factory/Dynamic/Developer.php:50
Stack trace:
#0 /www/wwwroot/magento/vendor/magento/framework/ObjectManager/ObjectManager.php(70): Magento\Framework\ObjectManager\Factory\Dynamic\Developer->create('Magento\\MediaCo...')
#1 /www/wwwroot/magento/vendor/magento/framework/ObjectManager/Factory/AbstractFactory.php(170): Magento\Framework\ObjectManager\ObjectManager->get('Magento\\MediaCo...')
#2 /www/wwwroot/magento/vendor/magento/framework/ObjectManager/Factory/AbstractFactory.php(276): Magento\Framework\ObjectManager\Factory\AbstractFactory->resolveArgument(Array, 'Magento\\MediaCo...', NULL, 'getEntities', 'Magento\\MediaCo...')
#3 /www/wwwroot/magento/vendor/magento/framework/ObjectManager/Factory/AbstractFactory.php(239): Magento\Framework\ObjectManager\Factory\AbstractFactory->getResolvedArgument('Magento\\MediaCo...', Array, Array)
#4  in /www/wwwroot/magento/vendor/magento/framework/ObjectManager/Factory/Dynamic/Developer.php on line 50

清空redis数据

redis-cli flushall

重新更新Magento

bin/magento maintenance:enable    //进入维护模式
composer update -vvv           //建议加-vvv卡了好发现问题
find generated/code/ -type f -delete && rm -rf generated/code/*
find generated/metadata/ -type f -delete && rm -rf generated/metadata/* 
find pub/static/_cache/ -type f -delete && rm -rf pub/static/_cache/*
find pub/static/frontend/ -type f -delete && rm -rf pub/static/frontend/*
find pub/static/adminhtml/ -type f -delete && rm -rf pub/static/adminhtml/*
find var/view_preprocessed/ -type f -delete && rm -rf var/view_preprocessed/*
find var/cache/ -type f -delete && rm -rf var/cache/*
bin/magento setup:upgrade
bin/magento setup:di:compile
bin/magento setup:static-content:deploy en_US zh_Hans_CN -f
bin/magento maintenance:disable       //退出维护模式

重新运行PWA Studio配置命令

返回pwa-studio-9.0.1目录重新执行命令：

MAGENTO_BACKEND_URL="https://magento.local/" \
CHECKOUT_BRAINTREE_TOKEN="sandbox_8yrzsvtm_s2bg8fs563crhqzk" \
yarn buildpack create-env-file packages/venia-concept

yarn run v1.22.5
$ /www/wwwroot/pwa-studio-9.0.1/node_modules/.bin/buildpack create-env-file packages/venia-concept
Browserslist: caniuse-lite is outdated. Please run the following command: `yarn upgrade`
  ℹ  Successfully wrote a fresh configuration file to
     /www/wwwroot/pwa-studio-9.0.1/packages/venia-concept/.env
Done in 7.57s.
root@cyrus-ubuntu:/www/wwwroot/pwa-studio-9.0.1# yarn buildpack create-custom-origin packages/venia-concept

5、生成SSL证书

PWA功能需要HTTPS安全域

yarn buildpack create-custom-origin packages/venia-concept

yarn run v1.22.5
$ /www/wwwroot/pwa-studio-9.0.1/node_modules/.bin/buildpack create-custom-origin packages/venia-concept
Browserslist: caniuse-lite is outdated. Please run the following command: `yarn upgrade`
  ℹ  Acquired custom hostname and SSL cert for magento-venia-concept-dyavt.local.pwadev.
     Development server will run on port 8942 and staging server will run on port 9942.
Done in 7.76s.

启动服务

yarn run build && yarn run watch:venia

或

yarn run build && yarn run watch:all

Done in 83.31s.
yarn run v1.22.5
$ yarn venia run watch
$ yarn workspace @magento/venia-concept run watch
$ webpack-dev-server --progress --color --env.mode development
Emitting no ServiceWorker in development mode.
ℹ ｢wdm｣: wait until bundle finished: 
ℹ ｢wds｣: Project is running at https://magento-venia-concept-dyavt.local.pwadev:8942/
ℹ ｢wds｣: webpack output is served from /
 10% building 7/11 modules 4 active ...ugin/sockets/WDSSocket.jsBrowserslist: caniuse-lite is outdated. Please run the following command: `yarn upgrade`
ℹ ｢wdm｣:    1654 modules                                                                           
ℹ ｢wdm｣: Compiled successfully.

  ┌────────────────────────────────────────────────────────────────────────────────────────────────┐
  │                                                                                                │
  │          PWADevServer ready at https://magento-venia-concept-dyavt.local.pwadev:8942/          │
  │   GraphQL Playground ready at https://magento-venia-concept-dyavt.local.pwadev:8942/graphiql   │
  │                                                                                                │
  └────────────────────────────────────────────────────────────────────────────────────────────────┘

注意：这样只能本机打开，远程无法打开。

6、创建代理[可选]

apache

<VirtualHost *:80>
    ServerAlias magento.local
    SSLProxyEngine on
    SSLProxyVerify none 
    SSLProxyCheckPeerCN off
    SSLProxyCheckPeerName off
    SSLProxyCheckPeerExpire off
    ProxyPass / https://magento-venia-concept-dyavt.local.pwadev:8942/
    ProxyPassReverse / https://magento-venia-concept-dyavt.local.pwadev:8942/
</VirtualHost>

这样局域网电脑就可以用 magento.local 访问服务了。无法解析地址可以设置一下hosts，管理员方式运行记事本，打开C:\Windows\System32\drivers\etc\hosts文件，添加

服务器IP   magento.local

7、导入Venia模板测试数据

复制packages/venia-concept/deployVeniaSampleData.sh 到Magento安装目录

bash deployVeniaSampleData.sh

Please specify absolute path to your Magento 2 instance
Magento root folder: /www/wwwroot/magento
Sample data will be installed there.

Are you sure you want to continue? [y/n]y
adding composer repository git@github.com:PMET-public/module-catalog-sample-data-venia.git
You are running composer with Xdebug enabled. This has a major impact on runtime performance. See https://getcomposer.org/xdebug
adding composer repository git@github.com:PMET-public/module-configurable-sample-data-venia.git
You are running composer with Xdebug enabled. This has a major impact on runtime performance. See https://getcomposer.org/xdebug
adding composer repository git@github.com:PMET-public/module-customer-sample-data-venia.git
You are running composer with Xdebug enabled. This has a major impact on runtime performance. See https://getcomposer.org/xdebug
adding composer repository git@github.com:PMET-public/module-sales-sample-data-venia.git
You are running composer with Xdebug enabled. This has a major impact on runtime performance. See https://getcomposer.org/xdebug
adding composer repository git@github.com:PMET-public/module-tax-sample-data-venia.git
You are running composer with Xdebug enabled. This has a major impact on runtime performance. See https://getcomposer.org/xdebug
adding composer repository git@github.com:PMET-public/sample-data-media-venia.git
You are running composer with Xdebug enabled. This has a major impact on runtime performance. See https://getcomposer.org/xdebug
You are running composer with Xdebug enabled. This has a major impact on runtime performance. See https://getcomposer.org/xdebug
Warning from https://repo.packagist.org: You are using an outdated version of Composer. Composer 2.0 is now available and you should upgrade. See https://getcomposer.org/2
./composer.json has been updated
Loading composer repositories with package information
Failed to clone the git@github.com:PMET-public/module-customer-sample-data-venia.git repository, try running in interactive mode so that you can enter your GitHub credentials

Installation failed, reverting ./composer.json to its original content.

                                                                                                                                                                                                  
  [RuntimeException]                                                                                                                                                                              
  Failed to execute git clone --mirror 'git@github.com:PMET-public/module-customer-sample-data-venia.git' '/www/.composer/vcs/git-github.com-PMET-public-module-customer-sample-data-venia.git/'  
                                                                                                                                                                                                  
  Cloning into bare repository '/www/.composer/vcs/git-github.com-PMET-public-module-customer-sample-data-venia.git'...                                                                           
  git@github.com: Permission denied (publickey).                                                                                                                                                  
  fatal: Could not read from remote repository.                                                                                                                                                   
                                                                                                                                                                                                  
  Please make sure you have the correct access rights                                                                                                                                             
  and the repository exists.

出现Failed to clone the git@github.com:PMET-public/module-customer-sample-data-venia.git repository, try running in interactive mode so that you can enter your GitHub credentials提示:

解决方法：

打开https://github.com/settings/tokens 点Generate new token生成一个token,就写个名称就行了不用给其他权限

打开~/.composer/auth.json文件添加,"github-oauth": { "github.com": "**************" }星号换成刚刚的token。

{
    "http-basic": {
        "repo.magento.com": {
            "username": "***********",
            "password": "*************"
        }
    },"github-oauth": { "github.com": "**************" }
}

如果获取的token是ghp_开头的，需要用新格式

否则提示：Your github oauth token for github.com contains invalid characters: "ghp_*************"

{
    "http-basic": {
        "repo.magento.com": {
            "username": "********************",
            "password": "********************"
        },
	 "github.com": {
      	    "username": "********************",
      	    "password": "ghp_*********************"
    	}
    }
}

重新执行bash deployVeniaSampleData.sh

重新更新一下magento

bin/magento maintenance:enable    //进入维护模式
composer update -vvv           //建议加-vvv卡了好发现问题
find generated/code/ -type f -delete && rm -rf generated/code/*
find generated/metadata/ -type f -delete && rm -rf generated/metadata/* 
find pub/static/_cache/ -type f -delete && rm -rf pub/static/_cache/*
find pub/static/frontend/ -type f -delete && rm -rf pub/static/frontend/*
find pub/static/adminhtml/ -type f -delete && rm -rf pub/static/adminhtml/*
find var/view_preprocessed/ -type f -delete && rm -rf var/view_preprocessed/*
find var/cache/ -type f -delete && rm -rf var/cache/*
bin/magento setup:upgrade
bin/magento setup:di:compile
bin/magento setup:static-content:deploy en_US zh_Hans_CN -f
bin/magento maintenance:disable       //退出维护模式

返回pwa-studio-9.0.1目录重新启动服务：

yarn run build && yarn run watch:venia

Magento PWA Studio Venia模板本地测试平台安装完成

8、运行服务命令说明

1）Venia模板构建命令：

yarn run build

2）启动Venia店面服务

yarn run watch:venia

3）启动Venia店面开发环境

yarn run watch:all

4）启动Venia店面生产环境

yarn run stage:venia

错误解决：

Invalid value of "US" provided for the countryId field.

是对国家进行了限制

Unable to apply data patch Magento\CustomerSampleDataVenia\Setup\Patch\Data\AddMultipleAddresses for module Magento_CustomerSampleDataVenia. Original exception message: Invalid value of "US" provided for the countryId field.

打开vendor/magento/module-customer-sample-data-venia/fixtures/additional_addresses.csv 文件把US改成magento 开放的国家代码

Original exception message: Something went wrong while saving the file(s)

Unable to apply data patch Magento\CatalogSampleDataVenia\Setup\Patch\Data\InstallDownloadableProducts for module Magento_CatalogSampleDataVenia. Original exception message: Something went wrong while saving the file(s).

find var generated vendor pub/static pub/media app/etc -type f -exec chmod g+w {} +
find var generated vendor pub/static pub/media app/etc -type d -exec chmod g+ws {} +
chown -R www:www . # 给当前目录复原权限根据个人实际情况修改
chmod u+x bin/magento

CyrusZhou

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
1
评论
Magento PWA Studio 测试环境安装步骤及碰到的问题解决过程记录

说明Magento PWA Studio 渐进式网页应用的优势网络上一堆就不说明了这里只记录本人安装过程中碰到的坑和解决方法。pwa-studio v9.0.1 需要magento2.4.2以上版本，如果安装的是magento2.4.2以上版本可以省去很多麻烦1、下载PWA Studio目前版本是v9.0.1https://github.com/magento/pwa-studio/releases/tag/v9.0.1wget https://github.com/magento/.
复制链接

扫一扫