Nuxt.js: Setting Up Nuxt With Nginx

[rikez]

Hello,

I've been facing problems when serving only the nuxt .js files through Nginx.

Well,
I have a subdomain subdomain.domain.com that runs a wordpress blog and e-commerce. However, I intend to serve nuxt on a specific location of this subdomain, something like subdomain.domain.com /nuxtproject

Here is my nginx conf

server {
    # SSL configuration
        listen 443 ssl;
       server_name subdomain.domain.com.br;

        ssl on;
        ssl_certificate /etc/nginx/ssl/certs/ssl.crt;
        ssl_certificate_key /etc/nginx/ssl/private/certificate.key;

    root /var/www/html/cursosabertosv2;

    location /pay {
      alias /var/www/html/crescimentum.pay/source;
      proxy_set_header X-Real-IP $remote_addr;
      proxy_set_header Host $host;
      proxy_http_version 1.1;
      proxy_set_header Upgrade $http_upgrade;
      proxy_set_header Connection "upgrade";
      proxy_pass http://localhost:3000;
}

location / {
      root /var/www/html/cursosabertosv2;
      index index.php index.html index.htm;
      set $php_root /var/www/html/cursosabertosv2;
      try_files $uri $uri/ /index.php$is_args$args;
    }

    location ~ \.php$ {
      root /var/www/html/cursosabertosv2;
      index index.php index.html index.htm;
      set $php_root /var/www/html/cursosabertosv2;
      include snippets/fastcgi-php.conf;
      fastcgi_pass unix:/run/php/php7.0-fpm.sock;
 }


    location = /favicon.ico { root /var/www/html/cursosabertosv2; log_not_found off; access_log off; }
    location = /robots.txt { root /var/www/html/cursosabertosv2; log_not_found off; access_log off; allow all; }

    location ~* \.(css|gif|ico|jpeg|jpg|js|png)$ {
        add_header Access-Control-Allow-Origin "*";
    }

}

https://subdomain.domain.com.br/nuxtProject/nuxtBuild/dist/app.eef42378ecb0188c013a.js
error 404 not found

** I am using nuxt build, with the build Path set to nuxtBuild

Can someone help me please ?

_{This question is available on Nuxt.js community (#c1889)}

[clarkdo]

If you use nuxt build, you need to start the node server by nuxt start, then forward all request from nuxtProject to node server.

  location /nuxtProject {
    # node server address, e.g., localhost:3000
    proxy_pass http://localhost:3000/
  }

If you want to deploy static files, you need to generate files by nuxt generate and set root to dist folder.

  location /nuxtProject {
        root   /dist/;
        index  index.html index.htm;
    }

[rikez]

What if I am using express ?

Should I serve the dist file through express?

@clarkdo

[clarkdo]

You need to embed nuxt into express.

Use https://github.com/nuxt-community/express-template

or

https://github.com/nuxt-community/create-nuxt-app to setup the project

[clarkdo]

If use static files, use express to serve the generated files is also ok

[EmmanuelBeziat]

HI @clarkdo

I have pretty much the same problem; I don't get

# Site global
server {
    listen 443 ssl http2;
    server_name www.myapp.com;
    access_log  off;

    location = /robots.txt  { access_log off; log_not_found off; }
    location = /favicon.ico { access_log off; log_not_found off; }
    location / {
        proxy_pass http://127.0.0.1:3042/;
        include /etc/nginx/conf.d/proxy.conf;
        root /var/www/myapp/site;
        add_header Access-Control-Allow-Origin *;
    }

    location ~* ^.+.(jpg|jpeg|gif|css|png|js|ico|txt|srt|swf)$ {
        root /var/www/myapp/site/;
        expires 30d;
    }

    ssl_certificate /etc/letsencrypt/live/myapp.com/fullchain.pem;
    ssl_certificate_key /etc/letsencrypt/live/myapp.com/privkey.pem;
}

Watching the example you provided, I wondered if I needed to target the dist folder (which is in .nuxt folder once build, right?).

Knowing my projectfolder is the sitefolder, I tried with /myapp/site/.nuxt, /myapp/site/dist, /myapp/site/.nuxt/dist (for both root commands), but none of it worked.

In the log error, it seems that it's trying to reach _nuxt folder? Why not .nuxt? I assume this is a simple route stuff, but how can I be sure that it target the needed folder?

I’m confused right there…

Thanks!

[clarkdo]

Do you use nuxt start or nuxt generate ?

If start, you shouldn't forward requests to .nuxt/dist, it should be the url of node server which is started by nuxt start, such as: http://localhost:3000

If you use generate for deploying static project, you need forward request to the resources as the second way I mentioned above: root /dist/.

[EmmanuelBeziat]

nuxt start, i want it to be SSR.

it should be the url of node server which is started by nuxt start, such as: http://localhost:3000

Well, that’s the case: proxy_pass http://127.0.0.1:3042/; And the app is partially loading, header is loaded and some parts (custom fonts, CSS…). But there’s all of these not found (404):

[TheEcho]

Hello guys,
I'm currently facing the exact same issue as @EmmanuelBeziat ! The Nuxt app try to load all these files in /.nuxt/ but the nuxt build commande put all the files in the /.nuxt/dist folder...

Any idea to fix this ?

[clarkdo]

@TheEcho _nuxt is the default publicPath, you can change it through build.publicPath in nuxt.config.js.

https://nuxtjs.org/api/configuration-build/#publicpath
https://webpack.js.org/guides/public-path/

[clarkdo]

@EmmanuelBeziat Sorry for the late reply, if the issue is still existing, could you please paste you nginx config here and provider a reproducible repo ?

[EmmanuelBeziat]

Hi @clarkdo

Well I got to workaround like this:

location /_nuxt/ {
    alias /var/www/mywebsite/site/.nuxt/dist/;
}

location ~* ^.+.(jpg|jpeg|gif|css|png|js|ico|txt|srt|swf|woff|woff2)$ {
    rewrite ^/_nuxt(/.*) $1 break;
    root /var/www/mywebsite/site/.nuxt/dist;
    expires 30d;
}

So it's working at the moment.

But again, even if it's possible to setup Nginx or Nuxt around this, I don't get why, if _nuxt is the default path, the app is searching .nuxt/dist (which don't exist) instead of the default _nuxt folder?

[clarkdo]

It's due to that .nuxt/dist is the default output.path and _nuxt is the default output.publicPath of webpack config.

Related Documents:
https://webpack.js.org/configuration/output/#output-path
https://webpack.js.org/configuration/output/#output-publicpath

And nuxt use them to serve the dist resources, so there is a mapping relationship between them:
https://github.com/nuxt/nuxt.js/blob/dev/lib/core/renderer.js#L255-L256

In your case, you can set build.publicPath and buildDir in nuxt.config.js

export default {
  buildDir: '_nuxt',
  build: {
    publicPath: '/_nuxt/dist/'
  }
}

[EmmanuelBeziat]

Thanks a lot :)

[mxmaxime]

Hi, thanks for the help.

I found the documentation very confusing... The example with nginx to serve static content is missing, and maybe an option to disable the serveStatic would be great. Any thoughts?

[lock[bot]]

This thread has been automatically locked since there has not been any recent activity after it was closed. Please open a new issue for related bugs.