Angular/Node Express + Flask API + Heroku，不确定 Procfile

Question

所以我的应用程序在本地使用 Flask API 由 express 提供服务，因此正在运行

node server.js 和 python runner.py 将启动前端/后端。

但是，当部署到 heroku 时，似乎只有前端可以工作，而没有任何与烧瓶 API 的连接，没有加载后端资源。

这是我的带有两个测功机的 procfile

web: node server.js
server: python runner.py

因此，当我在部署后导航到应用程序时，只有前端内容在工作。

但是，当我在本地计算机上运行 python runner.py 时，Heroku 上的所有后端内容都开始工作。我不太确定它是如何或为什么起作用的，但我希望 Heroku 负责托管 API。

如果有人有任何提示或建议，我会很高兴的。

Runner.py

import os
from flask import Flask, request, jsonify, json, render_template
from flask_cors import CORS

app = Flask(__name__)

CORS(app)

# Runs the application
if __name__ == "__main__":
    app.run(debug=True) 

服务器.js

const express = require('express');
const path = require('path');

const app = express();

app.use(express.static(__dirname + '/dist/client'));

app.get('/*', function(req,res) {

res.sendFile(path.join(__dirname+'/dist/client/index.html'));
});

app.listen(process.env.PORT || 8080);

Package.json 脚本

  "scripts": {
    "ng": "ng",
    "start": "ng serve --proxy-config proxy.conf.json",
    "build": "ng build",
    "test": "ng test",
    "lint": "ng lint",
    "e2e": "ng e2e",
    "heroku-postbuild": "ng build --prod"
  }

Proxy.conf.json

{
    "/api": {
        "target": "http://localhost:5000",
        "secure": false
    }
}

编辑：可能已经发现问题 - https://stackoverflow.com/a/54381386/12314065

会试一试并报告

Answer 1

我在 Heroku single dyno 上托管 Angular/Flask 项目的方式是：

过程文件：

web: gunicorn wsgi:app

运行时.txt：

python-3.7.6

wsgi.py

from app import app 

if __name__ == "__main__": 
        app.run() 

app.py

from flask import Flask,render_template, request, jsonify
from flask_compress import Compress

# initialize flask application
app = Flask(__name__,static_url_path='',static_folder='dist',template_folder='dist')
Compress(app)


@app.route('/')
def test():
    return render_template("index.html")


if __name__ == '__main__':
    # run web server
    app.run()

Package.json 脚本：

"scripts": {
        "ng": "ng",
        "start": "ng serve --proxy-config proxy.conf.json",
        "build": "ng build --aot --prod",
        "test": "echo \"Error: no test... minimal project\" && exit 1",
        "lint": "echo \"Error: no lint... minimal project\" && exit 1",
        "e2e": "echo \"Error: no e2e... minimal project\" && exit 1"
    }

项目文件：

这是如何工作的：

1. 在 Heroku 中添加 NodeJS 和 Python 构建包。
2. 在根文件夹中创建 Requirements.txt 和 Runtime.txt。
3. package.json 也必须存在于根文件夹中。
4. 部署包。
5. Angular 项目构建并存储在dist 文件夹中，该文件夹作为flask 应用程序的参数传递。
6. Flask 应用程序使用它作为网页内容的静态文件夹。