Sharing local Docker Magento 2 development environment over the web

Sharing local Docker Magento 2 development environment over the web

November 27, 2020

By Dmytro Shkoliar, Senior Software Engineer at InterLogic

Preamble

Today’s e-commerce market stats show us that the amount of web visitors using mobile devices has increased dramatically in the last few years and continues to do so. Most visitors access web resources via their smartphones.

Multiple companies, which are specialized in Magento development, have released their PWA implementations of Magento web-shops to improve customer experience in online shopping. Magento (as a company) also isn’t staying behind and preparing its own PWA implementation to release in the near future.

Magento developers, especially frontend ones, are constantly looking for the best ways of testing Magento with mobile devices. While browser developer tools have solutions for such type of tests, they are not perfect. It is just an emulation of mobile device behavior and screen-size that does not represent real device usage.

Tests on real physical mobile devices are always more accurate, they give an understanding of how a website or PWA will perform on the end-user side.

Magento 2 Ngrok module & Ngrok docker image

To make developers' life easier, I’ve made a set of tools to make it possible to test the local Docker Magento development environments with real mobile devices over the internet. This is done with the help of ngrok secure tunnelling service.

With the help of these tools, you can get a special link to the Magento web-shop in your local development environment. It makes a locally running web-shop accessible over the internet so that it can be shared to colleagues, testers or simply used for quick testing by the developer itself to check how the latest changes are being performed. If your code works on your machine now you can prove it! 😄

Toolset components

Magento 2 ngrok - Magento 2 module for ngrok service support. It automatically updates Magento base url based on the domain used in the request. It modifies full-page and block-html caching to separate Magento caches for local and ngrok domains. There are no broken links or non-loaded scripts and styles while browsing Magento web instance. 

Docker Ngrok - A Docker image for ngrok service to expose a local docker environment or any other local server to the public internet over secure tunnels. The image is built using official busybox:glibc docker image, so no third-party libraries are used, only official busybox and ngrok binary.

Installation

First of all, you will need to install the Magento 2 Ngrok module to your local Magento 2 dev environment. To do it, simply run the command below

composer require --dev shkoliar/magento-ngrok

and to enable the module

bin/magento module:enable Shkoliar_Ngrok

Optionally, you may also need to run a few extra commands to ensure that the enabled modules are properly registered and classes are generated. Here they are: bin/magento setup:upgrade, bin/magento setup:di:compile.

Docker Ngrok does not require installation itself. Docker image will be automatically downloaded at the first usage.

Usage example

The example below assumes that you have a running web server Docker container named dev_web_1 with exposed port 80 and dev_default is the name of the default network of your docker project. Make sure that your web server is configured not to redirect non-SSL ports to https. As a possible solution, add extra not redirecting non-SSL port especially for ngrok service.

docker run --rm -it -p 0.0.0.0:4551:4551/tcp \

         --link dev_web_1 --net dev_default \

         shkoliar/ngrok ngrok http dev_web_1:80

Also, it is possible to pass more ngrok arguments for fine-tuning, for example

docker run --rm -it -p 0.0.0.0:4551:4551/tcp \

      --link dev_web_1 --net dev_default \

      shkoliar/ngrok ngrok http -region=eu \

      -bind-tls=true dev_web_1:80

The command above includes a defined region parameter -region=eu to tell ngrok service to use servers from the European region.

Parameter -bind-tls=true instructs ngrok service to only use https for tunneling session.

Part of projects

You may check real-life usage of this toolset in our Mage2click’s project. Pay attention to the bin/share command and how it is implemented.

Summary

With the help of a few commands above, developers are getting the ability to temporarily share their work with anyone over the web. All sharing sessions are temporary and fully controlled by the developer. Once the sharing session is closed, all public links become inactive while the local environment stays working as before.

As a result, we are getting a useful tool which is not adding any extra complexity to the development environment and can be configured as a simple short command to run as we did in our project listed above.

Thanks for reading this article and hope it will help you in your day-to-day work!