React Flask Heroku App不显示前端

Question

React Flask Heroku App不显示前端

diz*_*zzy 7 python heroku node.js reactjs webpack

问题摘要

我最近尝试将我的本地应用程序部署到Heroku.它使用Flask后端和React/Redux前端构建.在完成Heroku的复杂(procfiles,它读取package.json等)后,我能够得到后端显示(例如:flask-admin部分和我的数据库一样),但是我我仍然无法到达我网站的前端(反应)部分.我可以在Heroku日志和本地版本中看到没有错误,当我启动我的python服务器并NPM start在静态目录中运行时,我的应用程序工作得很好.

知道为什么前端不会显示或如何访问它？

日志:

我从细节中删除了一些敏感信息,但是heroku logs --tail当我尝试刷新应用程序时,这就是我的内容.

2018-02-11T01:18:01.000000+00:00 app[api]: Build succeeded
2018-02-11T01:21:12.305017+00:00 heroku[web.1]: Starting process with command `gunicorn main:app`
2018-02-11T01:21:16.374150+00:00 heroku[web.1]: State changed from starting to up
2018-02-11T01:21:15.948707+00:00 app[web.1]: [2018-02-11 01:21:15 +0000] [4] [INFO] Starting gunicorn 19.6.0
2018-02-11T01:21:15.949430+00:00 app[web.1]: [2018-02-11 01:21:15 +0000] [4] [INFO] Listening at: http://0.0.0.0:29162



2018-02-11T01:21:19.278810+00:00 heroku[router]: at=info method=GET path="/" host=removed.herokuapp.com request_id=bd74ea4c-3e3a-403b-8850-198b7dec20e2 fwd="104.152.1.62" dyno=web.1 connect=1ms service=2146ms status=200 bytes=2895 protocol=https
2018-02-11T01:21:19.650759+00:00 heroku[router]: at=info method=GET path="/dist/bundle.css" host=removed.herokuapp.com request_id=48183249-fb12-4c7a-9a53-2a57ab58d89b fwd="104.152.1.62" dyno=web.1 connect=0ms service=3ms status=200 bytes=2895 protocol=https
2018-02-11T01:21:19.816113+00:00 heroku[router]: at=info method=GET path="/dist/bundle.js" host=removed.herokuapp.com request_id=1c8b258b-4187-4df6-af35-784e62fb97e5 fwd="104.152.1.62" dyno=web.1 connect=1ms service=3ms status=200 bytes=2895 protocol=https

Run Code Online (Sandbox Code Playgroud)

当我查看源代码时,我看到了我的index.html文件中的代码(在静态文件夹中,这是正确的),这条特定的行突出显示为红色,这让我觉得它缺少bundle.js？ <script src="/dist/bundle.js"></script>

当我试图访问前端时,它们都没有显示出来.我真的不确定下一步该去哪儿.

初步想法:

我的server.js文件实际上是从Heroku开始的吗？我的package.json中有一个"start"脚本,但是如果procfile正在执行Python ......它真的开始了吗？如何在不将其置于postinstall或post-build步骤的情况下启动它？
webpack搞砸了什么.我的生产webpack与我的开发略有不同,所以也许在构建期间:生产它搞砸了？但是,这并不能解释为什么构建总是成功的.
我的server.js或webpack是否在index.html文件上强制格式化,因此无法正确解析？也许这就是我SyntaxError: expected expression, got '< bundle.js:1在控制台看到的原因？

更新:我收到Heroku支持团队的一份说明,让我知道Heroku dynos不是为了支持像我这样的多进程应用程序而构建的.结果,他们觉得我需要进行一些重大更改才能让所有HTTP请求通过一个dyno转发.也许这是我的问题？

以下是可能有助于调试的文件:

Server.js

const http = require('http');
const express = require('express');
const httpProxy = require('http-proxy');
const path = require('path');
const apiPort = process.env.PORT || 8081;

const proxy = httpProxy.createProxyServer({});

const app = express();

app.use(require('morgan')('short'));

(function initWebpack() {
    const webpack = require('webpack');
    const webpackConfig = require('./webpack/common.config');

    const compiler = webpack(webpackConfig);

    app.use(require('webpack-dev-middleware')(compiler, {
        noInfo: true, publicPath: webpackConfig.output.publicPath,
    }));

    app.use(require('webpack-hot-middleware')(compiler, {
        log: console.log, path: '/__webpack_hmr', heartbeat: 10 * 1000,
    }));

    app.use(express.static(path.join(__dirname, '/')));
}());


 app.all(/^\/api\/(.*)/, (req, res) => {
    proxy.web(req, res, { target: `http://0.0.0.0:${apiPort}` });
});

