Express + Nginx无法提供静态文件

【字号: 日期:2024-04-15浏览:20作者:雯心
(adsbygoogle = window.adsbygoogle || []).push({}); 如何解决Express + Nginx无法提供静态文件?

您无需配置Nginx 和 Express即可提供静态文件。两者都有能力独立完成这项工作,但这取决于您选择。

对于这些示例,我假设您的问题中提供的文件结构相同。

在这两种配置中,都从/加载HTML文件:

<script src='https://www.6hehe.com/main.js'></script> <!-- loads from myapp/public/main.js -->Express作为静态文件服务器,Nginx作为反向代理快递应用

const express = require(’express’);const app = express();app.use(express.static(’public’)); // notice the absence of `__dirname`, explained later on// if the request URL doesn’t match anything in the ’public’ folder,// it will start searching here next.app.use(express.static(’some_other_folder’));// from my testing, express will automatically locate index.html if// it is in a static folder. Declaring a route is not required./* app.get(’/’, (req, res) => { res.sendFile(path.join(__dirname, ’public’, ’index.html’));});*/app.listen(8080);// GET / => index.html// GET /main.js => main.js

快速提示 :不需要使用__dirnameinexpress.static()。引擎盖下(实际上,这是在这里第65行),快速使用本机的Node.js path.resolve()。从文档:

path.resolve()方法将一系列路径或路径段解析为绝对路径。

使用path.resolve(__dirname, ’public’)实际上会 的结果path.resolve(’public’)。我认为您的问题确实是在告诉Nginx提供静态文件并将相同的请求代理到Express。好,接下来我的答案。

Nginx配置

server { listen 8081; # must be different port from Express server_name example.com; location / { # hand ALL requests back to express proxy_pass http://localhost:8080; }}Nginx作为静态文件服务器,Express作为API服务器Nginx配置

server { listen 8081; server_name example.com; location / { root /path/to/website/public; index index.html; try_files $uri $uri/ @express; # instead of 404, proxy back to express using a named location block; # source: https://stackoverflow.com/a/15467555/8436941 } location @express { proxy_pass http://localhost:8080; }}快递应用

const express = require(’express’);const app = express();// actually, Nginx has already taken care of static files. You can still define other routes for API functions for example.app.get(’/my/api’, (req, res) => {/* query database, etc. */});app.listen(8080);

希望这可以帮助!

解决方法

这是我的项目文件夹

/ public/ index.html main.js adaptor.js main.css node_modules/ socket.io/ index.js

这是我index.js中的静态文件配置

app.use(express.static(path.join(__dirname,’/public’)));app.use(express.static(path.join(__dirname,’/node_modules’)));app.get(’/’,(req,res)=>{ res.sendFile(path.join(__dirname,’public’,’/index.html’));})

这是我的index.html

<script src='https://www.6hehe.com/socket.io/socket.io.js' charset='utf-8'></script> <script src='https://www.6hehe.com/adapter.js' charset='utf-8'></script> <script src='https://www.6hehe.com/main.js' charset='utf-8'></script>

这是我的nginx配置

location / { # First attempt to serve request as file,then # as directory,then fall back to displaying a 404. try_files $uri $uri/ /index.html =404; proxy_pass http://localhost:8080; }

但是我在所有脚本上都得到404。另一个奇怪的是,这些文件上的mime-type设置为text/HTML

我在这里做错了什么?

我有一个项目,该项目具有相同的项目结构,并且具有相同的配置,但它适用于此项目,在这种情况下不起作用。

相关文章: