如何构建一个以 Flask 作为后端、Node.js 作为前端的应用程序并将其部署到 Azure 应用服务

Question

我有一个可以在本地运行的应用程序，现在我想使用 Visual Studio 扩展部署在 Azure 应用服务上。

我有一个包含两个文件夹的根文件夹：

1. 一个用于 python 后端，包含启动 Flask 服务器的文件，该服务器仅用于处理页面请求
2. 前端的一个文件夹，其中包含必须构建的所有文件，然后在运行

   npm run build

   命令后将其复制到后端文件夹中。

更详细：

1. 在后端文件夹中我有

   app.py

   ，

   requirements.txt

2. 在前端文件夹中我有

   src/

   、

   public/

   、

   package.json

   、

   package-lock.json

   、

   vite.config.js

3. 在根文件夹中我有

   .deployment

   ，

   startup.sh

这是

.deployment

文件

[config]
SCM_DO_BUILD_DURING_DEPLOYMENT=1
command = ./startup.sh

这是

startup.sh

文件

cd frontend
ls .
npm install
echo "Done installing"
npm run build # the build command already copies files in backend
cd ../backend
pip install -r requirements.txt
gunicorn app:app --bind=0.0.0.0:8000

构建脚本是这样指定的：

"build": "vite build && ncp dist ../backend/static",

这是我在部署时得到的输出，从中我了解到

npm install

并未运行完成。

4:18:41 PM TestOD: eslint.config.js
4:18:41 PM TestOD: index.html
4:18:41 PM TestOD: package-lock.json
4:18:41 PM TestOD: package.json
4:18:41 PM TestOD: public
4:18:41 PM TestOD: src
4:18:41 PM TestOD: vite.config.js
4:18:48 PM: Deployment to "TestOD" completed.

这是

app.py

文件

from flask import Flask, render_template, send_from_directory
import os
import sys

build_folder = 'static'

if getattr(sys, 'frozen', False):    
    template_dir = os.path.join(sys._MEIPASS, build_folder)
else:    
    ROOT_PATH = os.path.abspath(os.path.dirname(__file__))    
    template_dir = os.path.join(ROOT_PATH, build_folder)
 

app = Flask(__name__, static_folder=os.path.join(template_dir, 'assets'), template_folder=template_dir)

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

@app.route('/<path:path>')
def catch_all(path):
    return render_template('index.html')

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

我该如何找出原因？结构是否正确？我应该在

.deployment

文件中指定其他内容吗？我不知道如何继续

• 我已经尝试查看 Azure 中的所有日志，但没有任何帮助。
• 我尝试通过手动安装和构建 python 运行代码所需的所有文件来部署应用程序，在这种情况下，应用程序加载得很好。
• 我注意到应用服务期望

  "lockfileVersion": 1

  中的

  package-lock.json

  ，即使当前版本的 npm 输出

  "lockfileVersion": 3

  。我设法使用

  npx [email protected] i --save --package-lock-only

  从这个答案降级它，但我不确定这是否是一个好主意

Answer 1

我创建了一个具有 Python 后端和 Node.js 前端的示例应用程序，并使用 VS Code 扩展成功将其部署到 Azure。

下面是我的完整应用程序。 py代码。

应用程序。 py：

from flask import Flask, render_template
import os
build_folder = 'static'
app = Flask(__name__, static_folder=os.path.join(build_folder, 'assets'), template_folder=build_folder)
@app.route('/')
def index():
    return render_template('index.html')
@app.route('/<path:path>')
def catch_all(path):
    return render_template('index.html')
if __name__ == '__main__':
    app.run()

我在 vite.config.ts 文件中添加了以下几行。

build: {
    outDir: "dist", 
    assetsDir: "assets" 
  }

vite.config.ts:

import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'
export default defineConfig({
  plugins: [react()],
  build: {
    outDir: "dist", 
    assetsDir: "assets" 
  }
})

我将以下构建脚本添加到

package.json

文件中。

"scripts": {
"dev": "vite",
"build": "vite build && ncp dist ../backend/static",
"lint": "eslint .",
"preview": "vite preview"
}

在部署到 Azure Web App 之前，请确保构建前端应用程序，以便静态文件存储在后端文件夹中。然后，仅将 Python 后端文件夹部署到 Azure 应用服务。

为了构建前端，我使用了以下命令。

npm run bulid

我按照以下步骤将应用程序部署到 Azure。

Azure 输出：