11/3/2021»»Wednesday

Vue Storefront Docker

If you’d like to start developing sites using Vue Storefront, you should start with the Installation guide. For development purposes, you'll likely use the yarn install sequence, which will set up Vue Storefront locally using the automated installer and prepared Docker images for having Elasticsearch and Redis support.

Development mode means you're using a node.js-based server as HTTP service and running the app on the 3000 TCP port. As it's great for local testing, it's not recommended to use the installer and direct-user access to node.js in production configurations.

# Production setup: Bare VPS

When comparing Zalenium and Vue Storefront you can also consider the following projects: selenoid - Selenium Hub successor running browsers within containers. Scalable, immutable, self hosted Selenium-Grid on any platform with single binary. May 12, 2020 The best part in this is Offline mode, as it managed to do this by making extensive use of the browser cache. These are few prerequsites for installation of Vue-storefront on Linux. Run the following command to install the current stable version of docker-compose. Docker Configuration and Setup. Step 1: Creating a Dockerfile. Step 2: Build a Docker Vue JS Image using Dockerfile. Step 3: Start the container from the image we have created. Step 4: Validate the Web Application running inside the Container. Securing Vue JS Application using NGINX. CLI is the main method to install Vue Storefront infrastructure. (which is easier, hassle-free, and intuitive) Bleeding-edge vsf-capybara is default theme while original default theme remains to be chosen at your discretion. You need docker. (opens new window) and docker-compose.

The rest of the config.js entries point out to your vue-storefront-api based Docker and Redis instances, which are required by mage2nosql to work. To make the full import, you should run the following commands (the sequence of commands is important, as, for example, node cli.js categories populates the Redis cache for further use of node cli.

To run Vue Storefront in production mode without Docker/Kubernetes, you'll need the Virtual Private Server with root access (for setup purposes). We assume that you're using Debian GNU Linux in the following steps.

Assumptions for the rest of this tutorial:

  • You have root access to a Debian Linux machine.
  • We'll be using the default local ports 3000 for vue-storefront(opens new window) and 8080 for vue-storefront-api(opens new window); the ports should not be exposed, as they will be hidden behind NGINX proxy.
  • We're using prod.vuestorefront.io as a domain name. Please replace it with your host URL address.
  • We assume that you have an SSL certificate for prod.vuestorefront.io (or your domain, of course). SSL encryption is required for PWA and Service Workers.

General Solution Architecture:USER -> NGINX proxy -> vue-storefront / vue-storefront-api

We'll be hiding the vue-storefront and vue-storefront-api services behind the NGINX proxy. You can use NGINX for caching proxy, but in our case, it will just forward the requests without cache (as VS is pretty fast and caching is not required). The key features we're using are: SSL encryption, gzip-encoding, and URL routing (to merge vue-storefront and vue-storefront-api services under one domain).

# Prerequisites

NOTE

This guide is tested on Ubuntu 18.04 and other major distros. The list will be updated continuously.

Vue Storefront requires Elasticsearch and the Redis server to be installed. By default, in the development mode, both dependencies are provided with the docker-compose.yml Docker images. However, for production purposes, we recommend installing the servers natively.

For the purpose of this tutorial, we will use default packages distributed along with Debian operating systems, without any security hardening, config hardening operations.

Please make sure that your security/devops team has taken a look at the configs you're using and do harden the server configuration before launching your app publicly!

First, let's create the user (as root user):

Then install the Elasticsearch and Redis (as root user):

# Nginx

We decided to use NGINX as an HTTP proxy, exposed in front of the users, handling the network traffic, and dealing with the vue-storefront and the vue-storefront-api apps as a backend.

This is a general rule of setting up a production node.js app, which gives you a lot of flexibility regarding the SSL, gzip compression, URL routing, and other techniques to be configured without additional hassle. You can use any other proxy server for this purpose, such as Varnish or Apache2 + mod_proxy.

Some additional materials:

# NGINX configuration

Free

OPTIONAL

Storefront

In case you have already set up SSL on your own domain, please skip to the next step.

Create NGINX config file from the template (please run as a root user):

You need to replace two lines of the configuration you just downloaded with the actual path to your certificate files with its key.

Install the SSL certificate

SSL secured connection is a must-have requisite for PWA and service-workers by its spec.

In this guide, we will use free Let's Enrypt service to get the SSL certificate for the sake of simplicity.In order to use Let's Encrypt, you need to install certbot, the guide is here(opens new window).

NOTE

As sure as it gets, you can use any other SSL service provider of your choice which best suits your need. It's not free most of time though.

Once certbot installation is done, run the following command to get the certificate information.

Vue storefront docker free

The result would be like as follows :

Replace the paths for certificate and its key in the /etc/nginx/sites-available/prod.vuestorefront.io with the info above as follows :



NOTE

This section runs the standard http://prod.vuestorefront.io and creates a wildcard redirect from http://prod.vuestorefront.io/* -> https://prod.vuestorefront.io/*.

# Now you can run the NGINX with SSL applied :

TIP

After you're done with the installation, once again open /etc/nginx/sites-available/prod.vuestorefront.io and add http2 after the listen 443 ssl (but before the semicolon!). It should look like this:

http2 is not required, but can optimize the experience for browsers that support it. More details on http/2 can be found at here(opens new window)

Vue Storefront Docker Online

# Some notes on the provided nginx config

Here we go with the SSL settings based on our best experiences from the past. Please read details in theNGINX documentation(opens new window) if you like 😉

Vue Storefront SSR responses contain the full markup and JSON objects included for speeding up the first page view. Unfortunately, with significant JS bundle sizes, it can generate a significant network load. We're optimizing it by using gzip compression server-side.

We're using proxy_pass(opens new window) from the ngx_http_proxy_module to pass content from the Vue Storefront node.js server. The content should be available under https://prod.vuestorefront.io/ according to the configuration.

It just works the same way with sub directories too.

The next proxy section is used for serving the API. It's a proxy to vue-storefront-api(opens new window) app running on 8080 port (default config). API will be available under https://prod.vuestorefront.io/api

The last proxy is used for serving product images. It's a proxy to the vue-storefront-api(opens new window) app running on 8080 port (default config). Images will be available under https://prod.vuestorefront.io/img

# Apache2 configuration

Vue storefront docker login

In case you are already using the apache2 web server in your environment as well and can't (or don't want) to use NGINX, you can also set up apache2 as a reverse proxy instead of NGINX. This is done by adding this block to your apache2 virtual host.

