Magento 2 install local or remote SSH environment using Docker and Visual Studio CODE

To install Magento 2 or any other project you need :

1. Local server(your machine) or remote server with the connection over SSH:
2. Install docker and wget, github, htop
3. Git pull Magento or another project docker pull from the genaker/magento2-project or build docker image
4. start docker image as a working container
5. Change Magento base URL configuration
6. Change localhost 127.0.0.1 or remote HTTP:{your_ip address}
7. Connect Visual Studio Code to the remote docker

1. Connect to the server

In my case, I’m using AWS EC2 AWS Linux 2 instance. Connection command looks like this:

ssh -i *****.pem ec2-user@3.137.***.***

In your case pem key: *****.pem and IP : 3.137.***.*** will be different.

2. Install docker and wget, github, htop

So for this step, I have a special script

Magento-Mono-Docker/install-docker.sh at main · Genaker/Magento-Mono-Docker

What you need is just run it remotely or download and run after.

curl -s https://raw.githubusercontent.com/Genaker/Magento-AWS-Linux-2-Installation/master/install-docker.sh | sudo bash

It might also Sudo user password.

change docker socket permissions:

sudo chmod -R 777 /var/run/docker.sock

install wget git htop

sudo yum install wget,git,htop -y

install file manager for host machine:

sudo yum install mc -y

Additional 1.7 MB of a code we have a fully-featured file manager

mc

or dark theme:

mc -b

3. Docker pull Magento project

docker pull genaker/magento2-project

This step pulls the entire Magento project as a single image. Compared to other docker Magento offerings you will have 100500 different docker images to run a single project. There we have :

One project, one image, one container!

This docker approach uses Supervisord to manage different services inside

Supervisor: A Process Control System

Supervisor is a client/server system that allows Docker to monitor and control a number of processes on UNIX-like operating systems.

It shares some of the same goals of programs like launchd, daemontools, and runit. Unlike some of these programs, it is not meant to be run as a substitute for init as “process id 1”. Instead it is meant to be used to control processes related to a project or a customer, and is meant to start like any other program at boot time.

4. Start docker image as a working container

docker run --name magento2 -d -p 80:80 genaker/magento2-project
#OR you can mount magento root as a volume on a host file system if you need new magento installation 
docker run --name magento2 -d -p 80:80 -p 443:443 -v /tmp:/shared -v /var/www/html/magento:/var/www/html/magento genaker/magento2-project

Read paragraph 99 if you need a new project.

Connect to the magento2 docker container

docker exec -it magento2 bash

check running processes :

supervisorctl status

check processes logs:

supervisorctl tail -f redis stdout

start service of stopped :

supervisorctl start redis

How to connect to Mysql?

just type in the docker

mysql

5. Change Magento base URL

if you are running Magento remotely you should change Magento base_url to your remote server IP address. By default, docker has localhost 127.0.0.1 IP

docker exec -it magento2 /var/www/html/magento/bin/magento config:set web/unsecure/base_url "http://18.222.***.***/"

5. Check if Magento works

got to HTTP://127.0.0.1

or HTTP://ip/

You should see the Magento website:

So we can see by using a single container we can run development or even a production environment from scratch in 5–10 minutes.

7. Connect Visual Studio Code to the remote docker

The Visual Studio Code Remote — Containers extension lets you use a Docker container as a full-featured development environment. It allows you to open any folder inside (or mounted into) a container and take advantage of Visual Studio Code’s full feature set. A devcontainer.json file in your project tells VS Code how to access (or create) a development container with a well-defined tool and runtime stack. This container can be used to run an application or to separate tools, libraries, or runtimes needed for working with a codebase.

Workspace files are mounted from the local file system or copied or cloned into the container. Extensions are installed and run inside the container, where they have full access to the tools, platform, and file system. This means that you can seamlessly switch your entire development environment just by connecting to a different container.

This lets VS Code provide a local-quality development experience including full IntelliSense (completions), code navigation, and debugging regardless of where your tools (or code) are located.

We will need the next extension:

Visual Studio Code Remote — Containers

The Remote — Containers extension lets you use a Docker container as a full-featured development environment. Whether you deploy to containers or not, containers make a great development environment because you can:

• Develop with a consistent, easily reproducible toolchain on the same operating system you deploy to.
• Quickly swap between different, isolated development environments and safely make updates without worrying about impacting your local machine.
• Make it easy for new team members / contributors to get up and running in a consistent development environment.
• Try out new technologies or clone a copy of a code base without impacting your local setup.

