configuring nginx for static vuejs site

i had the same issue with my Vue project, I'm 100% sure that my nginx server block is good. Here is an example:

server {
listen      80;
server_name example.com www.example.com;        charset utf-8;
root    /var/www/myapp/dist;
index   index.html;
#Always serve index.html for any request
location / {
    root /var/www/myapp/dist;
    try_files $uri  /index.html;
}
error_log  /var/log/nginx/vue-app-error.log;
access_log /var/log/nginx/vue-app-access.log;
}

but, I get the error 500. also i assign the execution permission to dist/ folder and nginx user ownership of file:

chown -R www-data:www-data ./dist/*

and

chmod 755 -R ./dist/*

SOLUTION

-1 check the www-data user has the path/ file permission

root@root:# sudo -u www-data stat /home/myuser/public_html/

OUTPUT:

sudo: /etc/sudo.conf is group writable sudo: /etc/sudo.conf is group writable File: /home/efficonx/public_html/ Size: 4096
Blocks: 8 IO Block: 4096 directory Device: fc01h/64513d
Inode: 258318 Links: 4 Access: (0775/drwxrwxr-x) Uid: ( 0/
root) Gid: ( 0/ root) Access: 2022-12-07 13:48:55.245310115 +0000 Modify: 2022-12-06 13:13:40.187999036 +0000 Change: 2022-12-07 13:48:33.149826680 +0000 Birth: 2022-12-06 07:34:49.277257817 +0000

-2 if the www-data have no permission then assign him group/permission in my case i add him to root user group

sudo adduser www-data root

and all DONE.

Update the first line in /etc/nginx/nginx.conf

user www-data;

to

user ubuntu;

I'm not an nginx guru but we have a production server running nginx to serve a static Vue website and proxy API and WebSocket requests to a Butterfly Server .NET running on port 8200.

Anyways, this is our nginx config file, hope it helps...

server {
    listen                      80;
    listen          [::]:80;
    server_name                 my.mysite.com;
    root                        /opt/mysite/my;
    return 301 https://my.mysite.com$request_uri;
}

server {
    listen          443 default_server ssl;
    server_name                 my.mysite.com;
    ssl_certificate     /opt/mysite/ssl/my_mysite_io.bundle.crt;
    ssl_certificate_key     /opt/mysite/ssl/my_mysite_io.key;
    root                        /opt/mysite/my;
    client_max_body_size        128000000;

    # index
    index index.html;

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

    location ~* \.(?:jpg|jpeg|png|ico)$ {
        expires 1y;
        add_header Cache-Control "public";
        access_log off;
    }

    location /index.html {
        expires -1;
        add_header Cache-Control "no-cache, public, must-revalidate, proxy-revalidate";
    }

    location /api {
        proxy_pass http://127.0.0.1:8200;
        proxy_http_version 1.1;
        proxy_set_header Upgrade $http_upgrade;
        proxy_set_header Connection "Upgrade";
        proxy_set_header Host $host;
    }

    location /ws {
        proxy_pass http://127.0.0.1:8200;
        proxy_http_version 1.1;
        proxy_set_header Upgrade $http_upgrade;
        proxy_set_header Connection "Upgrade";
        proxy_set_header Host $host;
    }

}