如何将PyWebIO应用转为Flask部署至Heroku等平台？

一、修改代码适配Flask并修复核心问题 #

原代码里的pyperclip在服务器环境无法工作（无本地剪贴板），需替换为前端原生复制逻辑；同时OpenAI密钥不能硬编码，改用环境变量存储。修改后的完整代码如下：

import os
import openai
from flask import Flask
from pywebio.platform.flask import webio_view
from pywebio.input import *
from pywebio.output import *
from pywebio.session import run_js

# 从环境变量读取OpenAI密钥，避免硬编码泄露风险
openai.api_key = os.getenv("OPENAI_API_KEY")

app = Flask(__name__)

def home():
    put_image('https://upload.wikimedia.org/wikipedia/commons/4/4d/OpenAI_Logo.svg', width='50%', height='50%')
    evenorodd()

def evenorodd():
    engines_dict = {
        "text-davinci-003": 3200, 
        "text-curie-001": 1600, 
        "text-babbage-001": 1600, 
        "text-ada-001": 1600
    }
    myinp = input_group("ASK GPT-3", [
        input("", placeholder='Enter any question', required=True, name="question"),
        radio("Choose an engine", name="engine", options=list(engines_dict.keys()), required=True)
    ])
    put_text(myinp["question"]).style('color: green; font-size: 20px;font-weight: 600; padding-top:20px')

    with put_loading(shape='grow', color='success'):
        response = openai.Completion.create(
            engine=myinp["engine"],
            prompt=myinp["question"],
            temperature=0.5,
            max_tokens=engines_dict[myinp["engine"]],
            top_p=1,
            frequency_penalty=0,
            presence_penalty=0
        )   
        toast("Success")  

    # 替换pyperclip为浏览器原生复制逻辑，适配服务器环境
    put_button("copy", 
               onclick=lambda: run_js("navigator.clipboard.writeText('%s')" % response.choices[0].text.replace("'", "\\'")) or toast("Copied"), 
               color='success', outline=True).style('float: right')
    put_text(response.choices[0].text).style('background-color: rgb(240, 240, 240);padding: 10px;border-radius: 8px;')
    put_button("Ask another Question", onclick=evenorodd).style('position: relative;bottom: 0') 

# 将PyWebIO应用挂载到Flask根路由
app.add_url_rule('/', 'webio', webio_view(home), methods=['GET', 'POST', 'OPTIONS'])

if __name__ == '__main__':
    # 读取环境变量中的端口，适配Heroku动态端口机制
    port = int(os.getenv('PORT', 90))
    app.run(host='0.0.0.0', port=port)

二、准备部署所需文件 #

1. requirements.txt：列出所有依赖包，Heroku会自动安装

flask>=2.0.0
pywebio>=1.7.0
openai>=0.27.0

2. Procfile：告诉Heroku启动应用的命令

web: python app.py

三、Heroku部署步骤 #

1. 安装Heroku CLI并登录账号
2. 在项目目录初始化Git仓库：

   git init
   git add .
   git commit -m "Initial deploy commit"
   

3. 创建Heroku应用：

   heroku create your-custom-app-name
   

4. 设置OpenAI密钥环境变量（避免代码硬编码）：

   heroku config:set OPENAI_API_KEY=your-real-api-key
   

5. 推送代码到Heroku服务器：

   git push heroku main
   

6. 打开部署好的应用：

   heroku open
   

核心注意事项 #

• 无需完全重写为Flask模板：PyWebIO提供webio_view直接与Flask集成，保留原有交互逻辑即可
• 服务器环境禁用本地剪贴板：必须改用浏览器端的navigator.clipboard实现复制功能
• 敏感信息用环境变量存储：绝对不能在代码里硬编码API密钥、密码等敏感内容
• 适配Heroku动态端口：启动时必须读取PORT环境变量，不能固定端口

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