VueJS + Laravel, Deploy

Jan 22, 2022 · 3 min read · vuejs laravel ubuntu  ·
Share:

At work we had to deploy a project developed with VueJS and Laravel on an Ubuntu server, with Apache, PHP, MariaDB, where everything was versioned on github, it had no development branches, nor fork repositories. Deploying the project had some details that we need to understand and learn so as not to make mistakes in the deployment to production.

Version Details

The versions that were used for the development and deployment of the project are:

  1. NodeJS LTS 16
  2. VueJS 2
  3. PHP 8
  4. Laravel 8
  5. MariaDB 10.6
  6. Apache 2
  7. Ubuntu Server 20.04
  8. Composer 2.2.5

The necessary packages were installed from the official repositories of each tool and also official packages of the operating system, for PHP8 we used PPA repositories, this due to the urgency of the case.

Installation and Configuration

The tasks we perform were automated with Ansible 2.9, among common tasks we can give a simple detail.

  • Required packages for the operating system:
1$ sudo apt install software-properties-common dirmngr apt-transport-https git curl vim make
  • We add the MariaDB 10.6 repository:
1$ sudo apt-key adv --fetch-keys 'https://mariadb.org/mariadb_release_signing_key.asc'
2$ sudo add-apt-repository 'deb [arch=amd64,arm64,ppc64el,s390x] https://mirror1.cl.netactuate.com/mariadb/repo/10.6/ubuntu focal main'
  • We add the PPA repository for PHP8:
1$ sudo add-apt-repository ppa:ondrej/php
  • In our tests we also installed NodeJS 16, but for Ubuntu Server it is not necessary:
1$ curl -fsSL https://deb.nodesource.com/setup_16.x | sudo -E bash -
  • With all the repositories added we start the update of the operating system:
1$ sudo apt update && sudo apt upgrade -y
  • Install the packages for each service:
1$ sudo apt install -y rsync mariadb-client mariadb-server apache2 apache2-utils
  • For PHP8 we specify the version:
1$ sudo apt install -y php8.0 php8.0-common mcrypt php8.0-gd php8.0-cli php8.0-curl php8.0-mysql \
2php8.0-zip libapache2-mod-php8.0 php8.0-odbc php8.0-pgsql php8.0-sqlite3 php8.0-readline\
3php8.0-xml php8.0-intl php8.0-mbstring
  • The installation for Composer:
1$ sudo wget -O /usr/local/bin/composer https://github.com/composer/composer/releases/download/2.2.4/composer.phar
2$ sudo chmod a+x /usr/local/bin/composer

With these important details we have the server ready to run the project, finally we will enable Apache modules and we will leave the VirtualHost detail for the project as a reference.

1$ sudo a2enmod headers rewrite

For the Apache VirtualHost configuration:

 1$ sudo vim /etc/apache2/sites-available/vuejs-laravel.conf
 2---
 3<VirtualHost *:80>
 4    ServerAdmin info@demo.com
 5    DocumentRoot /var/www/html/demo-web/public
 6    <Directory /var/www/html/demo-web/public>
 7    	RewriteEngine On
 8    	Options -Indexes +FollowSymLinks
 9    	AllowOverride All
10    	Order Allow,Deny
11    	Allow from all
12    </Directory>
13
14    <DirectoryMatch \.git>
15    	Order allow,deny
16    	Deny from all
17    </DirectoryMatch>
18
19    LogLevel warn
20    ErrorLog ${APACHE_LOG_DIR}/error.log
21    CustomLog ${APACHE_LOG_DIR}/access.log vhost_combined
22
23    <IfModule mod_rewrite>
24    	RewriteLog ${APACHE_LOG_DIR}/rewrites.log
25    	RewriteLogLevel 0
26    </IfModule> 
27</VirtualHost>

To enable the new configuration:

1$ sudo a2ensite vuejs-laravel.conf
2$ sudo a2dissite 000-default.conf
3$ sudo systemctl reload apache2.service
4$ sudo systemctl restart apache2.service

Project Deployment

This project is a special case, where VueJS does not generate a dist folder, in the development process all the final project is generated in the public folder, after creating the Laravel application it requires the installation of laravel/ui with composer, then it is executed php artisan ui vue to install VueJS, with these steps you have a mix project between Laravel and VueJS.

It is normal for developers to test locally using commands like:

  • NodeJS
1$ npm install && npm run dev
2$ npm run production
3$ npm run watch
  • PHP
1$ php artisan key:generate
2$ php artisan install
3$ php artisan serve

For the deployment on the production server the execution of the previous commands are no longer necessary.

Initially it is necessary to clone the repository with a name similar to the one that appears in the VirtualHost configuration file.

1$ sudo -u www-data git clone git@github.com:username/vuejs-laravel.git /var/www/html/demo-web

Before running the necessary commands, we verify that the modules, vendor and .env files are not versioned, and that the .gitignore file has them listed.

To finish we execute the following commands:

1$ cp /path/.env /var/www/html/demo-web/
2$ cd /var/www/html/demo-web
3$ sudo -u www-data php artisan key:generate
4$ sudo -u www-data composer install

With this we can now test and verify the operation of our project.

References

Translations: