laravel vue inertia digital ocean

Recently, I deployed my Laravel + Vue application on DigitalOcean, and I encountered several challenges while setting up Nginx, SSL, permissions, and automatic deployment. This guide walks through the entire process, sharing the steps I took and the lessons I learned along the way to ensure a smooth deployment.

Prerequisites

Before you begin, ensure you have:

A DigitalOcean Droplet running Ubuntu 22.04+.
A Laravel + Vue project hosted on GitHub.
A domain name (e.g.,app.example.com).
SSH access to your server.
Basic knowledge of Linux commands, Nginx, and Laravel.

Step 1: Set Up the DigitalOcean Droplet

1.1 Create a Droplet

Log in to DigitalOcean.
Click Create > Droplet.
Choose Ubuntu 22.04 LTS.
Select Basic (2 vCPU, 4GB RAM recommended).
Add your SSH key or enable password authentication.
Click Create Droplet.
Copy your Droplet IP Address.

1.2 Connect to the Server

ssh root@your_server_ip

If using a password, enter the root password provided by DigitalOcean.

1.3 Create a New User (For security purposes)

adduser deployer
usermod -aG sudo deployer

Then, switch to the new user:

su - deployer

Step 2: Install Required Packages

Update the system and install dependencies:

sudo apt update && sudo apt upgrade -y
sudo apt install nginx mysql-server php8.3 php8.3-fpm php8.2-cli php8.3-mbstring php8.3-xml php8.3-bcmath php8.3-curl php8.3-zip unzip git curl ufw -y

2.1 Configure MySQL

Run the following command:

sudo mysql_secure_installation

Set a strong root password.
Remove anonymous users.
Disallow root login remotely.
Remove test databases.

Create a database and user for Laravel:

CREATE DATABASE laravel_db;
CREATE USER 'laravel_user'@'localhost' IDENTIFIED BY 'strong_password';
GRANT ALL PRIVILEGES ON laravel_db.* TO 'laravel_user'@'localhost';
FLUSH PRIVILEGES;
EXIT;

Step 3: Clone Your Laravel Vue Project

cd /var/www/
sudo git clone git@github.com:your-username/your-repo.git project-directory
cd project-directory

Give proper permissions:

sudo chown -R www-data:www-data /var/www/project-directory
sudo chmod -R 775 /var/www/project-directory/storage /var/www/project-directory/bootstrap/cache

Step 4: Install Laravel Dependencies

cd /var/www/project-directory
composer install --no-dev --optimize-autoloader

Copy the environment file and generate an app key:

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

Configure database credentials in .env:

DB_DATABASE=laravel_db
DB_USERNAME=laravel_user
DB_PASSWORD=strong_password

Run migrations:

php artisan migrate --seed

Cache configurations:

php artisan config:cache
php artisan route:cache
php artisan view:cache

4.1 Configuring DigitalOcean Spaces

When I needed to store files in DigitalOcean Spaces, I had to add the following credentials to my .env file:

DO_SPACES_KEY=your_access_key
DO_SPACES_SECRET=your_secret_key
DO_SPACES_ENDPOINT=https://your-region.digitaloceanspaces.com
DO_SPACES_REGION=your-region
DO_SPACES_BUCKET=your-bucket-name

Ensure the Laravel project is set to use S3 driver:

FILESYSTEM_DISK=s3

Also, update config/filesystems.php:

's3' => [
    'driver' => 's3',
    'key' => env('DO_SPACES_KEY'),
    'secret' => env('DO_SPACES_SECRET'),
    'endpoint' => env('DO_SPACES_ENDPOINT'),
    'region' => env('DO_SPACES_REGION'),
    'bucket' => env('DO_SPACES_BUCKET'),
    'visibility' => 'public',
],

Run:

php artisan config:clear

Step 5: Set Up a Firewall (UFW)

To enhance security, enable the firewall and allow only necessary services:

sudo ufw allow OpenSSH
sudo ufw allow 'Nginx Full'
sudo ufw enable

Verify the firewall status:

sudo ufw status

Step 6: Check Logs for Errors

During deployment, I faced some issues, and checking logs was extremely helpful. If you run into any problems, check the following logs:

Laravel logs: storage/logs/laravel.log
Nginx logs: /var/log/nginx/error.log
PHP logs: /var/log/php8.2-fpm.log
System logs: journalctl -xe

To view real-time Laravel logs, use:

tail -f storage/logs/laravel.log

Step 7: Set Up Nginx

Create an Nginx configuration file:

sudo nano /etc/nginx/sites-available/project-directory

Add the following:

server {
    listen 80;
    server_name app.example.com;
    root /var/www/project-directory/public;

    index index.php index.html;

    location / {
        try_files $uri $uri/ /index.php?$query_string;
    }

    location ~ \.php$ {
        include snippets/fastcgi-php.conf;
        fastcgi_pass unix:/run/php/php8.2-fpm.sock;
        fastcgi_param SCRIPT_FILENAME $document_root$fastcgi_script_name;
        include fastcgi_params;
    }
}

Enable the site and restart Nginx:

sudo ln -s /etc/nginx/sites-available/project-directory /etc/nginx/sites-enabled/
sudo systemctl restart nginx

Check Nginx status:

sudo systemctl status nginx

Final Testing

Visit https://app.example.com in a browser and confirm everything works.

Deploying My Laravel + Vue Project on DigitalOcean: A Comprehensive Guide

Table of contents