Vite 文档建议 ssl “创建自己的证书”，但你该怎么做呢？-解网

问：

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

我将参数设置为 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

安全 SSL Heroku HTTPS Vite

Vite 文档建议 ssl “创建自己的证书”，但你该怎么做呢？

Vite documentation recommends for ssl "creating your own certificates" but how do you do that?

评论