Я пытаюсь развернуть свое приложение activjs (первое) на heroku, но у меня возникают некоторые проблемы с его подключением к сети.У меня нет ошибки сборки, но когда я пытаюсь запустить свое приложение, я получаю сообщение об ошибке «Cannot get /».
Так что в журналах Heroku я не получаю никаких ошибок, только только heroku [маршрутизаторы] информация с 404 сатус.Я проверил, что моя папка dist не находится в .gitignore, попробуйте добавить logger heroku (без успеха), добавьте некоторый код в package.json, server.json и webpack.config.js (без успеха).
my 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"
},
my 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;
my 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
Надеюсь, кто-нибудь может мне помочь, я новичок в реагировании, и я впервые развертываю приложение реагирования.
Большое спасибо,