VueJS + Laravel, Deploy

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

En el trabajo nos toco desplegar un proyecto desarrollado con VueJS y Laravel en un servidor Ubuntu, con Apache, PHP, MariaDB, donde todo estaba versionado en github, no tenia ramas de desarrollo, ni tampoco repositorios fork. Desplegar el projecto tuvo algunos detalles que necesitamos entender y aprender para no cometer errores en el despliegue a producción.

Detalle de Versiones

Las versiones que se utilizaron para el desarrollo y despliegue del proyecto son:

  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

Los paquetes necesarios fueron instalados desde los repositorios oficiales de cada herramienta y también paquetes oficiales del sistema operativo, para PHP8 utilizamos repositorios PPA, esto por las urgencias del caso.

Instalación y Configuración

Las tareas que realizamos fueron automatizadas con Ansible 2.9, entre tareas comunes podemos dar un detalle simple.

  • Paquetes necesarios para el sistema operativo:
1$ sudo apt install software-properties-common dirmngr apt-transport-https git curl vim make
  • Agregamos el repositorio MariaDB 10.6:
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'
  • Agreamos el repositorio PPA para PHP8:
1$ sudo add-apt-repository ppa:ondrej/php
  • En nuestras pruebas también instalamos NodeJS 16, pero para el servidor Ubuntu Server no es necesario:
1$ curl -fsSL https://deb.nodesource.com/setup_16.x | sudo -E bash -
  • Con todos los repositorios agregados iniciamos la actualización del sistema operativo:
1$ sudo apt update && sudo apt upgrade -y
  • Instalamos los paquetes para cada servicio:
1$ sudo apt install -y rsync mariadb-client mariadb-server apache2 apache2-utils
  • Para PHP8 especificamos la versión:
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
  • La instalación para 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

Con estos detalles importantes tenemos listo el servidor para correr el proyecto, por último habilitaremos módulos Apache y dejaremos el detalle del VirtualHost para el proyecto como referencia.

1$ sudo a2enmod headers rewrite

Para la configuración VirtualHost de Apache:

 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>

Para habilitar la nueva configuración:

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

Despliegue del Proyecto

Este proyecto es un caso especial, donde VueJS no genera una carpeta dist, en el proceso de desarrollo todo el proyecto final se genera en la carpeta public, luego de crear la aplicación Laravel reqiere de la instalación laravel/ui con composer, luego se ejecuta php artisan ui vue para instalar VueJS, con estos pasos se tiene un proyecto mix entre Laravel y VueJS.

Es normal que los desarrolladores para las pruebas en local utilicen comandos como:

  • 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

Para el desplieqgue en el servidor de producción la ejecución de los comandos anteriores ya no son necesarios.

Inicialmente es necesario clonar el repositorio con un nombre similar al que figura en el archivo de configuración del VirtualHost.

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

Antes de ejecutar los comandos necesarios, verificamos que los archivos modules, vendor y .env no esten versionados, y que el archivo .gitignore los tenga en su lista.

Para finalizar ejecutamos los siguientes comandos:

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

Con esto ya podemos probar y verificar el funcionamiento de nuestro proyecto.

Referencias

Traducciones: