I have nuxtjs project with NGINX server , with REST API; for pages and the blogs. I setup the server as the documentation , when i run the project on the server the first visit and the static visits working correctly , but if i reload the any page the server will crash and respond with 504, this is my nuxt.config.js file.
let appEnv = process.env.NODE_ENV || 'development';
import { MasterKeys } from './envConfig.js';
export default {
router: {
base: '/'
},
// Global page headers: https://go.nuxtjs.dev/config-head
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: https://go.nuxtjs.dev/config-plugins
plugins: [
{src:'~/plugins/element-ui', mode: 'client'},
{src:'~/plugins/fontawesome.js', mode: 'client'},
{ src: '~/plugins/i18n.js', mode: 'client' }
],
// Auto import components: https://go.nuxtjs.dev/config-components
components: true,
pwa: {
icon: false // disables the icon module
},
// Modules for dev and build (recommended): https://go.nuxtjs.dev/config-modules
buildModules: [
'@nuxtjs/fontawesome',
'@nuxtjs/device',
'@nuxtjs/pwa'
],
// Modules: https://go.nuxtjs.dev/config-modules
modules: [
// https://go.nuxtjs.dev/axios
'@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: https://go.nuxtjs.dev/config-axios
axios: {
// Workaround to avoid enforcing hard-coded localhost:3000: https://github.com/nuxt-community/axios-module/issues/308
baseURL: '/',
},
// Build Configuration: https://go.nuxtjs.dev/config-build
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,
}
}
and this is my NGINGX Configuration
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;
}
}