React Flask Heroku App未显示前端

时间：2018-02-09 20:34:33

标签： python node.js reactjs heroku 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

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

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

最初的想法：

  1. 我的server.js文件实际上是从Heroku开始的吗？我的package.json中有一个“start”脚本，但是如果procfile正在执行Python ......它真的开始了吗？如何在不将其置于postinstall或post-build步骤的情况下启动它？

  2. webpack搞砸了什么。我的生产webpack与我的开发略有不同，所以也许在构建期间：生产它搞砸了？但是，这并不能解释为什么构建总是成功的。

  3. 我的server.js或webpack是否强制在index.html文件上格式化，因此无法正确解析？也许这就是我看到的原因 控制台中的SyntaxError: expected expression, got '< bundle.js:1？

    4. 更新：我收到了来自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);
});

    文件结构 

    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

    根目录中的Package.json 这个文件存在是因为我正在运行多重构建。 Heroku似乎没有识别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"
 } 
}

    Package.json in 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"
  }
}

    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,
      },
    }),
  ],
};

    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);
}

    ProcFile

    web: gunicorn main:app

    Heroku中的Buildpack 

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

2 个答案:

答案 0 :(得分：4)

原来如此！事实证明，Heroku支持团队在分析我的应用程序时不正确。我的应用程序以两种不同的方式构建（一种用于生产和开发）。在本地使用npm run start [请参阅 static / package.json ]可以利用热重新加载，并通过server.js从更快的本地更改中获益。但是，在生产环境中，您希望使用压缩的bundle.js文件，因此我的目标是使用npm run build:production [请参阅 static / package.json ]。

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

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

Flask有一个非常特殊的配置，允许定义static_folder和template_folder。前段时间我在处理一些图片上传功能时将static_folder换成了另一个目录。我从来没有抓住它的原因是因为在本地我运行server.js进行热重新加载所以我从来没有看到压缩的bundle.js文件错误。

在解决了这个错误后，我推到了heroku并且令人惊讶......它在第一次尝试时起作用了！

以下是修正它的正确代码：

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

关闭时，在Heroku上运行烧瓶/反应应用程序：

  • 使用多个构建包（一个用于节点，一个用于python）。
  • 使用procfile只加载烧瓶面。
  • 你的根目录中需要一个package.json文件......即使你像我这样的静态文件夹中还有另一个文件。
  • 使用webpack压缩您的反应代码并以压缩方式提供它。
  • 使用render_template和flask一起渲染index.html文件，该文件包含root div作为反应。
  • 确保React的所有依赖项都列在实际的＆＃34;依赖项＆＃34;而不是＆＃34; devdepencies＆＃34;否则Heroku会忽略它们。

我真的希望这有助于某人！我把头撞在了墙上2周，结果却是一个不起眼的小问题....它不是一直存在吗？

其他资源：https://codeburst.io/creating-a-full-stack-web-application-with-python-npm-webpack-and-react-8925800503d9虽然这是非常简化的......但是导致我发现错误的原因是我将其发布在此处。

答案 1 :(得分：1)

您的烧瓶后端似乎没有在您转发流量的同一端口上运行：

Starting gunicorn 19.6.0 Listening at: 0.0.0.0:13521 (4) 

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

Flask正在侦听端口13521（随机选择）但是/ api / routes被转发到端口8081.相反，您应该将gunicorn配置为使用固定端口：http://docs.gunicorn.org/en/latest/settings.html#bind

相关问题
最新问题