如何将Python+Flet开发的PWA部署至公网并绑定域名

第一步：将Flet应用配置为PWA #

Flet原生支持PWA，先完成基础配置：

• 在项目主文件（如main.py）中初始化App时开启PWA模式，同时配置必要元信息：

  import flet as ft
  
  def main(page: ft.Page):
      page.title = "我的Flet PWA应用"
      # 你的页面逻辑代码...
  
  if __name__ == "__main__":
      ft.app(
          target=main,
          pwa=True,
          assets_dir="assets",
          web_renderer="canvaskit",
          pwa_name="我的Flet应用",
          pwa_short_name="FletApp",
          pwa_description="基于Flet的PWA应用",
          pwa_display="standalone",
          pwa_theme_color="#2196F3",
          pwa_background_color="#ffffff",
          pwa_icons=[
              {"src": "/icons/icon-192x192.png", "sizes": "192x192", "type": "image/png"},
              {"src": "/icons/icon-512x512.png", "sizes": "512x512", "type": "image/png"},
          ]
      )
  

• 准备对应尺寸的图标文件，放入项目的assets/icons目录，确保路径与配置一致。
• 执行flet build web命令，生成Web静态文件，输出在dist目录，该目录即为PWA部署包。

第二步：无信用卡的公网部署选项（替代fly.io/replit） #

1. Vercel（免费层无需信用卡） #

• 将包含dist目录的项目上传至GitHub/GitLab仓库。
• 登录Vercel后导入该仓库，部署时设置输出目录为dist，直接完成部署。
• 绑定域名：进入项目设置的「Domains」选项，添加自定义域名，按照提示在域名服务商处配置CNAME解析指向Vercel提供的域名。

2. Netlify（免费层无需信用卡） #

• 可将项目推送到Git仓库，或直接上传dist目录的压缩包至Netlify。
• 部署时指定发布目录为dist，完成部署。
• 绑定域名：在Netlify的域名管理模块添加自定义域名，配置DNS的CNAME记录即可。

3. Cloudflare Pages（免费无需信用卡） #

• 登录Cloudflare进入Pages服务，绑定你的Git仓库并选择Flet项目。
• 构建配置中，设置构建命令为空（已提前生成静态文件），输出目录为dist。
• 部署完成后，在Pages的自定义域名选项中添加你的域名，Cloudflare会自动配置DNS与SSL证书。

第三步：自建服务器部署详细步骤 #

若使用自有服务器（云服务器如阿里云/腾讯云新用户多有免费额度，或物理服务器），按以下步骤操作：

1. 服务器准备 #

• 选用Linux服务器（推荐Ubuntu 22.04），确保拥有公网IP，开放80、443端口。

2. 上传静态文件 #

• 用scp命令将本地dist目录上传至服务器：

  scp -r ./dist username@你的服务器IP:/var/www/flet-app
  

• 也可在服务器上克隆项目仓库，再执行flet build web生成dist目录。

3. 安装并配置Nginx #

• 更新软件包并安装Nginx：

  sudo apt update && sudo apt install nginx -y
  

• 创建站点配置文件：

  sudo nano /etc/nginx/sites-available/flet-app
  

  写入以下配置：

  server {
      listen 80;
      server_name 你的域名.com www.你的域名.com;
  
      root /var/www/flet-app/dist;
      index index.html;
  
      # 解决PWA刷新页面404问题
      location / {
          try_files $uri $uri/ /index.html;
      }
  
      # 静态资源缓存优化
      location ~* \.(js|css|png|jpg|jpeg|svg|ico)$ {
          expires 30d;
          add_header Cache-Control "public, max-age=2592000";
      }
  }
  

• 启用站点并重启Nginx：

  sudo ln -s /etc/nginx/sites-available/flet-app /etc/nginx/sites-enabled/
  sudo nginx -t # 验证配置正确性
  sudo systemctl restart nginx
  

4. 配置SSL证书（HTTPS） #

• 安装Certbot获取免费Let's Encrypt证书：

  sudo apt install certbot python3-certbot-nginx -y
  sudo certbot --nginx -d 你的域名.com -d www.你的域名.com
  

• 按提示完成操作，Certbot会自动配置Nginx的HTTPS规则，并设置证书自动续期。

5. 域名绑定 #

• 登录域名服务商的DNS管理后台，添加A记录指向服务器公网IP；若使用子域名，可添加CNAME记录。
• 等待DNS解析生效（通常10-30分钟），即可通过自定义域名访问Flet PWA应用。

额外说明 #

• 若你的Flet应用依赖后端API（使用Flet的server模式），需部署后端服务：
  1. 安装Gunicorn：pip install gunicorn
  2. 启动Flet后端：gunicorn -w 4 -b 0.0.0.0:8000 main:app
  3. 修改Nginx配置，将请求反向代理到8000端口：

     location / {
         proxy_pass http://localhost:8000;
         proxy_set_header Host $host;
         proxy_set_header X-Real-IP $remote_addr;
     }
     

• 免费平台的免费层有流量与资源限制，用户量较大时建议升级付费层或使用自有服务器。

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