时间戳

首页 > 解决方案 > JHipster 应用程序中的浏览器缓存（NGINX + Spring Boot + VueJs）

nginx - JHipster 应用程序中的浏览器缓存（NGINX + Spring Boot + VueJs）

问题描述

我使用 JHipster（Spring Boot 和 VueJS）开发了一个应用程序，并将其放在 NGINX 后面，以将所有传入的 80 和 443 请求反向代理到端口 8080。配置文件“prod”使用哈希码对所有资源进行后缀，因此只有最新的加载的版本。我的问题是，每次部署后，页面都会显示混乱，看起来浏览器尝试加载旧的 css 和 js 文件但没有成功。硬重置 (Shift+F5) 后，所有资源都将被加载并正确显示页面。但是一旦我部署了服务器，我就不能要求每个用户都按 Shift+F5。

任何帮助解决我的严重问题都非常感谢。

标签： nginxvuejs2jhipster

解决方案

我最终得到了这个配置：

upstream api {
    server 127.0.0.1:9000;
}

server {
    server_name myserver.com      www.myserver.com;

    access_log /var/log/nginx/reverse-access.log;
    error_log /var/log/nginx/reverse-error.log;

    gzip on;
    gzip_types text/css application/javascript application/json image/svg+xml;
    gzip_comp_level 9;
    etag on;

    proxy_redirect    off;
    proxy_set_header  Host             $http_host;
    proxy_set_header  X-Real-IP        $remote_addr;
    proxy_set_header  X-Forwarded-For  $proxy_add_x_forwarded_for;

    location /content {
        proxy_pass http://api/content;
        add_header Cache-Control max-age=31536000;
    }

    location /i18n {
        proxy_pass http://api/i18n;
        add_header Cache-Control max-age=31536000;
    }

    location /app {
        proxy_pass http://api/app;
        add_header Cache-Control max-age=31536000;
    }

    location /index.html {
        proxy_pass http://api/index.html;
        add_header Cache-Control no-cache;
    }

    location ^~ /.well-known/acme-challenge/ {
        alias /var/www/acme-challenge/;
    }

    location / {
        proxy_pass http://api;
        try_files $uri $uri/ /index.html;
    }
}

推荐阅读