fix: m2-1050 pods does not get up after deployment

- add ssrMiddlewareUrl to prevent make a call to unavailable external client

Author: bartoszherba

.github/workflows/deploy-vue-storefront-cloud.yml

@@ -52,6 +52,7 @@ jobs:
           echo ::set-output name=name::${{ env.ENVNAME }}
           echo ::set-output name=code::${{ env.ENVCODE }}
           echo ::set-output name=middleware-url::${{ env.MIDDLEWARE_URL }}
+          echo ::set-output name=ssr-middleware-url::${{ env.SSR_MIDDLEWARE_URL }}
 
       - name: Create GitHub deployment
         id: deployment
@@ -92,6 +93,7 @@ jobs:
 
           VSF_STORE_URL: ''
           VSF_MIDDLEWARE_URL: ${{ needs.create-deployment.outputs.environment-middleware-url }}
+          VSF_SSR_MIDDLEWARE_URL: ${{ needs.create-deployment.outputs.environment-ssr-middleware-url }}
 
           VSF_MAGENTO_BASE_URL: https://magento2-instance.vuestorefront.io/
           VSF_MAGENTO_GRAPHQL_URL: https://magento2-instance.vuestorefront.io/graphql

.github/workflows/public_env_info/canary

@@ -2,4 +2,5 @@ ENVNAME=canary
 ENVCODE=demo-magento2-canary
 BASE_URL=https://magento2stage.vuestorefront.io
 MIDDLEWARE_URL=https://magento2stage.vuestorefront.io/api
+SSR_MIDDLEWARE_URL=http://localhost:3000/api
 MAGENTO_GRAPHQL_URL=https://magento2-instance.vuestorefront.io:8443/graphql

.github/workflows/public_env_info/dev

@@ -2,4 +2,5 @@ ENVNAME=dev
 ENVCODE=demo-magento2-dev
 BASE_URL=https://demo-magento2-dev.europe-west1.gcp.storefrontcloud.io
 MIDDLEWARE_URL=https://demo-magento2-dev.europe-west1.gcp.storefrontcloud.io/api
+SSR_MIDDLEWARE_URL=http://localhost:3000/api
 MAGENTO_GRAPHQL_URL=https://magento2-instance.vuestorefront.io:8443/graphql

.github/workflows/public_env_info/enterprise

@@ -2,4 +2,5 @@ ENVNAME=enterprise
 ENVCODE=demo-magento2-enterprise
 BASE_URL=https://demo-magento2-enterprise.europe-west1.gcp.storefrontcloud.io
 MIDDLEWARE_URL=https://demo-magento2-enterprise.europe-west1.gcp.storefrontcloud.io/api
+SSR_MIDDLEWARE_URL=http://localhost:3000/api
 MAGENTO_GRAPHQL_URL=https://magento2-instance.vuestorefront.io:8443/graphql

.github/workflows/public_env_info/production

@@ -2,4 +2,5 @@ ENVNAME=production
 ENVCODE=demo-magento2
 BASE_URL=https://demo-magento2.europe-west1.gcp.vuestorefront.cloud
 MIDDLEWARE_URL=https://demo-magento2.europe-west1.gcp.vuestorefront.cloud/api
+SSR_MIDDLEWARE_URL=http://localhost:3000/api
 MAGENTO_GRAPHQL_URL=https://magento2-instance.vuestorefront.io:8443/graphql

docs/installation-setup/configure-integration.md

@@ -24,6 +24,64 @@ After installation, the first step is configuring the integration using the envi
 
 3. Update values in the `.env` file.
 
