Question

我正在尝试在heroku上部署我的reactjs（第一个）应用程序，但在将其联机时遇到了一些麻烦。我没有构建错误，但是当我尝试启动我的应用程序时，出现了“无法获取/”错误。

因此，在Heroku日志上，我没有得到任何错误，而只有404饱和度的heroku [routers]信息。我确实验证了我的dist文件夹不在.gitignore中，尝试添加heroku logger（失败），向package.json，server.json和webpack.config.js添加一些代码（失败）。

我的package.json（仅重要部分）：

"engines": {
"node": "9.7.0",
"npm": "5.6.0"
 },
"dependencies": {
"@material-ui/core": "^3.9.3",
"axios": "^0.17.1",
"babel-core": "^6.26.0",
"babel-loader": "^7.1.2",
"babel-preset-env": "^1.6.1",
"babel-preset-react": "^6.24.1",
"css-loader": "^0.28.9",
"dotenv": "^5.0.0",
"express": "^4.16.2",
"extract-text-webpack-plugin": "^3.0.2",
"faker": "^4.1.0",
"heroku": "^7.24.4",
"html-webpack-plugin": "^2.30.1",
"logger": "0.0.1",
"material-ui": "^0.20.2",
"react": "^16.2.0",
"react-dom": "^16.2.0",
"react-draggable": "^3.3.0",
"react-img-zoom": "^0.1.0",
"react-magnifier": "^3.0.1",
"react-router-dom": "^5.0.0",
"react-tap-event-plugin": "^3.0.2",
"reactjs-popup": "^1.4.1",
"style-loader": "^0.19.1",
"twilio": "^3.28.0",
"twilio-video": "^1.15.2",
"webpack": "^3.12.0",
"webpack-dev-middleware": "^2.0.4",
"webpack-hot-middleware": "^2.21.0"
},
"scripts": {
"build": "./node_modules/.bin/webpack",
"start": "node server",
"start:prod": "npm run build && node server.js"
},

我的webpack.config.js：

const HtmlWebpackPlugin = require("html-webpack-plugin");
const webpack = require("webpack");
const ExtractTextPlugin = require("extract-text-webpack-plugin");
const path = require("path");
require("dotenv").config();

var configFunc = function(){
var config = {
    devtool: "source-map",
    entry: [
        __dirname + "/app/app.js"
    ],
    output: {
        path: __dirname + "/dist",
        filename: "bundle.js",
        publicPath: "/"
    },
    module: {
        rules: [
            {
                test: /\.js$/,
                use: "babel-loader",
                exclude: [/node_modules/]
            },
            {
                test: /\.(sass|scss|css)$/,
                use: [
                    {
                        loader: "style-loader" // creates style nodes from JS strings
                    },
                    {
                        loader: "css-loader" // translates CSS into CommonJS
                    }
                ]
            }
        ]
    },
    plugins: [
        new HtmlWebpackPlugin({
            hash: true,
            template: path.join(__dirname , "/app/index.html"),
            inject: "body"
        }),
        new webpack.BannerPlugin("React Twilio"),
        new ExtractTextPlugin("[name]-[hash].css")
    ]};
if(process.env.NODE_ENV === "PROD") {
    config.plugins.push(new webpack.optimize.UglifyJsPlugin());
    config.plugins.push(new webpack.optimize.CommonsChunkPlugin({
        name: "commons",              
        filename: "commons.js"
    }));
}
if(process.env.NODE_ENV === "DEV") {
    config.entry.push('webpack-hot-middleware/client?reload=true');
    config.plugins.push(new webpack.HotModuleReplacementPlugin());
}
return config;
}();

module.exports = configFunc;

我的server.js：

require("dotenv").config();
var path = require("path");
var express = require("express");
var webpack = require("webpack");
var faker = require("faker");
var AccessToken = require("twilio").jwt.AccessToken;
var VideoGrant = AccessToken.VideoGrant;

var app = express();
if(process.env.NODE_ENV === "DEV") { // Configuration for development environment
var webpackDevMiddleware = require("webpack-dev-middleware");
var webpackHotMiddleware = require("webpack-hot-middleware");
var webpackConfig = require("./webpack.config.js");
const webpackCompiler = webpack(webpackConfig);
app.use(webpackDevMiddleware(webpackCompiler, {
  hot: true
}));
app.use(webpackHotMiddleware(webpackCompiler));
app.use(express.static(path.join(__dirname, "app")));
} else if(process.env.NODE_ENV === "PROD") { // Configuration for production environment
app.use(express.static(path.join(__dirname, "dist")));
app.get('*', (req, res) => {
    res.sendFile(path.resolve(__dirname, 'dist', 'index.html'));
});
}

app.use(function(req, res, next){
console.log("Request from: ", req.url);
next();
})

// Endpoint to generate access token
app.get("/token", function(request, response) {
var identity = faker.name.findName();

// Create an access token which we will sign and return to the client,
// containing the grant we just created
var token = new AccessToken(
    process.env.TWILIO_ACCOUNT_SID,
    process.env.TWILIO_API_KEY,
    process.env.TWILIO_API_SECRET
);

// Assign the generated identity to the token
token.identity = identity;

const grant = new VideoGrant();
// Grant token access to the Video API features
token.addGrant(grant);

// Serialize the token to a JWT string and include it in a JSON 
response
response.send({
   identity: identity,
   token: token.toJwt()
});
});


var port = process.env.PORT || 3000;
app.listen(port, function() {
  console.log("Express server listening on *:" + port);
});

和我的Procfile：

web: npm run start:prod

您可以在以下链接中找到我的应用：https://salty-dawn-74805.herokuapp.com/

有关信息，我的应用程序受本教程的启发：https://www.twilio.com/blog/2018/03/video-chat-react.html 您可以克隆此存储库以复制：https://github.com/kimobrian/TwilioReact.git

我得到的唯一错误消息是（显然我的网站在localhost上运行良好）：

heroku[router]: at=info method=GET path="/" host=salty-dawn-74805.herokuapp.com request_id= fwd= dyno=web.1 connect=1ms service=20ms status=404 bytes=383 protocol=https

希望有人可以帮助我，我是Reactjs的新手，这是我第一次部署reactjs应用程序。

非常感谢您，

Answer 1

为其他可能有相同错误的人找到的解决方案！这真的很愚蠢：heroku node_env是“生产”，我正在验证node_env等于“ prod”。：'（

Heroku返回404，但日志没有错误

1 个答案: