title: Deploying Vue Cli 3 SPA with Laravel backend
body: <p>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 <code>/var/www/html</code> directory. <code>api/</code> for the backend, <code>web/</code> for the frontend. I've configured nginx root to <code>web/dist/index.html</code>. Now, how can I make api calls, since the root of the project is <code>index.html</code>?</p>
  
  <p>I've searched a lot. I saw solutions where I must copy the dist folder's contents to <code>api/public</code>, and adjust nginx's root to be <code>api/public/index.html</code>. But that doesn't change the fact that I still can't make api calls, because <code>index.php</code> is never reached.</p>
  
  <p>Could you please advice me how you do it? Should I create a subdomain?</p>
  
  <p>Thanks!</p>
  
  <p><strong>UPDATE</strong></p>
  
  <p>I've tried this according to oshell's answer:</p>
  
  <pre><code># 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;
          }
  }
  </code></pre>
  
  <pre><code># 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;
          }
  
  }
  </code></pre>
  
  <p>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 <code>405 Method not allowed</code></p>