Last updated: January 12, 2021
How to deploy the PWA Studio project to the server using the UPWARD connector?
I would like to share a simple flow of deploy the PWA Studio project on the same server and domain without nodejs.
I assume you already have the following setup on hand
- Magento 2 project
- PWA Studio project
- Nginx configuration
Here, we will go into the following steps
This technique is basically using in the Magento Commerce Cloud.
1. Build the PWA Studio project
Build the PWA Studio project using the below CLI command that will generate the dist/upward.yml
file that we need to set in the Magento 2 UPWARD connector module.
yarn run build
2. Magento 2 UPWARD connector module
- Install this Magento 2 UPWARD connector module https://github.com/magento/magento2-upward-connector using the following CLI commands.
composer require magento/module-upward-connectorbin/magento s:upbin/magento s:d:cbin/magento s:s:d
- Configure the module
There are two fields to configure under Store > Configuration > General > Web > UPWARD PWA Configuration
.
- UPWARD Config File
- Add the absolute path of the dist/upward.yml file that is generated on step 1
- Front Name Whitelist
- List of frontend URLs that need to forward to the Magento
- Here, contact and privacy-policy-cookie-restriction-mode URLs will be bypassed to the Magento frontend instead of PWA Studio
- List of frontend URLs that need to forward to the Magento
3. Nginx configuration
Add fastcgi_param MAGENTO_BACKEND_URL <magento-backend-url>
param in the nginx configuration.
# PHP entry point for main applicationlocation ~ ^/(index|get|static|errors/report|errors/404|errors/503|health_check)\.php$ {try_files $uri =404;fastcgi_pass fastcgi_backend;fastcgi_buffers 1024 4k;fastcgi_param PHP_FLAG "session.auto_start=off \n suhosin.session.cryptua=off";fastcgi_param PHP_VALUE "memory_limit=756M \n max_execution_time=18000";fastcgi_param MAGENTO_BACKEND_URL "https://magento-domain.com/";fastcgi_read_timeout 600s;fastcgi_connect_timeout 600s;fastcgi_index index.php;fastcgi_param SCRIPT_FILENAME $document_root$fastcgi_script_name;include fastcgi_params;}
Credit: https://github.com/magento/pwa-studio/issues/2328#issuecomment-626975996
Now validate the nginx configuration using the nginx -t
CLI command and if all good, then restart the nginx service.
Note: Access the Magento backend in the private browser window otherwise you may face some UI problems.
That’s it! If all is set correctly, then you should see the PWA Studio frontend and Magento admin on the same domain.