Question

这里的新手再次提出另一个问题。这一次更多地是关于 Heroku 本身。所以，我有一个项目，用 React 作为主要前端和 Flask 作为内部 API。到目前为止，Flask 在 Heroku 上部署得很好，端点按预期工作。但是，我在已经部署了 FLASK 服务器的情况下在 Heroku 上部署 React 文件时遇到了困难。谷歌搜索，发现了一些很好的资源，但在实施任何想法或如何去做方面没有运气。主要问题是如何告诉heroku npm run build 或启动react 文件？甚至正确部署此应用程序...

更深入地说，如果 front-end (react.js) 目录有 .gitignore 忽略了 build 文件夹，我如何让 Heroku 知道要使用哪些 react 文件？

注意：无需直接回答，可以发布任何可以指导我完全部署项目的有用资源以供学习。

项目文件夹结构

back-end/
          .env
          files required to run server locally

front-end/
          - build
          - public
          - src
app.py

Procfile

requirements.txt

资料

web: gunicorn app:app

ap.py

import os
import tweepy
import json
from flask import Flask, jsonify

app = Flask(__name__, static_folder='./front-end/build/', static_url_path='/')

consumer_key = os.environ.get('CONSUMER_KEY')
consumer_token = os.environ.get('CONSUMER_SECRET')
access_token_key = os.environ.get('ACCESS_TOKEN')
access_token_key_secret = os.environ.get('ACCESS_TOKEN_SECRET')

auth = tweepy.OAuthHandler(consumer_key, consumer_token)
auth.set_access_token(access_token_key, access_token_key_secret)
api = tweepy.API(auth)


@app.route('/', methods=['GET'])
def home():
    return app.send_static_file('index.html')


@app.errorhandler(404)
def not_found(e):
    return app.send_static_file('index.html')


@app.route('/randomtweets', methods=['GET'])
def random_tweets():
    andys = api.get_user(screen_name='andysterks')
    bmws = api.get_user(screen_name='BMW')
    gtrs = api.get_user(screen_name='JustGTRs')

    andys_info = api.user_timeline(screen_name='andysterks')
    bmws_info = api.user_timeline(screen_name='BMW')
    gtrs_info = api.user_timeline(screen_name='JustGTRs')

    users_info = {
        "name": {
            "andy": andys.name,
            "gtr": gtrs.name,
            "bmw": bmws.name
        },
        "username": {
            "andys": andys.screen_name,
            "gtrs": gtrs.screen_name,
            "bmws": bmws.screen_name
        },

        "profile_image": {
            "andys": andys.profile_image_url_https,
            "gtrs": gtrs.profile_image_url_https,
            "bmws": bmws.profile_image_url_https
        }
    }

    return jsonify(users_info)


@app.route('/andy', methods=["GET"])
def andy_request():
    andy_get_tweets = api.user_timeline(screen_name="andysterks", count=5)

    andys_tweets_list = []

    for tweets in andy_get_tweets:
        andys_tweets_list.append(tweets.text)

    return jsonify({"andys_tweets": andys_tweets_list})


@app.route('/bmw', methods=["GET"])
def bmw_request():
    bmw_get_tweets = api.user_timeline(screen_name="BMW", count=5)

    bmws_tweets_list = []

    for tweets in bmw_get_tweets:
        bmws_tweets_list.append(tweets.text)

    return jsonify({"bmws_tweets": bmws_tweets_list})


@app.route('/gtr', methods=["GET"])
def gtr_request():
    gtr_get_tweets = api.user_timeline(screen_name="JustGTRs", count=5)

    gtrs_tweets_list = []

    for tweets in gtr_get_tweets:
        gtrs_tweets_list.append(tweets.text)

    return jsonify({"gtrs_tweets": gtrs_tweets_list})


@app.route('/search/<string:name>', methods=['GET'])
def search_user_request(name):
    user = api.get_user(screen_name=name)
    user_tweets = api.user_timeline(screen_name=name, count=5)

    searched_user_tweets = []

    for tweets in user_tweets:
        searched_user_tweets.append(tweets.text)

    user_data = {
        "name": user.name,
        "username": user.screen_name,
        "followers_count": user.followers_count,
        "following": user.friends_count,
        "tweets": searched_user_tweets,
        "profile_image": user.profile_image_url_https
    }

    return jsonify({'user_info': user_data})


if __name__ == "__main__":
    app.run(host='0.0.0.0', debug=False, port=5000)

package.json

{
  "name": "front-end",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "@testing-library/jest-dom": "^5.11.6",
    "@testing-library/react": "^11.2.2",
    "@testing-library/user-event": "^12.2.2",
    "axios": "^0.21.0",
    "react": "^17.0.1",
    "react-bootstrap": "^1.4.0",
    "react-dom": "^17.0.1",
    "react-router": "^5.2.0",
    "react-router-dom": "^5.2.0",
    "react-scripts": "4.0.1",
    "web-vitals": "^0.2.4"
  },
  "scripts": {
    "start": "react-scripts start",
    "start-flask": "cd ../back-end && flask run",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },
  "eslintConfig": {
    "extends": [
      "react-app",
      "react-app/jest"
    ]
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  },
  "proxy": "http://127.0.0.1:5000/"
}

Answer 1

应用程序需要通过 PORT 环境变量绑定到 Herky 提供的端口

app.run(host='0.0.0.0', debug=False, port=int(os.environ.get("PORT", 5000)))

在您本地，它将使用默认值 5000，但在 Heroku 上，它将绑定到 PORT

为什么我不能在heroku上部署react flask应用程序？

1 个答案: