DEV Community

Cover image for Self Guide for Deploying Laravel and React Applications on a VPS
Emmanuel (Emmo00)
Emmanuel (Emmo00)

Posted on

Self Guide for Deploying Laravel and React Applications on a VPS

#laravel #react #vps #linux

This is a documentation of the steps I took in deploying my Laravel and React application to a VPS.

If you're reading along, I'm sure it'd be useful irrespective of the application stack.

1. Initial VPS Setup

Before deploying your applications, you need to prepare your server environment.

Update Your System 

sudo apt update && sudo apt upgrade -y
Enter fullscreen mode Exit fullscreen mode

Install Essential Dependencies 

sudo apt install apache2 unzip curl git -y
Enter fullscreen mode Exit fullscreen mode

2. Laravel Backend Deployment

Add ondrej/php PPA as a software repository. 

sudo add-apt-repository ppa:ondrej/php # Press enter when prompted. sudo apt update
Enter fullscreen mode Exit fullscreen mode

Install PHP and Required Extensions 

sudo apt install php php-cli php-mbstring php-xml php-bcmath php-tokenizer php-curl php-zip php-mysql -y
Enter fullscreen mode Exit fullscreen mode

Install Composer 

curl -sS https://getcomposer.org/installer | php sudo mv composer.phar /usr/local/bin/composer
Enter fullscreen mode Exit fullscreen mode

Set Up MySQL Database 

sudo apt install mysql-server -y sudo mysql_secure_installation
Enter fullscreen mode Exit fullscreen mode

Create a database and user for your Laravel application:

sudo mysql -u root -p
Enter fullscreen mode Exit fullscreen mode

Within the MySQL prompt:

CREATE DATABASE laravel_db; CREATE USER 'laravel_user'@'localhost' IDENTIFIED BY 'your_strong_password'; GRANT ALL PRIVILEGES ON laravel_db.* TO 'laravel_user'@'localhost'; FLUSH PRIVILEGES; EXIT;
Enter fullscreen mode Exit fullscreen mode

Deploy Your Laravel Application 

cd /var/www git clone https://github.com/your-username/your-laravel-project.git laravel cd laravel composer install cp .env.example .env
Enter fullscreen mode Exit fullscreen mode

Edit the .env file with your database credentials:

DB_CONNECTION=mysql DB_HOST=127.0.0.1 DB_PORT=3306 DB_DATABASE=laravel_db DB_USERNAME=laravel_user DB_PASSWORD=your_strong_password
Enter fullscreen mode Exit fullscreen mode

Generate the application key and run migrations:

php artisan key:generate php artisan migrate --seed php artisan config:cache
Enter fullscreen mode Exit fullscreen mode

Configure Apache for Laravel

Create a new Apache configuration file:

sudo nano /etc/apache2/sites-available/laravel.conf
Enter fullscreen mode Exit fullscreen mode

Add the following configuration:

<VirtualHost *:80>  ServerAdmin webmaster@yourdomain.com DocumentRoot /var/www/laravel/public ServerName api.yourdomain.com <Directory /var/www/laravel/public>  AllowOverride All Require all granted </Directory>  ErrorLog ${APACHE_LOG_DIR}/laravel_error.log CustomLog ${APACHE_LOG_DIR}/laravel_access.log combined </VirtualHost>
Enter fullscreen mode Exit fullscreen mode

Enable the site and required modules:

sudo a2ensite laravel.conf sudo a2enmod rewrite sudo systemctl restart apache2
Enter fullscreen mode Exit fullscreen mode

Set Proper File Permissions 

sudo chown -R www-data:www-data /var/www/laravel sudo chmod -R 775 /var/www/laravel/storage /var/www/laravel/bootstrap/cache
Enter fullscreen mode Exit fullscreen mode

3. React Frontend Deployment

Step 1: Build Your React Application

On your local development machine:

npm run build
Enter fullscreen mode Exit fullscreen mode

Step 2: Transfer the Build to Your VPS

Using SCP:

scp -r build/ username@your-vps-ip:/var/www/react
Enter fullscreen mode Exit fullscreen mode

Alternatively, you could clone your repository and build directly on the server (I'd recommend the former especially if deploying with a CICD pipeline):

cd /var/www git clone https://github.com/your-username/your-react-project.git react cd react npm install npm run build
Enter fullscreen mode Exit fullscreen mode

Step 3: Configure Apache for React

Create a new Apache configuration:

sudo nano /etc/apache2/sites-available/react.conf
Enter fullscreen mode Exit fullscreen mode

Add the following:

<VirtualHost *:80>  ServerAdmin webmaster@yourdomain.com DocumentRoot /var/www/react/build ServerName yourdomain.com <Directory /var/www/react/build>  Options Indexes FollowSymLinks AllowOverride All Require all granted # This configuration ensures that React Router works correctly RewriteEngine on RewriteCond %{REQUEST_FILENAME} !-f RewriteCond %{REQUEST_FILENAME} !-d RewriteRule ^ index.html [L] </Directory>  ErrorLog ${APACHE_LOG_DIR}/react_error.log CustomLog ${APACHE_LOG_DIR}/react_access.log combined </VirtualHost>
Enter fullscreen mode Exit fullscreen mode

Enable the site:

sudo a2ensite react.conf sudo systemctl restart apache2
Enter fullscreen mode Exit fullscreen mode

4. Secure Your Applications with SSL

For production applications, SSL is essential. Let's Encrypt provides free SSL certificates:

sudo apt install certbot python3-certbot-apache -y sudo certbot --apache -d yourdomain.com -d api.yourdomain.com
Enter fullscreen mode Exit fullscreen mode

Follow the prompts to complete the SSL setup.

5. Set Up Process Management for Laravel

Configure Supervisor for Queue Workers 

sudo apt install supervisor -y sudo nano /etc/supervisor/conf.d/laravel-worker.conf
Enter fullscreen mode Exit fullscreen mode

Add the following configuration:

[program:laravel-worker] process_name=%(program_name)s_%(process_num)02d command=php /var/www/laravel/artisan queue:work --tries=3 --sleep=3 autostart=true autorestart=true user=www-data numprocs=2 redirect_stderr=true stdout_logfile=/var/log/laravel-worker.log
Enter fullscreen mode Exit fullscreen mode

Activate the configuration:

sudo supervisorctl reread sudo supervisorctl update sudo supervisorctl start laravel-worker:*
Enter fullscreen mode Exit fullscreen mode

Set Up Laravel Scheduler 

crontab -e
Enter fullscreen mode Exit fullscreen mode

Add this line:

* * * * * cd /var/www/laravel && php artisan schedule:run >> /dev/null 2>&1
Enter fullscreen mode Exit fullscreen mode

6. Advanced Configuration

Set Up a Load Balancer (Optional)

For high-traffic applications, consider setting up Nginx as a load balancer in front of Apache:

sudo apt install nginx -y
Enter fullscreen mode Exit fullscreen mode

Create a configuration file:

sudo nano /etc/nginx/sites-available/loadbalancer
Enter fullscreen mode Exit fullscreen mode

Add:

upstream backend { server 127.0.0.1:8080; # Add more servers if you have multiple instances } server { listen 80; server_name yourdomain.com; location / { proxy_pass http://backend; proxy_set_header Host $host; proxy_set_header X-Real-IP $remote_addr; } }
Enter fullscreen mode Exit fullscreen mode

Configure Redis for Caching (Optional) 

sudo apt install redis-server -y
Enter fullscreen mode Exit fullscreen mode

Update your Laravel .env file:

CACHE_DRIVER=redis REDIS_HOST=127.0.0.1 REDIS_PASSWORD=null REDIS_PORT=6379
Enter fullscreen mode Exit fullscreen mode

7. Maintenance and Updates

Automating Laravel Updates

Create a simple script:

sudo nano /usr/local/bin/update-laravel
Enter fullscreen mode Exit fullscreen mode

Add:

#!/bin/bash cd /var/www/laravel git pull composer install --no-dev php artisan migrate --force php artisan config:cache php artisan route:cache php artisan view:cache sudo chown -R www-data:www-data /var/www/laravel
Enter fullscreen mode Exit fullscreen mode

Make it executable:

sudo chmod +x /usr/local/bin/update-laravel
Enter fullscreen mode Exit fullscreen mode

Monitoring Your Application

Install monitoring tools:

sudo apt install htop net-tools -y
Enter fullscreen mode Exit fullscreen mode

8. Troubleshooting

Common Laravel Issues

  1. 500 Internal Server Error

    • Check Laravel logs: tail -f /var/www/laravel/storage/logs/laravel.log
    • Check Apache logs: tail -f /var/log/apache2/laravel_error.log

  2. Permission Issues

    • Run: sudo chown -R www-data:www-data /var/www/laravel

Common React Issues

  1. White Screen / Not Loading

    • Check browser console for errors
    • Verify .htaccess file in build directory

  2. API Connection Issues

    • Ensure your .env file in React has the correct API URL

Conclusion

You've now successfully deployed both your Laravel backend and React frontend on a single VPS.

Remember to regularly back up your database and application files, keep your server updated with security patches, and monitor your application's performance as your user base grows.

Up until now we have done the deployment manually, but you should definitely consider setting up a CICD pipeline for easy, automated deployment. GitHub Actions is a good recommendation.

Happy coding!👍🏻

Top comments (1)

Collapse
 
rushab_oswal_34b6204b15db profile image
Rushab Oswal •

This doesn't work for me.
I'm using react router for routing