部署后不提供ExpressJS公共文件(NodeJS/Express) [英] ExpressJS Public Files Not Being Served Once Deployed (NodeJS/Express)

问题描述

项目目录结构如下:

my_project
server.js
app.js
|
| - public
|           ----------| images | javascripts | stylesheets
|           -------------- imgs ---scripts.js ---styles.css 
|
| - routes
|
| - views
|           ----------| partials
|           -------------- header.ejs, searchbar.ejs, footer.ejs
| (rendered views.ejs)
|
| 
| misc. files

在我的 header.ejs 文件中，这是我的.css文件的路径，该文件位于 public/stylesheets/style.css 中: href ='/stylesheets/style.css'

Within my header.ejs file, this is the path to my .css file located in public/stylesheets/style.css: href='/stylesheets/style.css'

在我的 app.js 文件中，这是我的代码，告诉express服务公共目录: app.use(express.static(path.join(__ dirname，'public')))); .另外，我也尝试过: app.use(express.static('/public')); 但没有任何运气.

Within my app.js file, here is my code telling express to serve the public directory: app.use(express.static(path.join(__dirname, 'public')));. Additionally, I have also tried: app.use(express.static('/public')); but have not had any luck.

当前，在本地提供JS和CSS文件都很好，但是当我部署此应用程序时(并且我无法控制根目录或结构)，它就不在提供文件.

Currently both JS and CSS files are being served locally just fine, but when I deploy this application (and I have no control over the root directory or structure), it is not serving the files.

这是我不确定如何在本地处理的方法，在 href ='/stylesheets/style.css'前面放置'/'可以完美地工作，但是我知道一旦部署，它将搜索域的路由，当然它不会存在.但是，如果删除'/'，它会在本地停止工作，但是一旦部署，可能会正确提供文件.

This is what I'm not sure how to handle -- locally, having the '/' in front of href='/stylesheets/style.css' works perfectly, but I know once deployed this is going to search the route of the domain and of course it's not going to be there. But, if I remove the '/', it stops working locally but may serve the file correctly once deployed.

如何解决此问题?任何意见，将不胜感激.

How do I fix this issue? Any advice would be appreciated.

推荐答案

我找到了解决我问题的方法.对于将来遇到相同问题的搜索者，请尝试设置通过每个路径呈现的动态路径变量.例如:

I found a solution to my issue. For future searcher's who are experiencing the same issue, try setting up a dynamic path variable that you render via each route. For example:

我的 header.ejs 文件包含指向.css文件的以下链接:< link rel ='stylesheet'href ='<％= path％> stylesheets/style.css'> .

My header.ejs file contains the following link to the .css file: <link rel='stylesheet' href='<%= path %>stylesheets/style.css'>.

然后，您可以通过其相应的路由器将特定的 path 传递到所需的 view.ejs 中.例如，我的 index.js 路由包含以下内容:

You can then pass a specific path into your desired view.ejs via its corresponding router. For example, my index.js route contains something like this:

/* GET home page. */
router.get('/', function(req, res, next) {
  res.render('index', {  path: '' });
});

由于目录结构可能从本地开发环境到实际的生产/测试服务器而有所不同，因此执行此操作(如果使用类似header part的概念)将使您可以动态地为公共资产提供服务.例如，通过其相应的路径渲染到另一个视图的路径可能看起来像这样:

Since directory structure may vary from a local development environment to an actual production/testing server, doing this (if using a concept like a header partial) will allow you to dynamically serve your public assets. For example, the rendered path to another view via its corresponding route may look like this:

router.get('/newdirectory', function(req, res) {
  res.render("new-view", { path: '../' });        
});

这将使您可以根据其相对于所请求文件的位置来修改公共资产(脚本，图像，样式表)等.祝你好运！

This will allow you to modify your public assets (scripts, images, stylesheets), etc. depending on its location relative to the file being requested. Good luck!

这篇关于部署后不提供ExpressJS公共文件(NodeJS/Express)的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！