Nuxt.js，nginx 项目没有缓存答案

【问题标题】：Nuxt.js, nginx project not cachingNuxt.js，nginx 项目没有缓存
【发布时间】：2021-04-29 01:12:58
【问题描述】：

我的网站缓存不起作用。

网站： https://flowerqueen.ro/。我正在检查右键单击缓存->检查->应用程序->存储（谷歌浏览器）

检查了这个解决方案nginx cache reverse proxy not caching，但没有结果。我的 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 个小时已经尝试了 nuxt 和 nginx 的不同配置，但没有任何帮助。谁能帮我解决这个难题？

【问题讨论】：

你找到解决办法了吗？
@xperator 还没有:(

标签： vue.js nginx caching nuxt.js

【解决方案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;
  }

【讨论】：