在 node/ express App 的静态目录中渲染 index.html

Question

我在生产环境中的 react/node/express 应用程序中呈现 index.html 时遇到问题。我的应用文件结构是：

-project
--app
---dist
----index.html
----main.js
----style.css
--server
---server.js

我的server/server.js 看起来像这样：

var express = require('express');
var bodyParser = require('body-parser');
var mongoose = require('mongoose');
var path = require('path');
require('dotenv').config();
require('dotenv').load();
var app = express();
var router = express.Router();


var cons = require('consolidate');

// view engine setup
app.engine('html', cons.swig)

app.get('/',function(req,res){
    res.sendFile(path.join(__dirname,"../app/dist/index.html"));
});

// controllers and mailers
var emailController = require('./controllers/emailController');
var campaignController = require('./controllers/campaignController');

// Express request pipeline

app.use(express.static(path.join(__dirname, "../app/dist")));
app.use(bodyParser.json());
app.use('/api/email', emailController); //any request in the form of /api will be handled by emailController
app.use('/api/campaign', campaignController); //any request in the form of /api will be handled by emailController



var theport = process.env.PORT || 7777;
app.listen(theport, function(){
    console.log("started listening on port " + theport);
});

这是我的 package.json

{
  "name": "project_s",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "start": "node server/server.js"
  },
  "engines": {
    "node": "5.11.1"
  },
  "author": "Oat Wongsajjathiti (oatlikeoatmeal.com)",
  "license": "ISC",
  "dependencies": {
    "body-parser": "^1.15.2",
    "boron": "^0.2.3",
    "bower": "^1.7.9",
    "browserify": "^13.1.0",
    "consolidate": "^0.14.1",
    "dotenv": "^2.0.0",
    "es6-promise": "^4.0.3",
    "express": "^4.14.0",
    "fs": "0.0.1-security",
    "guid": "0.0.12",
    "gulp": "^3.9.1",
    "jquery": "^3.1.1",
    "json2csv": "^3.7.0",
    "moment": "^2.15.1",
    "mongodb": "^2.2.10",
    "mongoose": "^4.6.1",
    "nodemailer": "^2.6.4",
    "nodemailer-ses-transport": "^1.4.0",
    "nodemon": "^1.10.2",
    "rc-time-picker": "^2.0.2",
    "react": "^15.3.2",
    "react-date-picker": "^5.3.28",
    "react-datepicker": "^0.29.0",
    "react-dom": "^15.3.2",
    "react-file-input": "^0.2.5",
    "react-timepicker": "^1.1.3",
    "reactify": "^1.1.1",
    "sendgrid": "^4.4.0",
    "sendgrid-rest": "^2.2.2",
    "ses": "0.0.1",
    "setimmediate": "^1.0.5",
    "swig": "^1.4.2",
    "underscore": "^1.8.3",
    "vinyl-source-stream": "^1.1.0"
  }
}

在本地服务器上运行时它很好，但是当我部署到 heroku 时，我收到以下错误：

Error: ENOENT: no such file or directory, stat '/app/app/dist/index.html' 2016-10-04T20:01:54.987024+00:00 app[web.1]: at Error (native) 2016-10-04T20:02:01.486373+00:00 heroku[router]: at=info method=GET path="/" host=tcb-project-s.herokuapp.com request_id=58797fda-0b12-4046-9390-2088d4b53b2f fwd="207.102.85.144" dyno=web.1 connect=1ms service=5ms status=404 bytes=208

我认为我的路由有问题，因为我的文件组织与推荐的 express 结构完全不同，视图在 dist 文件夹之外的自己的文件中。

Answer 1

您使用的路径好像搞错了：

app.use(express.static(path.join(__dirname, "../app/dist")));

app.get('/',function(req,res){
  res.sendFile(path.join(__dirname,"../app/dist/index.html"));
});

尝试将这些值更改为：

path.join(__dirname, "./dist")

path.join(__dirname,"./dist/index.html")