Vite 文档建议使用 ssl“创建自己的证书”，但是如何做到这一点？

Question

我构建了一个具有 Flask/Python 后端的 Ionic/React/Vite pwa 应用程序。我已经在 Heroku 上分别部署了 pwa 和后端。一切正常，除了我希望访问我的 pwa 应用程序的人都被迫使用 HTTPS。与目前的情况相反，您可以根据您输入的内容将我的 pwa 应用程序与 http 和 https 一起使用。这就是我认为 vite 文档的

server.https

部分可以在这里帮助我的地方：https://vitejs。 dev/config/server-options.html

我把参数设置为true，还是不行。我的日志中出现代码 H13 错误。

server.https 部分说：

“需要有效的证书。对于基本设置，您可以将 @vitejs/plugin-basic-ssl 添加到项目插件中，它将自动创建并缓存自签名证书。但我们建议您创建自己的证书。”

如何创建自己的证书？没有关于如何执行此操作的示例或描述。我通过 Heroku 设置了证书。我是否可以以某种方式将其插入到配置设置中？我是否正确地处理了这个问题？文档推荐该插件进行基本设置，但之后又说他们不推荐它，所以我没有使用它。

编辑：

这是我的package.json：

{
  "name": "myapp",
  "private": true,
  "version": "0.0.1",
  "type": "module",
  "scripts": {
    "start": "vite",
    "dev": "vite",
    "build": "tsc && vite build",
    "preview": "vite preview",
    "test.e2e": "cypress run",
    "test.unit": "vitest",
    "lint": "eslint"
  },
  "dependencies": {
    "@capacitor/android": "5.2.3",
    "@capacitor/app": "5.0.6",
    "@capacitor/browser": "^5.0.6",
    "@capacitor/core": "5.2.3",
    "@capacitor/geolocation": "^5.0.6",
    "@capacitor/haptics": "5.0.6",
    "@capacitor/keyboard": "5.0.6",
    "@capacitor/status-bar": "5.0.6",
    "@ionic/react": "^7.0.0",
    "@ionic/react-router": "^7.0.0",
    "@types/react-router": "^5.1.20",
    "@types/react-router-dom": "^5.3.3",
    "ionicons": "^7.0.0",
    "leaflet": "^1.9.4",
    "pullstate": "^1.25.0",
    "react": "^18.2.0",
    "react-dom": "^18.2.0",
    "react-leaflet": "^4.2.1",
    "react-router": "^5.3.4",
    "react-router-dom": "^5.3.4",
    "reselect": "^4.1.8",
    "swiper": "^10.1.0"
  },
  "devDependencies": {
    "@capacitor/cli": "5.2.3",
    "@testing-library/jest-dom": "^5.16.5",
    "@testing-library/react": "^14.0.0",
    "@testing-library/user-event": "^14.4.3",
    "@types/react": "^18.0.27",
    "@types/react-dom": "^18.0.10",
    "@vitejs/plugin-legacy": "^4.0.2",
    "@vitejs/plugin-react": "^4.0.1",
    "cypress": "^12.7.0",
    "eslint": "^8.35.0",
    "eslint-plugin-react": "^7.32.2",
    "jsdom": "^22.1.0",
    "sass": "^1.65.1",
    "typescript": "^5.1.6",
    "vite": "4.4.9",
    "vite-plugin-pwa": "^0.16.4",
    "vitest": "^0.32.2"
  },
  "description": "An Ionic project"
}

这是我的 vite 配置：

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: true
  },
  plugins: [
    react(),
    legacy(),
    VitePWA({registerType: 'autoUpdate'})
  ],
  test: {
    globals: true,
    environment: 'jsdom',
    setupFiles: './src/setupTests.ts',
  }
   
}});

还有我的 Procfile：

web: npm start

Answer 1

这不是 Heroku 上的正确方法。 您的应用程序应该仅监听HTTP请求：

入站请求由提供 SSL 终止的负载均衡器接收。从这里它们直接传递到一组路由器。

路由器负责确定应用程序 Web dynos 的位置，并将 HTTP 请求转发到这些 dynos 之一。

Heroku 的负载均衡器和路由器负责处理 HTTPS 连接，根据需要解包请求，并将纯 HTTP 传递到您的应用程序：

           HTTP or HTTPS                   HTTP
Internet <---------------> Heroku Router <------> Your application

您的应用程序只需将以

http://

开头的 URL 重定向到

https://

。 （Heroku 不会为你做这件事。）

具体如何执行此操作取决于您如何为您的应用程序提供服务。 Heroku 本身不支持静态站点，因此用户有时会使用小型 PHP 服务器或类似服务器来为其提供服务。或者他们将其他主机用于更适合静态站点的客户端应用程序。