Why don't you include Vue.js in Docker's Laravel! !!

"Introduction"

I built a Laravel + Apache + MySQL environment with previous article, but I want to use Vue.js for my front. I forgot that I had thought that, and after posting, I modified the Dockerfile and rebuilt it, so I will share that as well.

Editing "Dockerfile"

Now, let's actually play with the Dockerfile.

Put node.js to install Vue.js

In the first place, instead of describing the installation of Vue.js in the Dockerfile, insert node.js for the time being, build it, and then do npm install. So from here I will enter the commands to install node.js.

FROM php:7.4-apache

ADD php.ini /usr/local/etc/php/
ADD 000-default.conf /etc/apache2/sites-enabled/

RUN cd /usr/bin && curl -s http://getcomposer.org/installer | php && ln -s /usr/bin/composer.phar /usr/bin/composer

RUN apt-get update \
    && apt-get install -y \
    git \
    zip \
    unzip \
    vim \
    libpng-dev \
    libpq-dev \
    gnupg \
    && docker-php-ext-install pdo_mysql

#Add from here
RUN curl -sL https://deb.nodesource.com/setup_11.x | bash -
RUN apt-get install -y nodejs
RUN npm install npm@latest -g
#Add up to here

RUN mv /etc/apache2/mods-available/rewrite.load /etc/apache2/mods-enabled
RUN /bin/sh -c a2enmod rewrite

Yes, easy. The technology is really amazing, isn't it? (Other personnel) It seems that my environment is Ubuntu and it's different, so it's a little more work.

It's okay to finish with this, but I'll add Mr. Sudo, who is useful. (It's sudo)

FROM php:7.4-apache

ADD php.ini /usr/local/etc/php/
ADD 000-default.conf /etc/apache2/sites-enabled/

RUN cd /usr/bin && curl -s http://getcomposer.org/installer | php && ln -s /usr/bin/composer.phar /usr/bin/composer

RUN apt-get update \
    && apt-get install -y \
    git \
    zip \
    unzip \
    vim \
    libpng-dev \
    libpq-dev \
    gnupg \
    && docker-php-ext-install pdo_mysql

RUN curl -sL https://deb.nodesource.com/setup_11.x | bash -
RUN apt-get install -y nodejs
RUN npm install npm@latest -g
#Add from here
RUN apt-get install -y sudo
#Add up to here

RUN mv /etc/apache2/mods-available/rewrite.load /etc/apache2/mods-enabled
RUN /bin/sh -c a2enmod rewrite

With this, Mr. Sudo has also been added. Build again.

> docker-compose build
> docker-compose up -d
> docker -it exec "Container name" bash

Check if it was actually installed.

root@xxxxxxxxxxxx:/var/www/html# sudo --version
Sudo version 1.8.27
root@xxxxxxxxxxxx:/var/www/html# npm --version
6.14.8

Now all you have to do is add Vue.js. From here, we will edit the package.json in the Laravel project that we actually created.

{
    "private": true,
    "scripts": {
        "dev": "npm run development",
        "development": "cross-env NODE_ENV=development node_modules/webpack/bin/webpack.js --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js",
        "watch": "npm run development -- --watch",
        "watch-poll": "npm run watch -- --watch-poll",
        "hot": "cross-env NODE_ENV=development node_modules/webpack-dev-server/bin/webpack-dev-server.js --inline --hot --disable-host-check --config=node_modules/laravel-mix/setup/webpack.config.js",
        "prod": "npm run production",
        "production": "cross-env NODE_ENV=production node_modules/webpack/bin/webpack.js --no-progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js"
    },
    "devDependencies": {
        "axios": "^0.19",
        "cross-env": "^7.0",
        "laravel-mix": "^5.0.1",
        "lodash": "^4.17.19",
        "resolve-url-loader": "^3.1.0",
        "sass": "^1.15.2",
        "sass-loader": "^8.0.0", 
        "vue": "^2.6.11",⇐ Add
        "vue-template-compiler": "^2.6.11"⇐ Add
    }
}

Once added, it will be in the container with the laravel project

> docker exec -it "Container name" bash

Because it goes in / var / www / html

root@xxxxxxxxxxx::/var/www/html# cd "Project name"
root@xxxxxxxxxxx::/var/www/html/"Project name"# npm install

Now you can use Vue.

"Summary"

It was very easy

Then