CODEWITHSUNDEEP
laraveldockernginxvue.js
Ed Stephenson
Ed Stephenson

Reputation: 774

Docker Laravel Vuejs Nginx, issues loading assets

I can't get my Nginx config to work correctly.

I have a Laravel app, but the /admin uri is redirected by Nginx to a vuejs app.

The VueJS app index.html file is loading fine, but the assets are not, so the app isn't working.

The Laravel App and the VueJS apps are on two separate Docker Containers launched via docker-compose.

I have tried to play around with various combinations of "try_files" inside the "location /admin { }" section with no success so far. These adjustments have either resulted in 404s for everything or 500 Server Errors.

Here is my Nginx conf:

server {
    listen 80;
    listen [::]:80;

    client_max_body_size 200M;
    disable_symlinks off;
    server_tokens off;
    index index.php;
    root /var/www/public;

    location /admin {
        root /var/www/public/dist;      
        proxy_pass http://admin:8001;
        proxy_http_version 1.1;
        proxy_set_header Upgrade $http_upgrade;
        proxy_set_header Connection 'upgrade';
        proxy_set_header Host $host;
        proxy_cache_bypass $http_upgrade;
     }

    location / {
        try_files $uri /index.php$is_args$args;
    }

    location ~ \.php {
        try_files $uri =404;
        fastcgi_pass http://app:9000;

        fastcgi_split_path_info ^(.+\.php)(/.*)$;
        include fastcgi_params;
        fastcgi_param SCRIPT_FILENAME $realpath_root$fastcgi_script_name;
        fastcgi_param DOCUMENT_ROOT $realpath_root;
        fastcgi_param REALPATHTEST $realpath_root;
        internal;
    }
}

Here are screenshots showing that the index.html has loaded fine, but not the js & css assets:

HTML output in Chrome:

HTML output in Chrome

200 Result for page and 404 errors for assets:

200 Result for page and 404 errors for assets

Any help would be much appreciated.

Upvotes: 2

Views: 2390

Answers (2)

Ed Stephenson
Ed Stephenson

Reputation: 774

In the end all I needed was this:

location /admin {
    rewrite ^/admin(.*) /$1 break;
    proxy_pass http://admin:8001;
}

So my final nginx config is:

server {
    listen 80 default_server;
    listen [::]:80 default_server;

    client_max_body_size 200M;
    disable_symlinks off;
    server_tokens off;
    index index.php;
    root /var/www/public;

    location /admin {
        rewrite ^/admin(.*) /$1 break;
        proxy_pass http://admin:8001;
    }

    location / {
        try_files $uri /index.php$is_args$args;
    }

    location ~ \.php {
        try_files $uri =404;
        fastcgi_pass app:9000;

        fastcgi_split_path_info ^(.+\.php)(/.*)$;
        include fastcgi_params;
        fastcgi_param SCRIPT_FILENAME $realpath_root$fastcgi_script_name;
        fastcgi_param DOCUMENT_ROOT $realpath_root;
        fastcgi_param REALPATHTEST $realpath_root;
        internal;
    }
}

I really hope this saves someone some time!!

Upvotes: 3

William Chong
William Chong

Reputation: 2203

If you are using vue-cli to setup your vue project, set baseUrl to /admin

Otherwise you will have to prefix your vue.js generated asset with /admin, or make nginx try files under vue project for every /css and /js requests.

Upvotes: 0

Related Questions