app.get(/.*/, (req, res) => {
    res.sendFile(path.join(__dirname, '/index.html'));
});


const server = http.createServer(app);
server.listen(process.env.PORT || 8080, () => {
    const address = server.address();
    console.log('Listening on: %j', address);
    console.log(' -> that probably means: http://0.0.0.0:%d', address.port);
});

Run Code Online (Sandbox Code Playgroud)

文件结构

ROOT
???/application
?   ??? models.py
?   ??? app.py
???/static
?   ???/bin
?   ???/dist
?   ?   ???bundle.js
?   ???/node_modules
?   ???/src
?   ?   ???/actions
?   ?   ???/components
?   ?   ?   ???/examplecomponenthere
?   ?   ?   ?   ???index.js (for example component)
?   ?   ???/constants
?   ?   ???/containers
?   ?   ???/reducers
?   ?   ???/store
?   ?   ???/webpack
?   ???index.html
?   ???package.json (the true one)
?   ???server.js
???/tests
???config.py
???index.py
???main.py
???package.json (one to help heroku start)
???procfile
???requirements.txt.
???setup.py
???tests.py

Run Code Online (Sandbox Code Playgroud)

root中的Package.json 此文件存在,因为我正在运行多个构建.Heroku似乎没有在static中识别package.json,直到我用它来推动它.

    { 
"name": "rmmd", 
"version": "0.0.1", 
"engines": { 
"node": "6.11.1", 
"npm": "3.10.10" 
}, 
"scripts": { 
"start": "node static/bin/server.js", 
"heroku-postbuild": "cd static && npm install && npm run build:production"
 } 
}

Run Code Online (Sandbox Code Playgroud)

Package.json在static中

