DWQA QuestionsCategory: ServerAfter nuxt is deployed on the server, JS cannot be accessed
Cat lovers asked 1 month ago

Problem description
Nuxt uses SSR rendering, deploys to the website, uses PM2 to start the configuration file, and finds that it always reports5(index):4 GET http://anikzm.top/_nuxt/runtime.js net::ERR_ABORTED 404 (Not Found), run locallynpm startNo problem. I haven’t found a solution for a long time. Please help me…
Basically, the code hasn’t changed. I don’t know what happened.
Here’s how ecosystem.config.js code

module.exports = {
  apps : [{
    name: 'test',
    script: 'server/index.js',
    args: '',
    instances: 1,
    autorestart: true,
    watch: true,
    max_memory_restart: '1G',
    env: {
      NODE_ENV: 'development'
    },
    env_production: {
      NODE_ENV: 'production'
    }
  }]
};

The following is the nginx configuration code

upstream nodenuxt {
    Server 127.0.0.1:3000; # nuxt project listening port
    keepalive 64;
}
server
{
      listen 80;
    server_name anikzm.top;
    location / {
        proxy_http_version 1.1;
        proxy_set_header Upgrade $http_upgrade;  
        proxy_set_header Connection "upgrade";
        proxy_set_header Host $host;
        proxy_set_header X-Nginx-Proxy true;
        proxy_cache_bypass $http_upgrade;
        proxy_ pass  http://nodenuxt;  #Reverse proxy
    }
    index index.php index.html index.htm default.php default.htm default.html;
    root /www/wwwroot/anikzm.top;
    
    #Ssl-start SSL related configuration, do not delete or modify the next line of 404 rule with comments
    #error_page 404/404.html;
    #SSL-END
    
    #Error-page-start error page configuration, which can be annotated, deleted or modified
    error_page 404 /404.html;
    error_page 502 /502.html;
    #ERROR-PAGE-END
    
    #Php-info-start PHP reference configuration, which can be commented or modified
    include enable-php-73.conf;
    #PHP-INFO-END
    
    #Rewrite-start URL rewrites the rule reference. After modification, the pseudo static rule set in the panel will be invalid
    include /www/server/panel/vhost/rewrite/anikzm.top.conf;
    #REWRITE-END
    
    #Forbidden files or directories
    location ~ ^/(\.user.ini|\.htaccess|\.git|\.svn|\.project|LICENSE|README.md)
    {
        return 404;
    }
    
    #One click application SSL certificate verification directory related settings
    location ~ \.well-known{
        allow all;
    }
    
    location ~ .*\.(gif|jpg|jpeg|png|bmp|swf)$
    {
        expires      30d;
        error_log off;
        access_log /dev/null;
    }
    
    location ~ .*\.(js|css)?$
    {
        expires      12h;
        error_log off;
        access_log /dev/null; 
    }
    access_log  /www/wwwlogs/anikzm.top.log;
    error_log  /www/wwwlogs/anikzm.top.error.log;
}

Here’s how nuxt.config.js Related codes

module.exports = {
  mode: 'universal',
  /*
  ** Headers of the page
  */
  head: {
    title: process.env.npm_package_name || '',
    meta: [
      { charset: 'utf-8' },
      { name: 'viewport', content: 'width=device-width, initial-scale=1' },
      { hid: 'description', name: 'description', content: process.env.npm_package_description || '' }
    ],
    link: [
      { rel: 'icon', type: 'image/x-icon', href: '/favicon.ico' }
    ]
  },
  /*
  ** Customize the progress-bar color
  */
  loading: { color: '#fff' },
  /*
  ** Global CSS
  */
  css: [
  ],
  /*
  ** Plugins to load before mounting the App
  */
  plugins: [
  ],
  /*
  ** Nuxt.js dev-modules
  */
  buildModules: [
  ],
  /*
  ** Nuxt.js modules
  */
  modules: [
  ],
  /*
  ** Build configuration
  */
  build: {
    /*
    ** You can extend webpack config here
    */
    extend (config, ctx) {
    }
  }
}
Cat lovers replied 1 month ago

As soon as I raised the question, I found the reason for the nginx configuration`location ~ .*.(js|css)?$
{
expires 12h;
error_log off;
access_log /dev/null;
}`

It’s good to note it out here. Maybe it’s because_ Nuxt is a virtual directory, which conflicts with the configuration here

2 Answers
Yan Jundong answered 1 month ago

This section has been blocked. Just as I wanted to try the effect myself in the local area, I saw you comment and solve it by yourself.

location ~ .*\.(js|css)?$
    {
        expires      12h;
        error_log off;
        access_log /dev/null; 
    }

In addition, this paragraph will also lead to the picture can not come out

 location ~ .*\.(gif|jpg|jpeg|png|bmp|swf)$
    {
        expires      30d;
        error_log off;
        access_log /dev/null;
    }
    

Just delete these two paragraphs.

Cat lovers replied 1 month ago

Yes, they are deployed under the same domain name these two days nuxt.js Compared with the normal Vue cli project, adjust the nginx configuration to make the header larger

mouday answered 1 month ago

It’s this problem that bothered me all afternoon, and I couldn’t match