reactjs - Flask + React 应用程序部署到 Heroku 时失败

Question

我正在尝试将一个简单的 Flask + React 项目部署到 Heroku。我正在使用gunicorn。该应用程序在本地部署时可以工作，但在 Heroku 上失败。问题在于尝试从构建文件夹提供静态文件，但我无法找出问题所在。

这是相关代码

#app.py

app = Flask(__name__,
            static_folder='build',
            static_url_path='/')

@app.route('/')
def serve():
        return app.send_static_file('index.html')

Heroku 日志:

2020-12-16T12:04:52.431434+00:00 app[web.1]: [2020-12-16 12:04:52,429] ERROR in app: Exception on / [GET]
2020-12-16T12:04:52.431438+00:00 app[web.1]: Traceback (most recent call last):
2020-12-16T12:04:52.431438+00:00 app[web.1]: File "/app/.heroku/python/lib/python3.6/site-packages/flask/app.py", line 1950, in full_dispatch_request
2020-12-16T12:04:52.431439+00:00 app[web.1]: rv = self.dispatch_request()
2020-12-16T12:04:52.431439+00:00 app[web.1]: File "/app/.heroku/python/lib/python3.6/site-packages/flask/app.py", line 1936, in dispatch_request
2020-12-16T12:04:52.431439+00:00 app[web.1]: return self.view_functions[rule.endpoint](**req.view_args)
2020-12-16T12:04:52.431440+00:00 app[web.1]: File "/app/app.py", line 17, in serve
2020-12-16T12:04:52.431440+00:00 app[web.1]: return app.send_static_file('index.html')
2020-12-16T12:04:52.431441+00:00 app[web.1]: File "/app/.heroku/python/lib/python3.6/site-packages/flask/helpers.py", line 1084, in send_static_file
2020-12-16T12:04:52.431441+00:00 app[web.1]: self.static_folder, filename, cache_timeout=cache_timeout
2020-12-16T12:04:52.431441+00:00 app[web.1]: File "/app/.heroku/python/lib/python3.6/site-packages/flask/helpers.py", line 767, in send_from_directory
2020-12-16T12:04:52.431442+00:00 app[web.1]: raise NotFound()
2020-12-16T12:04:52.431442+00:00 app[web.1]: werkzeug.exceptions.NotFound: 404 Not Found: The requested URL was not found on the server. If you entered the URL manually please check your spelling and try
again.

目录结构:

ROOT
├── app.py
├── build
├── dbfiller.py
├── logs
├── media
├── node_modules
├── openacademia.db
├── package.json
├── package-lock.json
├── Procfile
├── public
├── __pycache__
├── README.md
├── requirements.txt
├── src
├── venv
└── yarn.lock

过程文件: web:gunicorn --bind 0.0.0.0:$PORT app:app

如果还需要什么，请告诉我

Answer 1

我好几天都遇到同样的问题。由于之前的回答，我几个小时前刚刚解决了这个问题!就我而言，.gitignore 包含(不幸的是)/build 文件夹，我什至没有意识到它。此外，我已将构建文件夹从前端文件夹移至根目录。即使调用的 Flask 中 static_folder 的路径是正确的，Heroku 似乎也不喜欢在项目的根目录中没有构建文件夹。

如果这可以帮助其他人，我的 React 项目使用 React Routing(客户端路由)，因此在我的 App.js 文件中，路由如下所示，以便项目在 Heroku 上工作(而不仅仅是在本地主机上):

return (
      <>
        <HashRouter>
          <Routes>
            <Route path="/profile/:name"
                   element={<Profile />} />
            <Route path="/"
                    element={<Login />} />
          </Routes>
        </HashRouter>
      </>
  );

我希望之前的答案能够解决这个问题，因为它非常有帮助。