将同仓库的Flask/Angular应用部署至Heroku的问题

现有一个已在Heroku正常运行的Flask应用，计划改造为Angular前端 + Flask API服务的架构。该架构本地运行正常，接近完成，希望从同一代码仓库部署到Heroku。此应用为内部工具站点，日访问量仅20-40次，流量极低。

当前文件结构 #

├── Procfile
├── README.md
├── backend
│   ├── app.py
│   ├── requirements.txt
│   ├── static **(will not be used by Flask)**
│   └── templates **(will not be used by Flask)**
├── frontend
│   ├── angular.json
│   ├── dist
│   │   ├── mmscripts
│   │   │   ├── 3rdpartylicenses.txt
│   │   │   └── browser
│   │   │   │   ├── favicon.ico
│   │   │   │   ├── index.html
│   │   │   │   ├── main-HX6HQ3LL.js
│   │   │   │   ├── polyfills-S3BTP7ME.js
│   │   │   │   └── styles-HCXVZOOP.css
│   ├── package-lock.json
│   ├── package.json
│   ├── src
│   │   ├── app
│   │   │   ├── env.ts
│   │   │   ├── assets
│   │   │   ├── favicon.ico
│   │   │   ├── index.html
│   │   │   ├── main.ts
│   │   │   └── styles.scss
│   ├── tsconfig.app.json
│   ├── tsconfig.json
│   └── tsconfig.spec.json
└── runtime.txt

本地运行方式 #

• 进入backend目录启动Flask服务：FLASK_ENV=development flask run
• 另开终端进入frontend目录启动Angular服务：ng serve
• Flask已安装Flask-Cors支持跨域访问，前端在frontend/src/app/env.ts中定义API地址：

export const API_URL = 'http://localhost:5000/api';

版本信息 #

Angular 17
Flask 3
Flask-Cors 4
Heroku stack is 22

配置文件内容 #

Procfile #

web: gunicorn app:app

runtime.txt #

python-3.9.19

可根据需要调整文件结构，当前架构仅为方便代码组织设置。

内容的提问来源于stack exchange，提问作者commadelimited