Visual Studio Code Remote — SSH

The Remote — SSH extension lets you use any remote machine with a SSH server as your development environment. This can greatly simplify development and troubleshooting in a wide variety of situations. You can:

• Develop on the same operating system you deploy to or use larger, faster, or more specialized hardware than your local machine.
• Quickly swap between different, remote development environments and safely make updates without worrying about impacting your local machine.
• Access an existing development environment from multiple machines or locations.
• Debug an application running somewhere else such as a customer site or in the cloud.

Add a new remote connection.

add next config:

Host Magento2
     HostName 18.222.***.***
     User ec2-user
     IdentityFile {path to the pem file}

connect to the server

Next, you need to install the Docker extension. Each server has its own extension

Attache Visual Studio Code to the Magento docker :

Now we can work inside the remote server docker container like on a local machine.

Also, you can do like this ->

After the extension installs, a new green button will appear in the bottom-left of your status bar. Click this to bring up the command palette, prefilled with available remote commands. If you’d rather avoid using the mouse, you can also find the commands by pressing Ctrl+Shift+P and typing “remote”. The extension will surface in other areas of the UI too, such as the welcome page and folder opening pane.

Let's install Magento 2 React JS Game extension on our server.

composer require genaker/module-react-emojigame

bin/magento setup:upgrade
rm -rf generated/*

No need to recompile. we are using default mode everything will be recompiled on a fly during the first run.

or run:

bin/magento setup:di:compile
bin/magento setup:static-content:deploy -f

As a result, we can see.

Finalized SSH script to run Magento Docker :

# install docker
curl -s https://raw.githubusercontent.com/Genaker/Magento-AWS-Linux-2-Installation/master/install-docker.sh | sudo bash
sudo chmod 666 /var/run/docker.sock
# Run magento container 
docker run --name magento2 -d -p 80:80 genaker/magento2-project
# check docker running containers 
docker ps
# change Magento URL to your remote server IP addres (optional)
docker exec -it magento2 /var/www/html/magento/bin/magento config:set web/unsecure/base_url "http://***.***.***.***/"
# Cahek Magento web site
curl -I http://***.***.***.***/

You should see the result:

# Connect to the Mageto Docker
docker exec -it magento2 bash
# go to magento folder 
cd /var/www/html/magento

You can also run several instances of the Magento on a different port, for example, 666 like this:

docker run --name magento2-my-second-project -d -p 666:80 genaker/magento2-project
## set new url with the port:
docker exec -it magento2-my-second-project /var/www/html/magento/bin/magento config:set web/unsecure/base_url "http://***.***.***.***:666/"

We can see the new Magento Docker website on other port 666:

However, running multiple Magento 2 websites is expansive. Magento’s broken architecture requires Java bases Elastic Search even for a site without a product or with a single product. So we need to stop unused Magento projects with the docker command:

docker stop  magento2-my-second-project

Install Magento Sample Data into Docker :

docker exec -it magento2 bash
cd /var/www/html/magento
git clone https://github.com/magento/magento2-sample-data.git
php -f magento2-sample-data/dev/tools/build-sample-data.php -- --ce-source=.
bin/magento setup:upgrade
bin/magento setup:static-content:deploy -f
bin/magento setup:di:compile

Committing Changes to the Docker Registry

Modify the MAgento Container

We just modified our container and install Magento Sample data and some modules and code changes.

Once you finish modifying the container, exit out of it:

exit

Prompt the system to display a list of launched containers:

docker ps -a

You will need the CONTAINER ID to save the changes you made to the existing image. Copy the ID value from the output.

Commit Changes to Image

Finally, create a new image by committing the changes using the following syntax:

docker commit [CONTAINER_ID] [new_image_name]

Therefore, in our example it will be:

docker commit 62e0302eee0c magento-react
# check images
docker images

Pushing Docker image

Before we push the Docker image, we need to log into Docker hub. We can do this effortlessly using the command-line:

docker login

Once validated, we can push our container to the Docker hub.

but we need to add tags to the image

docker image tag magento-react genaker/magento-react:latest 

Pushing a Docker container image to Docker Hub

To push an image to Docker Hub, you must first name your local image using your Docker Hub username and the repository name that you created through Docker Hub on the web.

You can add multiple images to a repository by adding a specific :<tag> to them (for example docs/base:testing). If it’s not specified, the tag defaults to latest.

Name your local images using one of these methods:

