nuext .js, nginx项目不缓存

Question

我的网站缓存不工作。

网站:https://flowerqueen.ro/。我正在检查缓存右键单击->检查→application ->storage (Google Chrome)

检查了这个解决方案nginx缓存反向代理不缓存但没有结果。我的nginx默认配置:

server {
listen 443 ssl;
server_name mywebsite.com www.mywebsite.com;
location / {
proxy_pass http://localhost:3000; 
proxy_http_version 1.1;
proxy_set_header Upgrade $http_upgrade;
proxy_set_header Connection 'upgrade';
proxy_set_header Host $host;
proxy_cache_bypass $http_upgrade;
proxy_cache cache;
proxy_cache_key $host$uri$is_args$args;
proxy_cache_valid 200 301 302 12h;
add_header X-Proxy-Cache $upstream_cache_status;
proxy_ignore_headers X-Accel-Expires Expires Cache-Control Set-Cookie;
proxy_ignore_headers Set-Cookie;
proxy_ignore_headers Cache-Control;
proxy_hide_header Cache-Control;
}
location ^~ /images {
proxy_cache cache;
proxy_cache_valid 200 301 302 12h;
}
}

nginx.conf

http {
proxy_cache_path /tmp/cache levels=1:2 keys_zone=cache:10m inactive=60m;
proxy_cache_methods GET HEAD POST;
##
# Basic Settings
##

sendfile on;
tcp_nopush on;
tcp_nodelay on;
keepalive_timeout 65;
types_hash_max_size 4048;
# server_tokens off;
client_max_body_size 5M;
# server_names_hash_bucket_size 64;
# server_name_in_redirect off;
include /etc/nginx/mime.types;
default_type application/octet-stream;
##
# SSL Settings
##
ssl_protocols TLSv1 TLSv1.1 TLSv1.2 TLSv1.3; # Dropping SSLv3, ref: POODLE
ssl_prefer_server_ciphers on;
##
# Logging Settings
##
access_log /var/log/nginx/access.log;
error_log /var/log/nginx/error.log;

##
# Gzip Settings
##
gzip on;
# gzip_vary on;
# gzip_proxied any;
# gzip_comp_level 6;
# gzip_buffers 16 8k;
# gzip_http_version 1.1;
# gzip_types text/plain text/css application/json application/javascript text/xml application/xml application/xml+rss text/javascript;
##
# Virtual Host Configs
##
include /etc/nginx/conf.d/*.conf;
include /etc/nginx/sites-enabled/*;
}

nuxt.config

import shrinkRay from 'shrink-ray-current'
export default {
ssr: false,
mode: 'spa',
target: 'server',
server: {
port: 3000,
host: 'localhost',
},
render: {
compressor: shrinkRay()
},

modules: [// Doc: https://axios.nuxtjs.org/usage
'bootstrap-vue/nuxt',
'@nuxtjs/axios',
'vue-scrollto/nuxt',
'nuxt-robots',
[
'@nuxtjs/component-cache',
{
max: 10000,
maxAge: 1000 * 60 * 60
}
],
'@nuxtjs/proxy',
[
'nuxt-i18n',
{
parsePages: false,
locales: [
{
code: 'en',
iso: 'en-GB',
name: 'english',
file: 'en.js',
},
{
code: 'ro',
iso: 'ro-RO',
name: 'romanian',
file: 'ro.js',
},
],
defaultLocale: 'ro',
vueI18n: {
fallbackLocale: 'ro',
messages: {
en: require('./lang/en').default,
ro: require('./lang/ro').default,
},
},
lazy: false,
langDir: 'lang/',
},
],
],

我不知道该怎么让它工作了，花了5个多小时尝试了next和nginx的不同配置，没有任何帮助。有人能帮我解这个谜吗?

Answer 1

玩了几个小时后，我明白我一直在寻找错误的方向:)

图片没有缓存，因为我的前端服务于一个配置(我正在修改)，但真正的地方，从那里加载的图片是后端。在将这些代码行添加到我的后端nginx配置后，一切都开始像魅力一样工作。

前server {

map $sent_http_content_type $expires {
default                       off;
text/html                  epoch;
text/css                   max;
application/javascript     max;
~productImage/             max;
}

和server内部

location ~* .(webp|jpg|jpeg|png|gif|ico|css|js)$ {
expires 365d;
}