Flask + React 應用程序在部署到 Heroku 時失敗

Question

我正在嘗試將一個簡單的 flask + React 項目部署到 heroku。我正在使用 gunicorn。 該應用程序在本地部署時有效，但在 Heroku 上失敗。問題在於嘗試從構建文件夾提供 static 文件，但我無法找出問題所在。

這是相關代碼

#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

Procfile: web: gunicorn --bind 0.0.0.0:$PORT app:app

如果還需要什么，請告訴我

Answer 1

幾天來我遇到了完全相同的問題。 由於之前的回答，我幾個小時前剛剛解決了這個問題。 在我的例子中 the.gitignore 包括（不幸的是）/build 文件夾而且我什至沒有意識到它，而且。 我已將構建文件夾從我的前端文件夾移動到我的根目錄，即使 static_folder 的路徑在調用的 Flask 中是正確的。 Heroku 似乎不喜歡在項目的根目錄中沒有構建文件夾。

如果這可以幫助其他人，我的 React 項目使用 React Routing（客戶端路由），所以在我的 App.js 文件中，路由是這樣的，以使項目在 Heroku 上工作（而不僅僅是在本地主機上）：

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

我希望之前的答案能被接受，因為它非常有幫助。

Answer 2

我遇到了確切的問題並遇到了這個問題。 發布我的解決方案，因為當簡單修復與服務器無關時，我一直在擺弄我的 flask 服務器代碼。

如果你經常使用 React，你的 /client/build 文件夾可能在你的 global 或 local.gitignore 中。 When you are trying to deploy your app via git to Heroku, your flask server is being pushed to Heroku and running, but your front-end build folder isn't!

修改您的文件夾結構/名稱（只需更改 /build 文件夾名稱並提供新位置，如果您不想更改 your.gitignore）或您的.gitignore 文件來解決此問題。