{
  "name": "redux-easy-boilerplate",
  "version": "1.3.3",
  "description": "",
  "scripts": {
    "clean": "rimraf dist",
    "build": "webpack --progress --verbose --colors --display-error-details --config webpack/common.config.js",
    "build:production": "npm run clean && npm run build",
    "lint": "eslint src",
    "start": "node bin/server.js",
    "test": "karma start"
  },
  "repository": {
    "type": "git",
    "url": ""
  },
  "keywords": [
    "react",
    "reactjs",
    "boilerplate",
    "redux",
    "hot",
    "reload",
    "hmr",
    "live",
    "edit",
    "webpack"
  ],
  "author": "https://github.com/anorudes, https://github.com/keske",
  "license": "MIT",
  "devDependencies": {
    "webpack-dev-middleware": "^1.5.0",
    "webpack-dev-server": "^1.14.1",
    "webpack-hot-middleware": "^2.6.0",
  },
  "dependencies": {
    "ant-design-pro": "^0.3.1",
    "antd": "^3.0.0",
    "lodash": "^4.17.4",
    "prop-types": "^15.6.0",
    "react-bootstrap": "^0.31.0",
    "redux-devtools-extension": "^2.13.2",
"autoprefixer": "6.5.3",
    "axios": "^0.15.3",
    "babel-core": "^6.4.5",
    "babel-eslint": "^7.1.1",
    "babel-loader": "^6.2.1",
    "babel-plugin-import": "^1.2.1",
    "babel-plugin-react-transform": "^2.0.0",
    "babel-plugin-transform-decorators-legacy": "^1.3.4",
    "babel-polyfill": "^6.3.14",
    "babel-preset-es2015": "^6.3.13",
    "babel-preset-react": "^6.3.13",
    "babel-preset-react-hmre": "^1.0.1",
    "babel-preset-stage-0": "^6.3.13",
    "bootstrap": "^3.3.5",
    "bootstrap-loader": "^1.2.0-beta.1",
    "bootstrap-sass": "^3.3.6",
    "bootstrap-webpack": "0.0.5",
    "classnames": "^2.2.3",
    "css-loader": "^0.26.4",
    "csswring": "^5.1.0",
    "deep-equal": "^1.0.1",
    "eslint": "^3.4.0",
    "eslint-config-airbnb": "13.0.0",
    "eslint-plugin-import": "^2.2.0",
    "eslint-plugin-jsx-a11y": "^3.0.1",
    "eslint-plugin-react": "^6.1.2",
    "expect": "^1.13.4",
    "exports-loader": "^0.6.2",
    "expose-loader": "^0.7.1",
    "express": "^4.13.4",
    "express-open-in-editor": "^1.1.0",
    "extract-text-webpack-plugin": "^1.0.1",
    "file-loader": "^0.9.0",
    "gapi": "0.0.3",
    "history": "^4.4.1",
    "http-proxy": "^1.12.0",
    "imports-loader": "^0.6.5",
    "jasmine-core": "^2.4.1",
    "jquery": "^3.1.0",
    "jwt-decode": "^2.1.0",
    "karma": "^1.2.0",
    "karma-chrome-launcher": "^2.0.0",
    "karma-mocha": "^1.1.1",
    "karma-webpack": "^1.7.0",
    "less": "^2.7.2",
    "less-loader": "^2.2.3",
    "lodash": "^4.5.1",
    "material-ui": "^0.16.4",
    "mocha": "^3.0.2",
    "morgan": "^1.6.1",
    "node-sass": "^3.4.2",
    "postcss-import": "^9.0.0",
    "postcss-loader": "^1.1.1",
    "q": "^1.4.1",
    "qs": "^6.1.0",
    "rc-datepicker": "^4.0.1",
    "react": "^15.3.1",
    "react-addons-css-transition-group": "^15.3.1",
    "react-bootstrap": "^0.31.0",
    "react-calendar-component": "^1.0.0",
    "react-date-picker": "^5.3.28",
    "react-datepicker": "^0.37.0",
    "react-document-meta": "^2.0.0-rc2",
    "react-dom": "^15.1.0",
    "react-forms": "^2.0.0-beta33",
    "react-hot-loader": "^1.3.0",
    "react-loading-order-with-animation": "^1.0.0",
    "react-onclickoutside": "^5.3.3",
    "react-redux": "^4.3.0",
    "react-router": "3.0.0",
    "react-router-redux": "^4.0.0",
    "react-tap-event-plugin": "^2.0.1",
    "react-transform-hmr": "^1.0.1",
    "redux": "^3.2.1",
    "redux-form": "^6.0.1",
    "redux-logger": "2.7.4",
    "redux-thunk": "^2.1.0",
    "resolve-url-loader": "^1.4.3",
    "rimraf": "^2.5.0",
    "sass-loader": "^4.0.0",
    "style-loader": "^0.13.0",
    "url-loader": "^0.5.7",
    "webpack": "^1.12.11",
    "webpack-merge": "^1.0.2",
    "yargs": "^6.5.0"
  }
}

Run Code Online (Sandbox Code Playgroud)

Webpack Prod

const webpack = require('webpack');
const ExtractTextPlugin = require('extract-text-webpack-plugin');

module.exports = {
  devtool: 'source-map',

  entry: ['bootstrap-loader/extractStyles', './src/index'],
  output: {
    publicPath: '/dist/',
  },

  module: {
    loaders: [
      {
        test: /\.scss$/,
        loader: 'style!css!postcss-loader!sass',
      },
    ],
  },

  plugins: [
    new webpack.DefinePlugin({
      'process.env': {
        NODE_ENV: '"production"',
      },
      __DEVELOPMENT__: false,
    }),
    new ExtractTextPlugin('bundle.css'),
    new webpack.optimize.DedupePlugin(),
    new webpack.optimize.OccurenceOrderPlugin(),
    new webpack.optimize.UglifyJsPlugin({
      compress: {
        warnings: false,
      },
    }),
  ],
};

Run Code Online (Sandbox Code Playgroud)

Webpack常见

const path = require('path');
const autoprefixer = require('autoprefixer');
const postcssImport = require('postcss-import');
const merge = require('webpack-merge');

const development = require('./dev.config');
const production = require('./prod.config');

require('babel-polyfill').default;

const TARGET = process.env.npm_lifecycle_event;

const PATHS = {
    app: path.join(__dirname, '../src'),
    build: path.join(__dirname, '../dist'),
};

process.env.BABEL_ENV = TARGET;

