[Vuejs]-Deploying Vue Cli 3 SPA with Laravel backend

by

2👍

✅

You need to setup two separated servers for frontend and backend. You could make api reachable via api.example.com and frontend via example.com. The nginx config should look something like this:

#laravel.conf
server {
    listen 80;
    root /var/www/html/project_name/api;
    index  index.php index.html index.htm;
    server_name  api.example.com www.api.example.com;

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

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

#vue.conf
server {
  listen 80;
  root /var/www/html/project_name/web/dist;
  index index.html;
  server_name example.com www.example.com;

  location / {
    try_files $uri $uri/ /index.html;    
  }
}

You could also direct all traffic to you index.php and set it up so Route::any('/') returns the static page, including the static assets and all api routes are handled via Route::any('/api/foo').

👤oshell

1👍

The following configuration works for me on local environment – home directory on ubuntu.

Folder structure

  • example/dist – vue application
  • example/laravel – laravel api application
  • example/laravel/public – laravel public directory
  • example/laravel/public/images – laravel api images directory

Urls

  • example.lo – vue application
  • example.lo/api – laravel api
server {   

    # server name and logs
    server_name example.lo;
    access_log /var/log/nginx/example.lo_access.log;
    error_log /var/log/nginx/example.lo_error.log;

    root /home/username/example/laravel/public/;    
    index index.html index.php;

    # location for vue app 
    location / {
        root /home/username/example/dist/;
        try_files $uri $uri/ /index.html;
    }

    # location for laravel api
    location /api {
        try_files $uri $uri/ /index.php$is_args$args;
    }

    # location for api images
    location /images {
        try_files $uri $uri/ =404;
    }

    # pass the PHP scripts to FastCGI
    location ~ \.php$ {
        include snippets/fastcgi-php.conf;
        fastcgi_pass unix:/run/php/php7.4-fpm.sock;
    }
}
👤Igor Balamut

Leave a comment