React 本地開發設置 https

最近為了新增「讀取條碼」&「拍照功能」需要開啟攝影機時、才發現 Chrome 已無法直接啟用；需要 https 才可開啟權限。

好吧！逃避很久的坑總是要補上的。

首先安裝 Mkcert ：

brew install mkcert 

接下來要創建證書到自己的專案中：

mkcert -install

然後生成證書：

mkcert localhost 127.0.0.1

它會產出 2 個憑證檔案：

因為我現在改用 Vite 建立專案了、所以要到 vite.config.js 去修改內容。另外也因為我後端 API 還沒升級到 https 、所以我採用了代理的方式(又留一個坑以後踩)、完整修改如下：

import { defineConfig } from "vite";
import react from "@vitejs/plugin-react";
import fs from "fs";
import path from "path";

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [react()],
  server: {
      host: true, // 啟用 IP 訪問
      port: 3000, // 指定 port
    https: {
      key: fs.readFileSync(path.resolve(__dirname, "localhost+2-key.pem")),
      cert: fs.readFileSync(path.resolve(__dirname, "localhost+2.pem")),
    },
    proxy: {
      "/api": {
        // Connect to Server - commURL
        target: "http://127.0.0.1:9090"; // Localhost
        changeOrigin: true,
        secure: false,
        rewrite: (path) => path.replace(/^\/api/, ""),
      },
    },
  },
});

這樣就可以在本地端開啟攝影機了。