Deploy Laravel + Vuejs Project with Apache and Linux Server

There are lots of courses and articles that talks about coding but less on how to deploy the project to production. I ran into a situation where I must put a project into production, since I am a new developer I find it hard. Luckily, we have google on our side and I have seen few tutorials regarding my issues. I followed their tutorials but things went side ways on my part, I don't know why, same goes with other tutorias. Since none had worked, I came up with my own tutorials out of their ideas that puts up my project into production. Below I will discuss on how thinks worked out for me.

Desclaimer: This tutorial below works 100% on a project I deployed. This may not work accurately on your project but I least you got an idea on how to make it work on your side.

Prerequisites :

You must have a LAMP stack properly configured on your server You need the root access or sudo privileges on the server. Technical Details:

PHP 7.3.28 MYSQL 8.0.25 NODE 13.14.0 COMPOSER 2.0.14 SETUP LARAVEL (BACKOFFICE)

STEP 1 : Clone your project to your specified directory and install composer

$ cd /var/www/backoffice
$ git clone https://github.com/laravel/laravel.git .
$ composer install --ignore-platform-reqs

STEP 2 : In your project root directory you will see .env.example file. Duplicate and name it .env and generate a new key

$ cp .env.example .env
$ php artisan key:generate

STEP 3 : Update the .env content to your requirements

APP_NAME=ProjectName

APP_ENV = production

APP_DEBUG = false

APP_URL=full_url_of_your_website

STEP 4 : We also have to create and migrate your database. Make sure that the environment variables in your .env file matched with your database credentials

DB_CONNECTION=mysql

DB_HOST=mysql

DB_PORT=3306

DB_DATABASE=laravel

DB_USERNAME=root

DB_PASSWORD=password

STEP 5 : You might need to cache and link you storage to public folder, in command type:

$ php artisan config:cache
$ php artisan storage:link

SETUP VUEJS (FRONTOFFICE)

STEP 1 : Clone your project to your specified directory and install npm

$ cd /var/www/frontoffice
$ git clone https://github.com/laravel/laravelfront.git .
$ npm install

STEP 2 : Update .env file to your requirements.

Notice: This is only applicable if you have these variables on your router as base url and the values are based on your setup of virtual host.

VUE_APP_API_URL=https://MYSITE.COM:8080/api/v1/
VUE_APP_STORAGE_URL=https://MYSITE.COM:8080/

STEP 3 : When everything is ready, compile your project by running a command:

$ npm run build

Notice: This will create a new folder name DIST, which will be used as your document root on the follow steps below.

SETUP VIRTUAL HOST

In this part, we have two options since we have projects: laravel as backoffice and vuejs as frontoffice. We can create each project their own virtual host. For simplicity, we will create only 1 vhost, which is what I did to deploy a laravel+vuejs project. Below is a sample server block of a vhost. We will modify this to our requirements.

< VirtualHost *:80 >
  ServerAdmin webmaster@localhost
  DocumentRoot /var/www/html/public
  ErrorLog ${APACHE_LOG_DIR}/error.log
  CustomLog ${APACHE_LOG_DIR}/access.log combined
< / VirtualHost >

NOTICE : By default apache has a configuration file named 000-default.conf that is already up and running which can be found in /etc/apache2/sites-available/

STEP 1 : Create a virtual host file for your project by duplicating the default of apache.

$ sudo cp /etc/apache2/sites-available/000-default.conf /etc/apache2/sites-available/my-server.conf

STEP 2 : Modify the server block to your requirements

$ sudo nano /etc/apache2/sites-available/my-server.conf

Listen 80
Listen 8080

< VirtualHost *:80 >
    ServerName servernamehere.com
    DocumentRoot /path/to/frontoffice/dist/
        FallbackResource /index.html
        AllowOverride All
       ErrorLog ${APACHE_LOG_DIR}/error.log
    CustomLog ${APACHE_LOG_DIR}/access.log combined

< / VirtualHost >

< VirtualHost *:8080 >

    DocumentRoot /path/to/backoffice/public/
   
        Options Indexes FollowSymLinks MultiViews
        AllowOverride All
        Order allow,deny
        allow from all
        Require all granted
   
    ErrorLog ${APACHE_LOG_DIR}/error.log
    CustomLog ${APACHE_LOG_DIR}/access.log combined

< / VirtualHost >

STEP 3 : Enable created vhost and restart apache

$ sudo a2ensite my-server.conf

$ sudo systemctl restart apache2

NOTICE : After restarting the Apache server, you will be able to access your Laravel + Vuejs project in the browser.

FINAL NOTES

So here we go, you have learned how to deploy laravel backoffice with vuejs as frontoffice on linux server. As well as how to adjust vertualHost file. This might not work on you if you have a different setup made especially on vuejs/frontoffice. In my vuejs I have my .env file that directs the route to my backoffice. Please leave a comment below if you have some inputs to share or question that you did not understand. Thank you and happy coding.

reference: https://urgence-web.com/blog/deploy-laravel-vuejs-project-with-apache-and-linux-server