• When you build them, using docker build -t <hub-user>/<repo-name>[:<tag>]
• By re-tagging an existing local image docker tag <existing-image> <hub-user>/<repo-name>[:<tag>]
• By using docker commit <existing-container> <hub-user>/<repo-name>[:<tag>] to commit changes

Now you can push this repository to the registry designated by its name or tag.

$ docker push <hub-user>/<repo-name>:<tag>

The image is then uploaded and available for use by your teammates and/or the community.

To push our MAgento container to the Docker hub, we use the commands below:

docker push genaker/magento-react

With that done, our Docker image is now available in Docker Hub. You can see it by visiting your repository.

Now you can find this Docker image here:

Docker Hub

Now you can remove broken or old containers start your project from this point by running :

docker run --name magento2 -d -p 80:80 -p 443:443 -v /tmp:/shared  genaker/magento-react

99. If you need a new Magento 2 project

Run Magento with mount to the host system:

docker run --name magento2 -d -p 80:80 -p 443:443 -v /tmp:/shared -v /var/www/html/magento:/var/www/html/magento genaker/magento2-project
cd /var/www/html
rm -rf magento
COMPOSER_MEMORY_LIMIT=-1 composer create-project --repository-url=https://repo.magento.com/ magento/project-community-edition magento
# or use git than you need git clone && composer install 
mysql -e 'drop database magento2'; 
mysql -e 'create database magento2';
cd magento
bin/magento setup:install --base-url=http://***.**.*.** --db-host=localhost --db-name=magento2 --db-user=magento --db-password=magento --admin-firstname=Magento --admin-lastname=User --admin-email=user@example.com --admin-user=admin --admin-password=admin123 --backend-frontname=admin --language=en_US --currency=USD --timezone=America/Chicago --use-rewrites=1; \sudo chmod -R 777 var/ generated/ pub/media/ pub/static;
php -d"memory_limit=-1" bin/magento sampledata:deploy
# we need reload becouse opcache timestamp validation is off 
supervisorctl restart php-fpm
# Change to SSL/HTTPS and domain
bin/magento config:set web/secure/base_url https://react-luma.merche.io/
# this magento bag you basicaly must set unsecure/base_usr also or admin will not work 
bin/magento config:set web/unsecure/base_url https://react-luma.merche.io/
bin/magento config:set web/secure/use_in_frontend  1
bin/magento config:set web/secure/use_in_adminhtml  1
# Point your domain to your IP addres or Load ballancer

You can also set production mode in one command :

php bin/magento deploy:mode:set production

This command automatically deploys static content and DO compile.

basically, you don’t need to run separately Magento's silly operations like setup:di:compile and setup:static-content:deploy.

To disable opcache on development :

nano /etc/php.d/10-opcache.ini
;opcache.validate_timestamps = 0
supervisorctl restart php-fpm

Set Up Permissions

You should set correct permissions for the whole Magento 2 installation directory by running the below command:

find . -type f -exec chmod 644 {} \;
find . -type d -exec chmod 755 {} \;
chmod -Rf 775 var
chmod -Rf 775 pub/static
chmod -Rf 775 pub/media
chmod 775 ./app/etc
chmod 644 ./app/etc/*.xml
chmod -Rf 775 bin

You can check your log here:

tail -f var/log/exception.log
tail -f var/log/system.log
tail -f /var/log/php-fpm/www-error.log

change permissions for development :

sudo chmod -R 775 /var/www/html/magento/*

Add your extensions from the git:

mkdir -p app/design/frontend/Genaker/theme-react-luma/
cd app/design/frontend/Genaker/theme-react-luma/
git clone git@github.com:Genaker/Luma-React-PWA-Magento-Theme.git .
mkdir -p app/code/React/React
cd app/code/React/React/
git clone git@github.com:Genaker/reactmagento2.git .
mkdir -p app/code/ReactLuma/Theme
cd app/code/ReactLuma/Theme
git clone git@github.com:Genaker/ReactLuma.git .

Enable CSS critical path

CSS critical path configuration is located on the Stores > Settings > Configuration > ADVANCED > Developer tab. However, the Developer tab is hidden in production mode. Once in production mode, CSS critical path can only be enabled using the CLI.

To enable the CSS critical path

and defer/move JS to the bottom

bin/magento config:set dev/css/use_css_critical_path 1
php bin/magento config:set dev/js/move_script_to_bottom 1

Make sure that there is a critical.css file for your theme. Other non-critical CSS files will be loaded asynchronously.