NGINX 和 Vuejs 提供静态文件答案

【问题标题】：NGINX and Vuejs serving static filesNGINX 和 Vuejs 提供静态文件
【发布时间】：2021-09-03 01:23:59
【问题描述】：

我有一个为构建的 vuejs 应用程序提供服务的基本节点服务器。

服务器在 localhost:3000 上运行

Nginx 设置为监听 80 端口

应用部署在本地IP上。

nginx 配置：

 upstream nodejs {
        server localhost:3000;
 }

 server {
       listen 80;
       server_name localhost;
       root /mnt/data/app/server/public;

       location / {
            try_files $uri @nodejs;
       }

       location @nodejs {
            proxy_redirect off;
            proxy_http_version 1.1;
            proxy_pass http://nodejs;
            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;
       }
}

在 index.html 中，所有静态文件的加载方式都类似

css

 href="/css/chunk_name.css"

 src="/js/chunk_name.js"

问题是所有这些静态文件都是通过 HTTPS 加载的

查看截图

如果我尝试加载单个文件但将 HTTPS 替换为 HTTP，则该文件会正常加载。

我不知道我是在配置中遗漏了什么，还是其他什么。任何帮助都得到满足

【问题讨论】：

您根本不应该在生产环境中使用 Node.js 来提供静态文件。在这种情况下，您应该设置 Nginx 以提供静态文件并代理到您的 Node.js 服务以获取任何动态内容。
您的问题是什么？ https 上的资源？
您的 nginx 未配置为通过 https 侦听/服务任何内容。您在哪里/为什么尝试通过 https 访问静态文件？！为什么你有“localhost”作为 server_name 并对 IP 进行请求？！需要更多细节来澄清。
@Marc 这很奇怪，我不知道为什么它应该是 HTTP 时通过 HTTPS 请求。初始请求被发送到10.64.93.111，并返回 index.html，但是，无论出于何种原因，该 HTML 中的静态文件都是通过 HTTPS 加载的。将服务器名称更改为本地主机，仍然是同样的问题。

标签： node.js vue.js nginx

【解决方案1】：

配置您的 nginx 以提供静态文件

location ~ ^/(css|js)/  {
    access_log  off;
    expires     30d;
}

【讨论】：

更多细节会很棒，他为什么要这样做。此外，您注意到在他的 nginx 配置中，没有配置 https/tls/ssl 服务器/服务？如果 nginx 不监听该服务/端口，那么 nginx 服务器文件应该如何通过 https？
看起来可行。快速提问，我将如何添加子路径，例如，不是从 / 而是从 /app 或类似路径提供服务？
官方 nginx 文档将您的解决方案列为不良做法：nginx.com/resources/wiki/start/topics/tutorials/config_pitfalls/…@lejhbah 您不应该这样做