Category: Docker

Install Vue Storefront On Ubuntu 16.04

Ref: https://docs.vuestorefront.io/guide/installation/linux-mac.html#requirements
https://medium.com/the-vue-storefront-journal/vue-storefront-how-to-install-and-integrate-with-magento2-227767dd65b2

Requirements
– Docker (with docker-compose installed).
Already included in vue-storefront and vue-storefront-api Docker images (required locally, if you do not use containerization):
– Node.js Active LTS (>=8.0.0)

– Yarn (>=1.0.0)

– ImageMagick (to fit, resize and crop images)

First, Install Docker CE for ubuntu (https://docs.docker.com/install/linux/docker-ce/ubuntu/#install-using-the-repository)

Install using the repository
Before you install Docker CE for the first time on a new host machine, you need to set up the Docker repository. Afterward, you can install and update Docker from the repository.

SET UP THE REPOSITORY
Update the apt package index:

Install packages to allow apt to use a repository over HTTPS:

Add Docker’s official GPG key:

Verify that you now have the key with the fingerprint9DC8 5822 9FC7 DD38 854A E2D8 8D81 803C 0EBF CD88, by searching for the last 8 characters of the fingerprint.

Use the following command to set up the stable repository.

INSTALL DOCKER CE
Update the apt package index.

Install the latest version of Docker CE and containerd, or go to the next step to install a specific version:

Verify that Docker CE is installed correctly by running the hello-world image.

This command downloads a test image and runs it in a container. When the container runs, it prints an informational message and exits.
Check docker version: (https://docs.docker.com/engine/reference/commandline/cli/)

Docker CE is installed and running. The docker group is created but no users are added to it. You need to use sudo to run Docker commands. Continue to Linux postinstall to allow non-privileged users to run Docker commands and for other optional configuration steps.

It’s important to manage docker for non-root user (https://docs.docker.com/install/linux/linux-postinstall/)
Create the docker group.

Add your user to the docker group.

Logout and re-login  so that your group membership is re-evaluated.
Verify that you can run docker commands without sudo.

 

Install Docker Compose
https://docs.docker.com/compose/install/
On Linux, you can download the Docker Compose binary from the Compose repository release page on GitHub. Follow the instructions from the link, which involve running the curl command in your terminal to download the binaries. These step by step instructions are also included below. To ensure you have the latest version, check the Compose repository release page on GitHub.

Apply executable permissions to the binary:

Test the installation.

For installing ImageMagic for Ubuntu 16.04, PHP7.2-FPM and NGINX. pls see http://www.mariorodriguez.co/2018/01/17/install-enable-imagick-on-ubuntu-16.04.html and https://askubuntu.com/questions/769396/how-to-install-imagemagick-for-php7-on-ubuntu

In /etc/php/7.0/fpm/php.ini file, insert ‘extension=imagick.so’ line. then save.
Restart php7.2-fpm and nginx

Check the extension in phpinfo (http://localhost:8080/phpinfo.php)

Installation Vue StoreFront

To get started — first of all we need to install all projects on your local machine. Fortunately it’s very simple step because we do have CLI installer which installs vue-storefront and vue-storefront-api altogether.

First step is to get the VS from our github:

git clone https://github.com/DivanteLtd/vue-storefront.git vue-storefront

Go to the ‘vue-storefront’ directory

MAKE SURE YOU CHECK PORT 8080 (USUALLY IT BEING USED BY NGINX) BY ‘sudo netstat -plntu’. IF THE PORT IS BEING USED BY NGINX, PLS STOP IT FIRST ‘sudo service nginx stop’. PORT 8080 WOULD BE USED BY MAGENTO 2 BACKEND???
MAKE SURE YOU ALREADY ADD USER FOR DOCKER
<ERROR_YARN_INSTALLER_DOCKER_NON_ROOT>

SOLUTION: ADD USER FOR DOCKER. SEE THE ABOVE REVISED DOCKER INSTALL!
</ERROR_YARN_INSTALLER_DOCKER_NON_ROOT>
RUN ‘yarn build’ BEFORE ‘yarn installer’. DONT FORGET REMOVE ‘vue-storefront-api’ DIRECTORY

<ERROR_YARN_INSTALLER_STOREFRONT_NPM>

SOLUTION: https://docs.vuestorefront.io/guide/basics/recipes.html#how-to-prevent-an-error-can%E2%80%99t-build-storefront-npm
RUN: ‘yarn build’ BEFORE ‘yarn installer’.
</ERROR_YARN_INSTALLER_STOREFRONT_NPM>
WORKING!

IF THE NODE JS SERVER IS STOPPED, START/RESTART IT AGAIN BY RUNNING: ‘yarn dev’ in ‘vue-storefront’ directory and ‘vue-storefront-api’ directory. Make sure nginx that use port 8080 is stopped (check port : sudo netstat -plntu)

Then to open the frontend (vue-storefront): http://localhost:3000/ –> OK. BUT WHEN I CLICK ANY LINK ON THE PRODUCT, I GOT ‘The product, category or CMS page is not available in Offline mode. Redirecting to Home.’
to open the backend (vue-storefront-api): http://localhost:8080/ –> NOT OK! I got this printed: Cannot GET /
http://localhost:8080/api –> printed: {“version”:”0.1.0″}

Docker Installation

For linux, download from http://docs.docker.com/engine/installation/linux/. For Ubuntu, read and follow the step here.

  1. Check the kernel machine. The kernel should be newer than 3.1. Also docker requires 64-bit Ubuntu.

    My kernel version is 4.4.0-38 (PASS)
  2. Update APT source
    Update system

    Update package information, ensure that APT works with the https method, and that CA certificates are installed.

    Add the new GPG key

    Then Open the /etc/apt/sources.list.d/docker.list file in your favorite editor. If the file doesn’t exist, create it.

    Make sure the file is empty or remove any existing entries. Add this on file for Ubuntu Trusty 14.04 (LTS)

    Save and close the file.
    Update the system

    Purge the old repo if it exists.

    Verify that APT is pulling from the right repository.

    CONT….