Heroku部署的Ionic/React/Vite PWA强制HTTPS及自定义证书问题咨询

核心问题分析 #

你当前的思路存在误区：Vite配置中的server.https=true是开发环境用来启用本地HTTPS的选项，完全不适合生产部署场景。Heroku的架构中，SSL/TLS终止是在Heroku的负载均衡层完成的——所有HTTPS请求会被转换成HTTP请求转发给你的应用，所以你的应用只需要监听HTTP端口即可。强制开启Vite开发服务器的HTTPS会导致Heroku路由无法正常连接，进而触发H13连接错误。

正确解决方案步骤 #

1. 修正前端部署方式：部署静态构建产物，而非开发服务器

你当前Procfile直接运行vite开发服务器，这绝对不适合生产环境。正确做法是先构建前端代码，再用静态文件服务器托管构建后的产物：

• 安装静态文件服务器serve：

npm install --save-dev serve

• 修改package.json的scripts，添加生产环境启动脚本：

{
  "scripts": {
    // ... 原有脚本保留
    "serve": "serve -s dist"
  }
}

• 更新Procfile，指向静态服务器启动命令：

web: npm run serve

2. 移除Vite配置中不必要的HTTPS设置

修改Vite配置，只在开发环境启用HTTPS（如果本地开发需要的话），生产环境无需配置：

export default defineConfig(({mode}) => {
  const env = loadEnv(mode, process.cwd())
  console.log('in the beginning', env)

  return {
    server: {
      host: '0.0.0.0',
      port: process.env.PORT || 3000,
      // 仅开发环境启用HTTPS
      https: mode === 'development'
    },
    plugins: [
      react(),
      legacy(),
      VitePWA({registerType: 'autoUpdate'})
    ],
    test: {
      globals: true,
      environment: 'jsdom',
      setupFiles: './src/setupTests.ts',
    }
  }
});

3. 强制HTTPS的实现方式

方式一：开启Heroku原生强制HTTPS

在Heroku控制台进入你的应用，找到Settings -> Domains and certificates，开启Force HTTPS选项，这会自动将所有HTTP请求重定向到HTTPS。

方式二：前端代码层面添加重定向逻辑

在应用入口文件（比如App.tsx）中添加协议判断，生产环境下自动跳转HTTPS：

if (process.env.NODE_ENV === 'production' && window.location.protocol === 'http:') {
  window.location.href = window.location.href.replace('http:', 'https:');
}

方式三：后端Flask添加强制HTTPS逻辑

对于Flask后端，可以通过中间件判断Heroku传递的X-Forwarded-Proto头，强制重定向到HTTPS：

from flask import Flask, redirect, request

app = Flask(__name__)

@app.before_request
def enforce_https():
    if app.env == 'production' and request.headers.get('X-Forwarded-Proto') == 'http':
        return redirect(request.url.replace('http://', 'https://'), code=301)

或者使用flask-talisman插件简化配置：

from flask import Flask
from flask_talisman import Talisman

app = Flask(__name__)
# 强制HTTPS，自动处理重定向
Talisman(app, force_https=True)

关于证书的疑问 #

• 你不需要创建自定义证书并配置到Vite中：Heroku已经为你的应用提供了有效的SSL证书，并且在负载均衡层处理HTTPS加密/解密，你的应用完全不需要接触证书文件。
• Vite文档中提到的自定义证书，仅用于本地开发环境（比如需要在localhost上使用HTTPS测试某些API），和生产部署无关。

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