Nuxt.js搭配Nginx服务器刷新页面出现504无响应问题求助

我有一个集成REST API的Nuxt.js项目，使用Nginx服务器部署页面与博客功能。已完成服务器配置，首次访问及静态页面加载正常，但刷新任意页面时服务器会崩溃并返回504错误。

nuxt.config.js 配置 #

let appEnv = process.env.NODE_ENV || 'development';
import { MasterKeys } from './envConfig.js';
export default {
    
    router: {
        base: '/'
    },
    // Global page headers
    head: {
        title: 'SALMA AI',
        htmlAttrs: {
            lang: 'en'
        },
        meta: [
            { charset: 'utf-8' },
            { name: 'viewport', content: 'width=device-width, initial-scale=1' },
            { hid: 'description', name: 'description', content: 'Initial' },
            { name: 'format-detection', content: 'telephone=no' }
        ],
        link: [
            { rel: 'icon', type: 'image/x-icon', href: '/favicon.svg' }
        ]
    },
    ssr:true,
    target: 'server',
    
    css: [
        'element-ui/lib/theme-chalk/index.css',
        '@fortawesome/fontawesome-svg-core/styles.css',
        '@fortawesome/fontawesome-free/css/all.css'
        ,
        { src: '~/assets/style/shared.scss', lang: 'scss' },
        { src: '~/assets/style/main-page.scss', lang: 'scss' },
    ],

    // Plugins to run before rendering page
    plugins: [
        {src:'~/plugins/element-ui', mode: 'client'},
        {src:'~/plugins/fontawesome.js', mode: 'client'},
        { src: '~/plugins/i18n.js', mode: 'client' }

    ],

    // Auto import components
    components: true,

    pwa: {
        icon: false // disables the icon module
    },

    // Modules for dev and build
    buildModules: [
        '@nuxtjs/fontawesome',
        '@nuxtjs/device',
        '@nuxtjs/pwa'
    ],

    // Modules
    modules: [
        '@nuxtjs/axios',
        '@nuxtjs/i18n',
        'vue-social-sharing/nuxt',
        '@nuxtjs/google-gtag',
        
        }],
    ],
    
    
    i18n: {
        /* module options */
        locales: [
            {
                code: 'ar',
                name: 'العربيه'
            },
            {
                code: 'en',// Make sure that default locale is the last one!
                name: 'English'
            }
        ],
        // strategy: 'prefix_except_default',
        strategy: 'prefix',
        detectBrowserLanguage: {
            useCookie: true,
            cookieKey: 'i18n_redirected',
            redirectOn: 'root',  // recommended
        },
        defaultLocale: 'en',
        vueI18n: {
            fallbackLocale: 'en',
            messages: {
                en: require('./assets/locale/en.json'),
                ar: require('./assets/locale/ar.json')
            }
        },
        
    },
    // Axios module configuration
    axios: {
        baseURL: '/',
    },

    // Build Configuration
    build: {
        // analyze: true,
        transpile: [/^element-ui/],
    },

    
    env: {
        VUE_APP_API_ENDPOINT: MasterKeys[appEnv].apiEndPoint,
        VUE_APP_DEBUG_MODE: MasterKeys[appEnv].debugMode,
        NODE_ENV: MasterKeys[appEnv].nodeEnv,
        BASE_URL: MasterKeys[appEnv].baseURL,
    }
}

Nginx 配置 #

proxy_cache_path  /opt/nginx/cache levels=1:2 keys_zone=nuxt-cache:25m max_size=1g inactive=60m use_temp_path=off;

map $sent_http_content_type $expires {
    "text/html"                 epoch;
    "text/html; charset=utf-8"  epoch;
    default                     off;
}

server {
        listen 8080 default_server;
        listen [::]:8080 default_server;
        gzip            on;
        gzip_types      text/plain application/xml text/css application/javascript;
        gzip_min_length 1000;
        
    root /usr/local/var/www/nuxt/;
        index index.html index.htm index.nginx-debian.html;

        server_name _;

       location ~* \.(?:ico|gif|jpe?g|png|woff2?|eot|otf|ttf|svg|js|css)$ {
        expires $expires;
        add_header Pragma public;
        add_header Cache-Control "public";

        try_files $uri $uri/ @proxy;
    }

    location / {
        expires $expires;

       # add_header Strict-Transport-Security "max-age=31536000; includeSubDomains; preload" always;
        #add_header X-Frame-Options "SAMEORIGIN";

        try_files $uri $uri/index.html @proxy; # for generate.subFolders: true
        # try_files $uri $uri.html @proxy; # for generate.subFolders: false
    }

    location @proxy {
        expires $expires;
        #add_header Content-Security-Policy "default-src 'self' 'unsafe-inline';";
        #add_header Strict-Transport-Security "max-age=31536000; includeSubDomains; preload" always;
        #add_header X-Frame-Options "SAMEORIGIN";
        add_header X-Cache-Status $upstream_cache_status;
        add_header Access-Control-Allow-Origin * ;
        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_ignore_headers        Cache-Control;
        proxy_http_version          1.1;
        proxy_read_timeout          1m;
        proxy_connect_timeout       1m;
        proxy_pass                  http://localhost:3000; # set the address of the Node.js instance here
        proxy_cache                 nuxt-cache;
        proxy_cache_bypass          $arg_nocache; # probably better to change this
        proxy_cache_valid           200 302  60m; # set this to your needs
        proxy_cache_valid           404      1m;  # set this to your needs
        proxy_cache_lock            on;
        proxy_cache_use_stale error timeout http_500 http_502 http_503 http_504;
        proxy_cache_key             $uri$is_args$args;
    }
}

内容的提问来源于stack exchange，提问作者Yaseen Hajajweh