Deploying Vue Cli 3 SPA with Laravel backend - laravel

Question

I have a Vue Cli 3 SPA application which makes api calls to a Laravel Backend. I've created a LEMP droplet on DigitalOcean, and I've cloned the two projects in the /var/www/html directory. api/ for the backend, web/ for the frontend. I've configured nginx root to web/dist/index.html. Now, how can I make api calls, since the root of the project is index.html?
I've searched a lot. I saw solutions where I must copy the dist folder's contents to api/public, and adjust nginx's root to be api/public/index.html. But that doesn't change the fact that I still can't make api calls, because index.php is never reached.
Could you please advice me how you do it? Should I create a subdomain?
Thanks!
UPDATE
I've tried this according to oshell's answer:
# For the vue app
server {
listen 80;
root /var/www/html/web/dist;
index index.html;
server_name XXX.XXX.XX.XXX # the ip addreess that I have
error_page 404 /;
location / {
try_files $uri $uri/ /index.html;
}
}
# for the laravel application
server {
listen 80;
root /var/www/html/api/public;
index index.php;
server_name XXX.XXX.XX.XXX/api;
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;
}
}
Now whatever I open, it just goes to the vue application. If I try to make an api call to XXX.XXX.XX.XXX/api/something from the vue app, I've got 405 Method not allowed

Answer 1

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').

Answer 2

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;
}
}