+4. Explanation of env variables
+
+    #### Nuxt application configuration options
+    ```
+    VSF_NUXT_APP_ENV=development  # application mode [production|development]
+    VSF_NUXT_APP_PORT=3000        # nuxt server port property
+    VSF_NUXT_APP_HOST=0.0.0.0     # nuxt server host property
+    ```
+
+    #### Storefront and middleware endpoints configuration
+    ```
+    VSF_STORE_URL=https://localhost:3000                # external base url
+    VSF_MIDDLEWARE_URL=https://localhost:3000/api/      # external middleware base url
+    VSF_SSR_MIDDLEWARE_URL=http://localhost:3000/api/   # internal middleware base url
+    ```
+    **NOTE**: *For many infrastructures `middleware_url` and `ssr_middleware_url` will be the same, but sometimes they might be different. For example, when it comes to deployment using a rolling-update strategy on the Kubernetes cluster, the Kubernetes is probing SSR if it's already up. SSR is trying to call middleware using an external URL (market...storefrontcloud.io) rather than localhost:3000/API, while the middleware isn't available publicly yet, because the SSR didn't respond with 200 in the first place.*
+
+    #### Magento 2 endpoints configuration and others
+    ```
+    VSF_MAGENTO_BASE_URL={YOUR_SITE_FRONT_URL}
+    VSF_MAGENTO_GRAPHQL_URL=https://{YOUR_SITE_FRONT_URL}/graphql
+
+    VSF_MAGENTO_EXTERNAL_CHECKOUT_ENABLED=false
+    VSF_MAGENTO_EXTERNAL_CHECKOUT_URL=https://{YOUR_SITE_FRONT_URL}
+    VSF_MAGENTO_EXTERNAL_CHECKOUT_SYNC_PATH=/vue/cart/sync
+    ```
+
+    #### Image provider configuration
+    ```
+    VSF_IMAGE_PROVIDER=cloudinary
+    VSF_IMAGE_PROVIDER_BASE_URL=https://res-4.cloudinary.com/{YOUR_ID}/image/upload/
+    VSF_IMAGE_PROVIDER_DOMAIN=https://res-4.cloudinary.com
+    ```
+
+    #### Redis cache configuration
+    ```
+    VSF_REDIS_ENABLED=false
+    VSF_REDIS_HOST=127.0.0.1
+    VSF_REDIS_PORT=6379
+    VSF_REDIS_KEY_PREFIX=
+    VSF_REDIS_CACHE_INVALIDATE_URL=/cache-invalidate
+    ```
+    #### ReCaptcha configuration
+    ```
+    VSF_RECAPTCHA_ENABLED=false
+    VSF_RECAPTCHA_SITE_KEY=
+    VSF_RECAPTCHA_SECRET_KEY=
+    VSF_RECAPTCHA_HIDE_BADGE=
+    VSF_RECAPTCHA_SIZE=invisible
+    VSF_RECAPTCHA_MIN_SCORE=0.5
+    VSF_RECAPTCHA_VERSION=3
+    ```
+
+    #### Other
+    ```
+    NODE_TLS_REJECT_UNAUTHORIZED=0      # toggle TLS verification (eg. for a local development)
+```
+
 ### 2. Setup store configuration
 
 The `plugins/storeConfigPlugin.ts` plugin loads store configuration data from Magento and saves it into the Pinia store under the `$state.storeConfig` property. By default, the amount of data loaded from Magento is minimal to avoid over-fetching, but as your application grows, you might need to pull more data.

index.html

@@ -0,0 +1,9 @@
+<!doctype html>
+<html>
+<head>
+  <title>This is the title of the webpage!</title>
+</head>
+<body>
+<p>This is an example paragraph. Anything in the <strong>body</strong> tag will appear on the page, just like this <strong>p</strong> tag and its contents.</p>
+</body>
+</html>

packages/theme/.env.example

@@ -1,8 +1,11 @@
 VSF_NUXT_APP_ENV=development
 VSF_NUXT_APP_PORT=3000
+VSF_NUXT_APP_HOST=0.0.0.0
 
 VSF_STORE_URL=https://localhost:3000
 VSF_MIDDLEWARE_URL=https://localhost:3000/api/
+VSF_SSR_MIDDLEWARE_URL=http://localhost:3000/api/
+
 VSF_MAGENTO_BASE_URL={YOUR_SITE_FRONT_URL}
 VSF_MAGENTO_GRAPHQL_URL=https://{YOUR_SITE_FRONT_URL}/graphql
 

packages/theme/modules/core/integrationPlugin/index.ts

@@ -33,10 +33,10 @@ export const integrationPlugin = (pluginFn: NuxtPluginWithIntegration) => (nuxtC
   const configure = (tag: string, configuration: { api: Record<string, ApiClientMethod> }) => {
     const injectInContext = createAddIntegrationToCtx({ tag, nuxtCtx, inject });
     const config = getIntegrationConfig(nuxtCtx, configuration);
-    const { middlewareUrl } = (nuxtCtx as any).$config;
+    const { middlewareUrl, ssrMiddlewareUrl } = (nuxtCtx as any).$config;
 
-    if (middlewareUrl) {
-      config.axios.baseURL = middlewareUrl;
+    if (middlewareUrl || ssrMiddlewareUrl) {
+      config.axios.baseURL = process.server ? ssrMiddlewareUrl || middlewareUrl : middlewareUrl;
     }
 
     // eslint-disable-next-line @typescript-eslint/no-unsafe-argument

packages/theme/nuxt.config.js

@@ -33,7 +33,7 @@ export default () => {
     dev: process.env.VSF_NUXT_APP_ENV !== 'production',
     server: {
       port: process.env.VSF_NUXT_APP_PORT,
-      host: '0.0.0.0',
+      host: process.env.VSF_NUXT_APP_HOST || '0.0.0.0',
     },
     head: {
       title: process.env.npm_package_name || '',
@@ -250,9 +250,11 @@ export default () => {
     env: {
       VSF_MAGENTO_GRAPHQL_URL: process.env.VSF_MAGENTO_GRAPHQL_URL,
     },
-
     publicRuntimeConfig: {
       middlewareUrl: process.env.VSF_MIDDLEWARE_URL || 'http://localhost:3000/api/',
+      ssrMiddlewareUrl: process.env.VSF_SSR_MIDDLEWARE_URL
+        || process.env.VSF_MIDDLEWARE_URL
+        || 'http://localhost:3000/api/',
     },
   };