const common = {
    entry: [
        PATHS.app,
    ],

    output: {
        path: PATHS.build,
        filename: 'bundle.js',
    },

    resolve: {
        extensions: ['', '.jsx', '.js', '.json', '.scss'],
        modulesDirectories: ['node_modules', PATHS.app],
    },

    module: {
        loaders: [{
            test: /bootstrap-sass\/assets\/javascripts\//,
            loader: 'imports?jQuery=jquery',
        }, {
            test: /\.woff(\?v=\d+\.\d+\.\d+)?$/,
            loader: 'url?limit=10000&mimetype=application/font-woff',
        }, {
            test: /\.woff2(\?v=\d+\.\d+\.\d+)?$/,
            loader: 'url?limit=10000&mimetype=application/font-woff2',
        }, {
            test: /\.ttf(\?v=\d+\.\d+\.\d+)?$/,
            loader: 'url?limit=10000&mimetype=application/octet-stream',
        }, {
            test: /\.otf(\?v=\d+\.\d+\.\d+)?$/,
            loader: 'url?limit=10000&mimetype=application/font-otf',
        }, {
            test: /\.eot(\?v=\d+\.\d+\.\d+)?$/,
            loader: 'file',
        }, {
            test: /\.svg(\?v=\d+\.\d+\.\d+)?$/,
            loader: 'url?limit=10000&mimetype=image/svg+xml',
        }, {
            test: /\.js$/,
            loaders: ['babel-loader'],
            exclude: /node_modules/,
        }, {
            test: /\.css$/,
            include: /node_modules/,
            loaders: ['style-loader', 'css-loader'],
        }, {
            test: /\.png$/,
            loader: 'file?name=[name].[ext]',
        }, {
            test: /\.jpg$/,
            loader: 'file?name=[name].[ext]',
        }],
    },

    postcss: (webpack) => (
        [
            autoprefixer({
                browsers: ['last 2 versions'],
            })
        ]
    ),
};

if (TARGET === 'start' || !TARGET) {
    module.exports = merge(development, common);
}

if (TARGET === 'build' || !TARGET) {
    module.exports = merge(production, common);
}

Run Code Online (Sandbox Code Playgroud)

ProcFile

web: gunicorn main:app

Heroku中的Buildpacks

heroku buildpacks:set heroku/python
heroku buildpacks:add heroku/nodejs

Run Code Online (Sandbox Code Playgroud)

Answer 1

diz*_*zzy 5

所以！事实证明，Heroku支持团队对我的应用程序的分析不正确。我的应用程序以两种不同的方式构建（一种既用于生产又用于开发）。在本地使用npm run start[see static / package.json ]可利用热重载功能，并受益于通过server.js进行更快的本地更改。但是，在生产环境中，您想使用压缩的bundle.js文件，因此我的目标是使用npm run build:production[see static / package.json ]。

我遇到的问题SyntaxError: expected expression, got '< bundle.js:1在控制台中，在我看来，bundle.js根本没有加载。我在上面列出了一系列关于为什么会发生这种情况的有效问题，但是他们都认为主要问题是无法与flask应用程序同时运行我的react应用程序。

我完全错了。我根本不需要运行server.js。index.html和flask / python无法找到我的bundle.js并在生产环境中加载前端的真正原因是因为config.py我从未想到过发布flask 中的文件中的错误。

Flask具有非常特殊的配置，可以static_folder定义和定义template_folder。前一段时间，我在处理某些图像上传功能时将我的static_folder交换到另一个目录。我从未发现它的原因是因为在本地我运行server.js进行热重装，所以我从来没有看到压缩过的bundle.js文件错误。

解决此错误后，我推到了heroku上，而且令人惊讶……它在第一次尝试中就起作用了！

这是修复它的正确代码：

app = Flask(__name__, static_folder="./static/dist", template_folder="./static")

Run Code Online (Sandbox Code Playgroud)

在Heroku上运行flask / react应用程序时，在关闭时：

使用多个buildpack（一个用于节点，一个用于python）。
使用您的procfile只能加载烧瓶侧面。
即使在像我这样的静态文件夹中，也需要在根目录中有一个package.json文件。
使用webpack压缩您的反应代码并以压缩方式提供。
render_template与flask一起使用，以呈现将rootdiv用于响应的index.html文件。
确保对React的所有依赖项都列在实际的“依赖项”中，而不是“ devdepencies”中，否则Heroku会忽略它们。

我真的希望这对某人有帮助！我把头撞在墙上两个星期了，结果发现这是一个小问题，...不是总是这样吗？

其他资源：https : //codeburst.io/creating-a-full-stack-web-application-with-python-npm-webpack-and-react-8925800503d9 虽然这非常简化...但是正是这导致我找到我的错误，所以我将其发布在这里。

归档时间：	7 年，11 月前
查看次数：	1633 次
最近记录：	7 年，10 月前