I have followed the documentation to deploy Laravel and also Vuejs on digitalocean. I have a project with Laravel backend and Vuejs frontend, now what I want is when visit the site Vuejs file should be load and when I call mysite.com/api/ a Laavel api should work this is my nginx please any idea about this?

server {
    listen 80;
    server_name www.mysite.com mysite.com;
    root /var/www/html/accounting-vue/dist;

    add_header X-Frame-Options "SAMEORIGIN";
    add_header X-XSS-Protection "1; mode=block";
    add_header X-Content-Type-Options "nosniff";

    index index.html index.htm index.php;

    charset utf-8;

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

    location /api/ {
        root /var/www/html/accounting/public;
    }

    location = /favicon.ico { access_log off; log_not_found off; }
    location = /robots.txt  { access_log off; log_not_found off; }

    error_page 404 /;

    location ~ \.php$ {
        fastcgi_pass unix:/var/run/php/php7.2-fpm.sock;
        fastcgi_index index.php;
        fastcgi_param SCRIPT_FILENAME $realpath_root$fastcgi_script_name;
        include fastcgi_params;
    }

    location ~ /\.(?!well-known).* {
        deny all;
    }
}

These answers are provided by our Community. If you find them useful, show some love by clicking the heart. If you run into issues leave a comment, or add your own answer to help others.

×
2 answers

Fixed, I change the nginx conf file to this

server {
    listen 80;
    server_name www.mysite.com mysite.com;
    root /var/www/accounting/public;

    add_header X-Frame-Options "SAMEORIGIN";
    add_header X-XSS-Protection "1; mode=block";
    add_header X-Content-Type-Options "nosniff";

    index index.html index.htm index.php;

    charset utf-8;

    location / {
        root /var/www/accounting-vue/dist;
        try_files $uri $uri/ /index.php?$query_string;
    }

    location = /favicon.ico { access_log off; log_not_found off; }
    location = /robots.txt  { access_log off; log_not_found off; }

    error_page 404 /;

    location ~ \.php$ {
        fastcgi_pass unix:/var/run/php/php7.2-fpm.sock;
        fastcgi_index index.php;
        fastcgi_param SCRIPT_FILENAME $realpath_root$fastcgi_script_name;
        include fastcgi_params;
    }

    location ~ /\.(?!well-known).* {
        deny all;
    }
}

  • How did you handle the /api routing? I am trying to achieve the same but in my case, both Lumen and VueJs project are in the same folder.

    • @satyen I ran into the same issue with both in the same folder, this is mywebsite config for nginx that worked for me. Hope it helps.

      server {
              # Port that nginx should listen on
              listen 80;
              # document root
              root /home/username/projectfolder/public;
              # your domain or ip address
              server_name mywebsite.com;
      
      
      
              # priority file extensions
              index index.php index.html index.htm index.nginx-debian.html;
      
              charset utf-8;
      
              # your domain or ip address
              server_name mywebsite.com;
      
      
              # check the existence of files matching a provided url, and forward to 404 if not found
              # This is very important
              location / {
                      try_files $uri $uri/ /index.php?$query_string;
              }
      
              # Serve static files directly
              location ~* ^/storage/(.*)\.(jpg|jpeg|gif|bmp|png|ico)$ {
                      access_log off;
              }
      
              error_page 404 /index.php;
      
              # handles php processing
              location ~ \.php$ {
                      fastcgi_pass unix:/var/run/php/php7.4-fpm.sock;
                      fastcgi_index index.php;
                      fastcgi_param SCRIPT_FILENAME $document_root$fastcgi_script_name;
                      include fastcgi_params;
              }
              # prevent any .htaccess files from being served to the user
              location ~ /\.ht {
                      deny all;
              }
      
      
      
      }
      
      • Thank you @jahchap for the configuration file. I was able to fix the same using the below:

        Reference Link:

        # This config will host your main [Laravel] GUI application at /, and any additional [Lumen] webservices at /api/v1 and /api/v2...
        # This also works perfectly for all static file content in all projects
        # This is full of debug comments so you can see how to print debug output to browser! Took me hours to nail this perfect config.
        
        # Example:
        # http://example.com - Main Laravel site as usual
        # http://example.com/about - Main Laravel site about page as usual
        # http://example.com/robots.txt - Main Laravel site static content as usual
        # http://example.com/api/v1 - Lumen v1 api default / route
        # http://example.com/api/v1/ - Lumen v1 api default / route
        # http://example.com/api/v1/users - Lumen v1 api users route
        # http://example.com/api/v1/robots.txt - Lumen v1 api static content
        # http://example.com/api/v2 - Lumen v2 api default / route
        # http://example.com/api/v2/ - Lumen v2 api default / route
        # http://example.com/api/v2/users - Lumen v2 api users route
        # http://example.com/api/v2/robots.txt - Lumen v2 api static content
        
        
        # Handles main / site plus plus additional /api/v1 sites
        server {
                # Listing port and host address
                listen 80;
                #listen 443;
                server_name servername.com;
        
                # SSL certificates
                #ssl on;
                #ssl_certificate /etc/nginx/ssl/example.com.pem;
                #ssl_certificate_key /etc/nginx/ssl/example.com.key;
        
                # Enables server-side protection from BEAST attacks
                # http://blog.ivanristic.com/2013/09/is-beast-still-a-threat.html
                #ssl_prefer_server_ciphers on;
        
                # Disable SSLv3(enabled by default since nginx 0.8.19) since it's less secure then TLS http://en.wikipedia.org/wiki/Secure_Sockets_Layer#SSL_3.0
                #ssl_protocols TLSv1 TLSv1.1 TLSv1.2;
        
                # Ciphers chosen for forward secrecy and compatibility
                # http://blog.ivanristic.com/2013/08/configuring-apache-nginx-and-openssl-for-forward-secrecy.html
                #ssl_ciphers "ECDHE-RSA-AES256-GCM-SHA384:ECDHE-RSA-AES128-GCM-SHA256:DHE-RSA-AES256-GCM-SHA384:DHE-RSA-AES128-GCM-SHA256:ECDHE-RSA-AES256-SHA384:ECDHE-RSA-AES128-SHA256:ECDHE-RSA-AES256-SHA:ECDHE-RSA-AES128-SHA:DHE-RSA-AES256-SHA256:DHE-RSA-AES128-SHA256:DHE-RSA-AES256-SHA:DHE-RSA-AES128-SHA:ECDHE-RSA-DES-CBC3-SHA:EDH-RSA-DES-CBC3-SHA:AES256-GCM-SHA384:AES128-GCM-SHA256:AES256-SHA256:AES128-SHA256:AES256-SHA:AES128-SHA:DES-CBC3-SHA:HIGH:!aNULL:!eNULL:!EXPORT:!DES:!MD5:!PSK:!RC4";
        
                # Default index pages
                index index.html index.php;
        
                # Default character set
                charset utf-8;
        
                # Turn off /var/log/nginx/access.log writes
                access_log off;
                log_not_found off;
        
                # Send file is an optimization, but does not work
                # across unix sockets which I use for php fpm so is best
                # used for local static content only
                sendfile off;
        
                # Dont send the nginx version number in error pages and server header
                server_tokens off;
        
                # Root for / project
                root /projectfolder/frontend/dist;
        
                # If you have no root project, re-route /favicon and /robots
                #location /favicon.ico { try_files $uri /api/v1$uri; }
                #location /robots.txt  { try_files $uri /api/v1$uri; }
        
                # Handle main root / project
                location / {
                        #deny all;
                        # try_files $uri $uri/ /index.php?$args;
                }
        
                # Handle api/v1 sub project
                location /api {
                        # Debug output
                        #return 200 $args; add_header Content-Type text/plain;
        
                        # Root for this sub project
                        root /projectfolder/public;
        
                        # Rewrite $uri=/api/v1/xyz back to just $uri=/xyz
                        rewrite ^/api/(.*)$ /$1 break;
        
                        # Try to send static file at $url or $uri/
                        # Else try /index.php (which will hit location ~\.php$ below)
                        try_files $uri $uri/ /index.php?$args;
                }
        
                # Handle all locations *.php files (which will always be just /index.php)
                # via factcgi PHP-FPM unix socket
                location ~ \.php$ {
                        # At this piont, $uri is /index.php, $args=any GET ?key=value
                        # and $request_uri = /api/v1/xyz.  But we DONT want to pass
                        # /api/v1/xyz to PHP-FPM, we want just /xyz to pass to
                        # fastcgi REQUESTE_URI below. This allows laravel to see
                        # /api/v1/xyz as just /xyz in its router.  So laravel route('/xyz') responds
                        # to /api/v1/xyz as you would expect.
                        set $newurl $request_uri;
                        if ($newurl ~ ^/api(.*)$) {
                                set $newurl $1;
                                root /projectfolder/public;
                        }
        
                        # Debug output
                        #return 200 $args; add_header Content-Type text/plain;
                        #return 200 $uri; add_header Content-Type text/plain;
                        #return 200 $document_root; add_header Content-Type text/plain;
                        #return 200 $request_uri; add_header Content-Type text/plain;
                        #return 200 $newurl; add_header Content-Type text/plain;
        
                        # No need for rewrite, as we will use $newurl above.
                        #rewrite ^/api/v1/index.php(.*)$ /$1 break;
                        #rewrite ^/index.php(.*)$ /$1 break;
                        #return 200 $uri; add_header Content-Type text/plain;
        
                        # Pass all PHP files to fastcgi php fpm unix socket
                        fastcgi_split_path_info ^(.+\.php)(/.+)$;
                        #fastcgi_pass unix:/var/run/php5-fpm.sock;      #debian php5
                        fastcgi_pass php:9000; #debian php7
                        fastcgi_index index.php;
                        include fastcgi_params;
                        fastcgi_param REQUEST_URI $newurl;
                        fastcgi_param SCRIPT_FILENAME $document_root$fastcgi_script_name;
                        fastcgi_intercept_errors off;
                        fastcgi_buffer_size 16k;
                        fastcgi_buffers 4 16k;
                }
        
                # Deny .ht* access
                location ~ /\.ht {
                        deny all;
                }
        }
        
        # Redirect all http traffic to https
        #server {
        #        listen 80;
        #        server_name rci-api.dynatronsoftware.com;
        #        return 301 https://$host$request_uri;
        #}
        

Hi @sarkhelsaeed,

If I understood correctly, you are using both VueJS and Laravel as a whole application however you are using VueJS only for the frontend but still located in Laravel. This would mean you’ll need to configure this in your Laravel routes rather than on your WebService level, in your case Nginx.

Another solution might be creating a redirect from your VueJS files to Laravel if someone opens the /api/ url.

Regards,
KDSys

  • Hi @KDSys,

    Thanks for your response, VueJS project is not located in Laravel they are in different directory if you notice the nginx conf you see
    VueJs is in /var/www/html/accounting-vue/dist;
    but Laravel is in /var/www/html/accounting/public;
    so I think the problem is nginx cannot find the Laravel when the location is /api, because in browser when I visit mysite.com the VueJs login form will show but when visit mysite.com/api it shows me File not found.

Submit an Answer