Я весь день ломал голову над этой проблемой, и у SO есть много подсказок, но я не могу соединить их правильно с текущим набором поведений.
- Приложение отлично работает локально
- Heroku локально работает отлично
- В журнале Heroku нет ошибок
- В журнале сборки нет ошибок
Соединение их во что Результатом является пустая страница с файлом HTML. После проверки мы получаем
Не удалось загрузить ресурс: сервер ответил с состоянием пакета 404 (не найдено). js: 1
//package.json
"scripts": {
"clean": "rm dist/bundle.js",
"build-dev": "webpack -d --mode development",
"build-prod": "webpack -p --mode production",
"server-dev": "nodemon server/index.ts",
"react-dev": "webpack -d --watch",
"start": "node server/index.ts",
"build": "tsc",
"postinstall": "npm run build"
},
"dependencies": {
"body-parser": "^1.19.0",
"express": "^4.17.1",
"react": "^16.12.0",
"react-dom": "^16.12.0",
"react-particles-js": "^2.7.1",
"react-router-dom": "^5.1.2",
"typescript": "^3.8.3"
},
"devDependencies": {
"@material-ui/core": "^4.9.5",
"@material-ui/icons": "^4.9.1",
"@types/node": "^12.7.4",
"@types/react": "^16.9.19",
"@types/react-css-transition-replace": "^2.1.3",
"@types/react-dom": "^16.9.5",
"@types/react-router-dom": "^5.1.3",
"@types/react-transition-group": "^4.2.3",
"@types/react-vertical-timeline-component": "^2.5.0",
"awesome-typescript-loader": "^5.2.1",
"css-loader": "^3.4.2",
"html-webpack-plugin": "^3.2.0",
"html-webpack-template": "^6.2.0",
"node-sass": "^4.13.1",
"react-css-transition-replace": "^4.0.2",
"react-transition-group": "^4.3.0",
"react-vertical-timeline-component": "^2.5.0",
"sass-loader": "^8.0.2",
"style-loader": "^1.1.3",
"three": "^0.113.2",
"url-loader": "^3.0.0",
"vanta": "^0.5.10",
"webpack": "^4.41.6",
"webpack-cli": "^3.3.11"
}
// Webpack Config
const config = {
entry: './src/index.tsx',
output: {
path: path.resolve(__dirname, 'dist'),
filename: 'bundle.js',
publicPath: '/'
},
plugins: [
new HtmlWebpackPlugin({
template: require('html-webpack-template'),
inject: false,
appMountId: 'app',
filename: 'index.html',
title: 'My Web App'
})
],
module: {
rules: [
{
test: /\.css$/,
use: [
'style-loader',
'css-loader'
]
},
{
test: /\.ts(x)?$/,
use: [
'awesome-typescript-loader'
],
exclude: /node_modules/
},
{
test: /\.scss$/,
use: [
'style-loader',
'css-loader',
'sass-loader'
]
},
{
test: /\.png$/,
use: [
{
loader: 'url-loader',
options: {
mimetype: 'image/png'
}
}
]
}
]
},
devServer: {
historyApiFallback: true
},
resolve: {
extensions: [
'.tsx',
'.ts',
'.js'
]
}
};
// tsconfig.json
{
"compilerOptions": {
"outDir": "./dist/",
"sourceMap": true,
"strict": true,
"noImplicitReturns": true,
"noImplicitAny": true,
"module": "es6",
"moduleResolution": "node",
"target": "es5",
"allowJs": true,
"jsx": "react",
"allowSyntheticDefaultImports": true
},
"include": [
"./src/**/*"
]
}
// index.ts
const express = require('express');
const path = require('path');
const app = express();
const bodyParser = require('body-parser');
const port = process.env.PORT || 3000;
app.use(express.static(path.join(__dirname, '../dist')));
app.use(bodyParser.json());
app.listen(port, () => {
console.log(`Listening on Port: ${port}`);
});
// Heroku Logs
2020-03-05T05:58:25.000000+00:00 app[api]: Build started by user me@gmail.com
2020-03-05T05:59:38.707979+00:00 heroku[web.1]: State changed from down to starting
2020-03-05T05:59:38.458691+00:00 app[api]: Release v8 created by user me@gmail.com
2020-03-05T05:59:38.458691+00:00 app[api]: Deploy 349a20a1 by user me@gmail.com
2020-03-05T05:59:45.000000+00:00 app[api]: Build succeeded
2020-03-05T05:59:46.847659+00:00 heroku[web.1]: Starting process with command `npm start`
2020-03-05T05:59:49.706350+00:00 app[web.1]:
2020-03-05T05:59:49.706370+00:00 app[web.1]: > empty-project@1.0.0 start /app
2020-03-05T05:59:49.706370+00:00 app[web.1]: > node server/index.ts
2020-03-05T05:59:49.706371+00:00 app[web.1]:
2020-03-05T05:59:50.255593+00:00 heroku[web.1]: State changed from starting to up
2020-03-05T05:59:50.020428+00:00 app[web.1]: Listening on Port: 58121
2020-03-05T05:59:51.511884+00:00 heroku[router]: at=info method=GET path="/" host=warm-beyond-73580.herokuapp.com request_id=aed81b4e-61ee-4e4f-8b10-726d10ddfae6 fwd="107.3.131.201" dyno=web.1 connect=1ms service=24ms status=200 bytes=571 protocol=https
2020-03-05T05:59:51.780460+00:00 heroku[router]: at=info method=GET path="/bundle.js" host=warm-beyond-73580.herokuapp.com request_id=834ec783-9810-4ae7-bbfe-47f32401deca fwd="107.3.131.201" dyno=web.1 connect=1ms service=10ms status=404 bytes=392 protocol=https
// Heroku Build Log
-----> Node.js app detected
-----> Creating runtime environment
NPM_CONFIG_LOGLEVEL=error
NODE_ENV=production
NODE_MODULES_CACHE=true
NODE_VERBOSE=false
-----> Installing binaries
engines.node (package.json): 8.11.3
engines.npm (package.json): unspecified (use default)
Resolving node version 8.11.3...
Downloading and installing node 8.11.3...
Using default npm version: 5.6.0
-----> Restoring cache
- node_modules
-----> Installing dependencies
Installing node modules (package.json + package-lock)
> empty-project@1.0.0 postinstall /tmp/build_2111397be8b13d0f0590307d71ce21bf
> npm run tsc
> empty-project@1.0.0 tsc /tmp/build_2111397be8b13d0f0590307d71ce21bf
> tsc
up to date in 25.017s
-----> Build
-----> Caching build
- node_modules
-----> Pruning devDependencies
Skipping because npm 5.6.0 sometimes fails when running 'npm prune' due to a known issue
https://github.com/npm/npm/issues/19356
You can silence this warning by updating to at least npm 5.7.1 in your package.json
https://devcenter.heroku.com/articles/nodejs-support#specifying-an-npm-version
-----> Build succeeded!
-----> Discovering process types
Procfile declares types -> (none)
Default types for buildpack -> web
-----> Compressing...
Done: 59.5M
-----> Launching...
Released v23
https://portfolio.herokuapp.com/ deployed to Heroku