结合视频：https://www.youtube.com/watch?v=L0wm7SWVBL0

①、创建前端文件（如下图）

步骤如图

②、安装magento支持，以magento2.4.3为例，使用命令行安装。

bin/magento setup:install \
--base-url=http://\
--db-host=localhost \
--db-name=magento242 \
--db-user=root \
--db-password=pwd\
--admin-firstname=admin \
--admin-lastname=admin \
--admin-email=admin@admin.com \
--admin-user=admin \
--admin-password=admin123 \
--language=en_US \
--currency=USD \
--timezone=America/Chicago \
--use-rewrites=1 \
--search-engine=elasticsearch7 \
--elasticsearch-host=127.0.0.1 \
--elasticsearch-port=9200\
--elasticsearch-username=magento2 \
--elasticsearch-password=pwd

③、安装magento-pwa plugin。

sudo composer require magento/pwa

//开启相关model
php bin/magento module:enable --clear-static-content Magento_ContactGraphQlPwa

php bin/magento module:enable --clear-static-content Magento_NewsletterGraphQlPwa

php bin/magento module:enable --clear-static-content Magento_QuoteGraphQlPwa

打开 app/etc/config.php 开启部分组件

一：搜索名为 aux = 1；

二：搜索名为 Pwa = 1；

④、下载venia 数据示例：

composer require --no-interaction --ansi magento/venia-sample-data:*

//执行升级 将测试数据写入
bin/magento setup:upgrade

⑤、检查前端的配置文件 package.json 及 .env 文件

增加以下配置

--public http://pwastudio.rayman.com:3000 --open --port 3000 --hot --disableEostcheck=true

.env文件修改：

MAGENTO_BACKEND_URL = http://ceshi.com
DEV_SERVER_HOST = 0.0.0.0
DEV_SERVER_PORT = 0
STAGING_SERVER_PORT = 8080

⑥、最后在前端项目根目录执行 yarn watch

-----------------------------------------------

常见问题：

Q：yarn watch 提示需要 v12.1.0 及 以上时：

As of version 12.1.0, PWA Studio requires the appropriate PWA metapackage to be installed on the backend.

A：克隆以下包、并执行以下命令

git clone https://github.com/magento/pwa-studio.git

//切换至12.1.0
git checkout v12.1.0 

yarn install

Q：v12.1.0的配置文件（.env等）在 ./packages/venia-concept 目录中，按照上图修改.env 及 部分配置文件。

执行yarn run watch:all 或 yarn run build 提示48行 网络连接报错。查看magento日志，显示：

//构建报错
/var/www/curtarra/testOne/pwa2/packages/pwa-buildpack/lib/Utilities/graphQL.js:48

//magento日志显示(开发模式)：var/log/debug.log
Cannot instantiate interface Magento\\InventorySalesApi\\Api\\GetProductSalableQtyInterface

原因：部分扩展没开启。

A：开启以下扩展尝试

