Express 应用程序不在生产服务器上提供静态文件答案

【问题标题】：Express app not serving static files on production serverExpress 应用程序不在生产服务器上提供静态文件
【发布时间】：2021-08-05 07:20:47
【问题描述】：

我正在使用 Express 构建一个简单的（至少从后端角度来看）单页应用程序。该应用程序在本地运行良好，但部署后，我的静态文件无法正常工作。我环顾四周，我相信我正确使用了 express.static() 。需要注意的另一件事是，我已将其部署在 GoDaddy 上。不确定这是否会导致任何问题，但可能是相关信息。

这是我托管网站的链接，请随时检查自己：http://senseless.world/

我的 app.js 文件中的相关代码如下（我已经排除了一些不相关的部分）：

const express = require('express');
const app = express();
const path = require('path');
const router = express.Router();

app.use('/static', express.static(__dirname+'/static'));
router.get('/',function(req,res){
  res.render(path.join(__dirname+'/static/index.ejs'), {routeStr: ''});
});
app.use('/', router);
app.listen(process.env.port || 3000);

这是我在 index.ejs 文件中加载静态文件的方式：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1">
    <title>Senseless World</title>
    <link rel="stylesheet" href="static/styles/main.css?version=8" type="text/css">
    <link rel="stylesheet" href="/static/styles/mobile-styles.css?version=3" type="text/css">
    <script src="/static/scripts/vendors/jquery-3.5.0.min.js"></script>
    <script src="/static/scripts/vendors/p5.min.js"></script>
    <script src="/static/scripts/vendors/p5.sound.js"></script>
    <script src="/static/scripts/bundle.js" type="module"></script>
    <script src="/static/scripts/modal-page-open.js?version=5"></script>
    <script src="/static/scripts/flashlight.js?version=3"></script>
    <link rel="icon" href="/static/senseless-favicon-16.png" type="image/png" sizes="16x16">
    <link rel="icon" href="/static/senseless-favicon-32.png" type="image/png" sizes="32x32">
  </head>
...

我在控制台中看到的错误如下：

这是我从网络控制台看到的：

解决了：

在我的 .htaccess 中需要这个

RewriteEngine On
DirectoryIndex disabled
RewriteRule ^$ http://127.0.0.1:3000/ [P,L]
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule ^(.*)$ http://127.0.0.1:3000/$1 [P,L]

【问题讨论】：

你可以在浏览器中发布网络标签的屏幕截图吗？
我已经添加了。另外，很抱歉我包含的链接以前不起作用。该网站现在应该已经上线了。
你在使用某种模块捆绑器吗？或者你的主机中的代理，比如 nginx？
当我尝试从您的站点访问一些静态资产（即：http://senseless.world/static/assets/images/lumen_lines.png）时，我得到一个 html 文件，它应该提供图像。看起来您再次为 root 目录提供服务。
你能在这里发布你的 nginx/apache 配置吗？

标签： node.js express ejs static-files unexpected-token

【解决方案1】：

您可以遵循此准则

const express = require('express');
const app = express();
const path = require('path');
const router = express.Router();

// At first create public folder and move all ejs file in public folder
app.use('/static', express.static(__dirname+'/static'));
router.get('/',function(req,res){
  res.render(path.join(index.ejs);
});
app.use('/', router);
app.listen(process.env.port || 3000);

【讨论】：

这不起作用。您已经删除了我的 index.ejs 文件（在我的 /static 文件夹中）的路径和 '' 符号。此外，我将一个变量传递给我的 index.ejs，所以我需要包含上面的 {routeStr: ''} 位。

【解决方案2】：

如果您在 Digitalocean 的 vp 服务器上使用 nginx，请编辑您的 nginx 配置文件。

运行以下命令：

sudo nano /etc/nginx/sites-available/default
删除或注释掉try_files $uri $uri/ =404;
关闭编辑器并使用 sudo nginx -t 测试您的 nginx 配置
如果测试成功，重启nginx：sudo service nginx restart

就是这样。再次检查您的应用。

【讨论】：