Deploy Laravel + Vuejs Project with Apache and Linux Server
deploy laravel + vuejs project into production with apache on linux server
Team Urgence
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 >
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.
