Document serving static files with nginx (with SSR backend)

[ishitatsuyuki]

Currently Nuxt.js uses serve-static as a middleware for static files. This can be offloaded to nginx for efficiency.

Basically, the code here needs to be documented.

_{This feature request is available on Nuxt.js community (#c2186)}

[ishitatsuyuki]

These too: https://github.com/nuxt/nuxt.js/blob/9fc2bace443a267bdf709928a9d6096f4fbc67c8/lib/core/renderer.js#L388-L412

[clarkdo]

Please refer https://nuxtjs.org/api/configuration-render#static

[ishitatsuyuki]

Wrong, please reopen. I'm not asking for configuring serve-static, I want to serve the static files on nginx.

[clarkdo]

If you want to serve static files on nginx, you can just move static to nginx and config the proxy.

 location /staticx/ {
        root /www/static;
  }

Is there any concerns ?

[ishitatsuyuki]

Please read the issue content.

[cesasol]

Serving static files directly to nginx has nothing to do with the nuxt or node side, it must be done with the nginx config. There are multiple ways to achieve this, like selecting the types of files that you want to directly serve. Here is an example:

location ~* ^.+\.(jpg|svg|jpeg|gif|png|ico|css|zip|tgz|gz|rar|bz2|pdf|txt|tar|wav|bmp|rtf|js|flv|swf|html|htm)$ {
    gzip on;
    expires 365d;
    root   /absolute/path/to/sourcefiles/static;
}

[ishitatsuyuki]

Hey, please read the description thoroughly before commenting.

I'm talking about documenting which file are served (through serve-static) under _nuxt/. Undocumented thing may change and break any time, so documenting allows me to reliably move this job to nginx.

Also, it's not a simple path mount currently, but it also requires several filters so the server side source would not be revealed. Those needs to be either refactored to be moved out, or documented to be ignored.

[ishitatsuyuki]

Well, we have another option: copy the static files to dist/ just like SPA or generate mode do.

This is safer because we can change the internal behavior at any time, but a drawback is that it may be confusing to users (they may think it's completely static but it's not).

[EmmanuelBeziat]

Well, my goal would be to have Nothing more to do than a build and restart the app, with an automated process. Needing to manually select some files from different folders (static, .nuxt/dist, root...) is a big downside to me…

[yakovyarmo]

Did you manage to use ngnix to serve the static files?

[mxmaxime]

Totally agree with @ishitatsuyuki The documentation is very confusing about serving static files... I'll give it a look whether I could improve that part.

[stale[bot]]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs.

[ishitatsuyuki]

This is still a valid issue.

[manniL]

@LeoMartinDev You can always disable that behavior ☺️

@ishitatsuyuki I see the point here. Documentation of the files served (and the excluded ones) would be appreciated, I agree.

[ishitatsuyuki]

To provide an update, we no longer need the exclusion because we now put them into a separate directory. It's much simpler, just need a documentation (and maybe changelogs) on which directory we should mount.

[stale[bot]]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs.

[ishitatsuyuki]

This issue is still valid.

[stale[bot]]

Thanks for your contribution to Nuxt.js! This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. If you would like this issue to remain open:

1. Verify that you can still reproduce the issue in the latest version of nuxt-edge
2. Comment the steps to reproduce it

Issues that are labeled as 🕐Pending will not be automatically marked as stale.

[ishitatsuyuki]

The bot is malfunctioning.

[clarkdo]

@ishitatsuyuki Sorry, fixed in https://github.com/nuxt/nuxt.js/commit/9216bd4ab5b5a48a1ca7b8ad78e86e58105bcd69

[kenberkeley]

What a pity to see most of the SSR websites on Showcase | Awesome Nuxt.js did not GZIP their JS / CSS, which results in enormous network loads. Some of them are running serious business, not for demo purposes.

The developers of these websites might have already configured gzip on on nginx.conf according to https://nuxtjs.org/faq/nginx-proxy . However, as you see, it's not working at all.

We tend to trust the official docs and we sincerely appreciate Nuxt team's hard work. However, Nuxt team should also test the functions before writing docs. Maybe it should be a caveat about GZIP on FAQ refers to https://github.com/nuxt/nuxt.js/issues/105 and this issue.

[manniL]

@kenberkeley I picked a random sample of 10 sites out of the showcases and all had either GZIP or Brotli encoding enabled. Please double-check 😉

The deployment of a Nuxt app is up to the user. We can't set up NGINX/Apache for every use-case and can only provide ideas/configs that work in most of the cases.

Regarding the linked config itself, @pimlie can give you more info about that ☺️

[kenberkeley]

@manniL You should double-check. I picked ramdom sample of 10 sites and none of them had GZIP.

[kenberkeley]

All Request Headers include accept-encoding: gzip, deflate, br while all Response Headers do not include content-encoding: gzip / br .

[kenberkeley]

Don't trust me, but verify, please.

[manniL]

@kenberkeley must be on your side.

Also, when you download the JS file, you always download the "uncompressed" version.

[kenberkeley]

WT...

[kenberkeley]

Incognito mode, got the same result... Emmm... Maybe my Chrome broke...

[pimlie]

@kenberkeley The size of the file doesnt change due to gzip compression. Gzip compression is part of the http protocol to reduce transfer size, as soon as the file hits your browser the file is decompressed and saved in its normal format. So I think you are just looking at the wrong info, eg look at @manniL's screenshots and you will see that his size column also says 466KB for the vendor bundle, but the transferred size is lower due to gzip compression.

[kenberkeley]

ESET Autivirus is the culprit! After uninstalling it:

Refer to https://superuser.com/questions/1269618/does-google-chrome-display-the-wrong-website-size-in-the-dev-tools-network-monit/1269648#1269648

Sorry it's my fault...

[stale[bot]]

Thanks for your contribution to Nuxt.js! This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. If you would like this issue to remain open:

1. Verify that you can still reproduce the issue in the latest version of nuxt-edge
2. Comment the steps to reproduce it

Issues that are labeled as 🕐Pending will not be automatically marked as stale.

[alecgerona]

Is this issue rendered obsolete with nuxt export?

[manniL]

Is this issue rendered obsolete with nuxt export?

Not necessarily, because it's mostly related to a deploy with a Node.js server (nuxt build && nuxt start)

[blacklizard]

if anyone is still having this similar issue for SSR mode, you can use my nginx config. Nginx will serve all the static files.

In nuxt.config.js

export default {
  build: {
    publicPath: '/assets/'
  },
  render: {
    compressor: false // let nginx do the compression
  }
};

nginx.v-host.conf

server {
  listen 80;
  server_name your_domain_name;
  root /path/to/your/project/.nuxt/dist/client;
  index index.html;

  gzip on;
  gzip_disable "msie6";
  gzip_vary on;
  gzip_proxied any;
  gzip_comp_level 6;
  gzip_buffers 16 8k;
  gzip_http_version 1.1;
  gzip_min_length 256;
  gzip_types
    application/atom+xml
    application/geo+json
    application/javascript
    application/x-javascript
    application/json
    application/ld+json
    application/manifest+json
    application/rdf+xml
    application/rss+xml
    application/xhtml+xml
    application/xml
    font/eot
    font/otf
    font/ttf
    image/svg+xml
    text/css
    text/javascript
    text/plain
    text/xml;

  location /assets {
    limit_except GET {
      deny all;
    }

    expires 365d;
    alias /path/to/your/project/.nuxt/dist/client;
  }

  location / {
    limit_except GET {
      deny all;
    }

    add_header Last-Modified $date_gmt;
    add_header Cache-Control 'no-store, no-cache, must-revalidate, proxy-revalidate, max-age=0';
    if_modified_since off;
    expires off;
    etag off;
    proxy_redirect                      off;
    proxy_set_header Host               $host;
    proxy_set_header X-Real-IP          $remote_addr;
    proxy_set_header X-Forwarded-For    $proxy_add_x_forwarded_for;
    proxy_set_header X-Forwarded-Proto  $scheme;
    proxy_read_timeout          1m;
    proxy_connect_timeout       1m;
    proxy_pass http://127.0.0.1:3000;
  }
}