array(1) {
  ["a"]=>
  array(64) {
    [0]=>
    string(11) "Magento_Csp"
    [1]=>
    string(17) "Magento_Inventory"
    [2]=>
    string(24) "Magento_InventoryAdminUi"
    [3]=>
    string(33) "Magento_InventoryAdvancedCheckout"
    [4]=>
    string(20) "Magento_InventoryApi"
    [5]=>
    string(35) "Magento_InventoryBundleImportExport"
    [6]=>
    string(30) "Magento_InventoryBundleProduct"
    [7]=>
    string(37) "Magento_InventoryBundleProductAdminUi"
    [8]=>
    string(37) "Magento_InventoryBundleProductIndexer"
    [9]=>
    string(24) "Magento_InventoryCatalog"
    [10]=>
    string(22) "Magento_InventorySales"
    [11]=>
    string(31) "Magento_InventoryCatalogAdminUi"
    [12]=>
    string(27) "Magento_InventoryCatalogApi"
    [13]=>
    string(30) "Magento_InventoryCatalogSearch"
    [14]=>
    string(36) "Magento_InventoryConfigurableProduct"
    [15]=>
    string(43) "Magento_InventoryConfigurableProductIndexer"
    [16]=>
    string(30) "Magento_InventoryConfiguration"
    [17]=>
    string(33) "Magento_InventoryConfigurationApi"
    [18]=>
    string(45) "Magento_InventoryDistanceBasedSourceSelection"
    [19]=>
    string(52) "Magento_InventoryDistanceBasedSourceSelectionAdminUi"
    [20]=>
    string(48) "Magento_InventoryDistanceBasedSourceSelectionApi"
    [21]=>
    string(30) "Magento_InventoryElasticsearch"
    [22]=>
    string(31) "Magento_InventoryExportStockApi"
    [23]=>
    string(24) "Magento_InventoryIndexer"
    [24]=>
    string(31) "Magento_InventoryGroupedProduct"
    [25]=>
    string(38) "Magento_InventoryGroupedProductAdminUi"
    [26]=>
    string(38) "Magento_InventoryGroupedProductIndexer"
    [27]=>
    string(29) "Magento_InventoryImportExport"
    [28]=>
    string(33) "Magento_InventoryInStorePickupApi"
    [29]=>
    string(37) "Magento_InventoryInStorePickupAdminUi"
    [30]=>
    string(35) "Magento_InventorySourceSelectionApi"
    [31]=>
    string(30) "Magento_InventoryInStorePickup"
    [32]=>
    string(37) "Magento_InventoryInStorePickupGraphQl"
    [33]=>
    string(41) "Magento_InventoryInStorePickupShippingApi"
    [34]=>
    string(42) "Magento_InventoryInStorePickupQuoteGraphQl"
    [35]=>
    string(35) "Magento_InventoryInStorePickupSales"
    [36]=>
    string(38) "Magento_InventoryInStorePickupSalesApi"
    [37]=>
    string(35) "Magento_InventoryInStorePickupQuote"
    [38]=>
    string(38) "Magento_InventoryInStorePickupShipping"
    [39]=>
    string(45) "Magento_InventoryInStorePickupShippingAdminUi"
    [40]=>
    string(22) "Magento_InventoryCache"
    [41]=>
    string(40) "Magento_InventoryLowQuantityNotification"
    [42]=>
    string(43) "Magento_InventoryLowQuantityNotificationApi"
    [43]=>
    string(43) "Magento_InventoryMultiDimensionalIndexerApi"
    [44]=>
    string(29) "Magento_InventoryProductAlert"
    [45]=>
    string(32) "Magento_InventoryRequisitionList"
    [46]=>
    string(29) "Magento_InventoryReservations"
    [47]=>
    string(31) "Magento_InventoryReservationCli"
    [48]=>
    string(32) "Magento_InventoryReservationsApi"
    [49]=>
    string(28) "Magento_InventoryExportStock"
    [50]=>
    string(29) "Magento_InventorySalesAdminUi"
    [51]=>
    string(32) "Magento_InventorySalesFrontendUi"
    [52]=>
    string(38) "Magento_InventorySetupFixtureGenerator"
    [53]=>
    string(25) "Magento_InventoryShipping"
    [54]=>
    string(32) "Magento_InventoryShippingAdminUi"
    [55]=>
    string(35) "Magento_InventorySourceDeductionApi"
    [56]=>
    string(32) "Magento_InventorySourceSelection"
    [57]=>
    string(38) "Magento_InventoryInStorePickupFrontend"
    [58]=>
    string(43) "Magento_InventoryInStorePickupMultishipping"
    [59]=>
    string(43) "Magento_InventoryConfigurableProductAdminUi"
    [60]=>
    string(47) "Magento_InventoryLowQuantityNotificationAdminUi"
    [61]=>
    string(42) "Magento_InventoryInStorePickupSalesAdminUi"
    [62]=>
    string(24) "Magento_InventoryGraphQl"
    [63]=>
    string(15) "Magento_Version"
  }
}

Q：yarn run build 成功后，添加公网访问方式：

A：nginx反向代理

##pwa反向代理
server{
  listen 8099;
  server_name xxx; # 公网ip
  index  index.php index.html index.htm;

  location / {
    proxy_pass  https://magento-venia-concept-ejcrt.local.pwadev:8383; # 或 http://www.baidu.com
    proxy_set_header Host $proxy_host;
    proxy_set_header X-Real-IP $remote_addr;
    proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
  }
}