You also need to enable mod_proxy(opens new window) for this.

# Vue Storefront and Vue Storefront API

After you have the NGINX set up, you should get a 502 error when accessing the https://prod.vuestorefront.io. This is totally fine! We just missed the most important step, which is running backend services that will power up our installation. Now NGINX is trying to connect to localhost:3000 for vue-storefront and localhost:8080 for vue-storefront-api without any success.

We created a Linux user called vuestorefront and go to /home/www/vuestorefront which is our home directory.

You need to clone the vue-storefront and the vue-storefront-api repos accordingly with the following commands:

C++ Docker Example

Then, you will need to install the required node packages:

... and ...

It may take a few minutes. The phantomjs dependency requires bzip2 to be installed. Once the modules are installed, we can set configuration files for both services.

# Vue Storefront configuration

The full configuration files are available here to download: vue-storefront(opens new window) and vue-storefront-api(opens new window).

Please create the vue-storefront-api/config/local.json and vue-storefront/config/local.json files accordingly by copying default.json into local.json by using cp command:

...and ...

Please find the key sections of the vue-storefront/config/local.json file described in below:

We're setting up the product's endpoint to https://prod.vuestorefront.io/api/catalog (please use your domain accordingly of course). As you may notice, the /api url is proxied by the NGINX to localhost:8080 - our vue-storefront-api instance.

There are 27 more instances of prod.vuestorefront.io to be replaced with your production URL address in this file. Please just do so 😃

If you want to see how the local.json should look like after your modifications, the configs we prepared for prod.vuestorefront.io are available under:

# Vue Storefront API configuration

The provided vue-storefront-api configuration(opens new window) requires almost no changes.

The only lines you need to alter are:

You should put here the allowedHosts for the imageable node to download the product images. The domain name points to the Magento 2 instance where images are sourced. In this example, Magento 2 is running under http://demo-magento2.vuestorefront.io.

# Using your own Magento 2 instance

In this case, you'll have to update magento2 config node with the correct hostname in the vue-storefront-api config file. To get all necessary Magento 2 API data for the api node, navigate to SYSTEM -> Extensions -> Integrations in the Magento 2 Admin.node, navigate to SYSTEM -> Extensions -> Integrations in the Magento 2 Admin.

  • Click Add New Integration
  • Check the necessary permissions (check Catalog, Sales, My Account, and Carts on the API Permissions tab )
  • Click Activate
  • Copy necessary keys, secrets, and tokens into the api section of vue-storefront-api config

# Build VS

Before we can run Vue Storefront and Vue Storefront API, we should build it in production mode. To do so, please execute the following commands:

# Data import

Vue Storefront needs to have some data in the Elasticsearch to properly display products and categories. Of course, you can install mage2vuestorefront(opens new window) and configure the data pump to synchronize and update the Elasticsearch index whenever data is being changed in Magento. For the purpose of this tutorial, we'll just restore the data from the JSON file.

You can easily dump your current VS index using the following command (your local installation):

Now in the var/catalog.json you have your current database dump. Please transfer this file to the server—for example, using the following ssh command:

Then, after logging in to your prod.vuestorefront.io server as a vuestorefront, you can run the following command to import the data:

# Running the Vue Storefront and Vue Storefront API

After everything set, you can just start the vue-storefront and vue-storefront-api:

Both applications use PM2 process manager(opens new window) in production mode (start commands) to manage and respawn the node.js processes when needed.

# Cache Strategies

# Varnish cache for VSF

Vue Storefront has multiple layers of cache, and the forefront cache is Varnish which serves a request just as fast as a static HTML page once it's hit. You can install it from here(opens new window).

# Vue Storefront Proxy

Vue Storefront can be set up with OpenResty(opens new window) based reverse proxy serving cached pages from Redis without Vue StoreFront (VSF or VSF API) calls, using LUA. Here(opens new window) is the github repo.

# Production setup - using Docker / Kubernetes

Docker

To be prepared.

Most Viewed Posts