skip to content
鰭狀漏斗

在 Vite 或 Astro 開啟 HTTPS 的開發伺服器

/ 閱讀時間 3 分鐘

javascript , astro , vite

一般開發用的本地伺服器只要沒加密連線的 HTTP 就夠用了，不過有時候會遇到瀏覽器要求要 HTTPS 才能用的功能。所以這篇文章要示範如何在 Vite 開啟 HTTPS 的開發伺服器。因為 Astro 的底層是用 Vite，所以在介紹完 Vite 的設定方法後，我也會介紹如何用相同的方法在 Astro 開啟 HTTPS 的開發伺服器。

Vite

因為我們只要最簡單的 HTTPS 伺服器就好，即使只有自己簽署的憑證也無所謂。所以我們要安裝的是 @vitejs/plugin-basic-ssl 這個 Vite 的 plugin：

Terminal window
pnpm add @vitejs/plugin-basic-ssl

安裝完之後在 Vite 的設定檔 import 這個 plugin，還要記得設定 server.https 這個選項為 true：

vite.config.js
import { defineConfig } from "vite";
import viteBasicSslPlugin from "@vitejs/plugin-basic-ssl";


// https://vitejs.dev/config/
export default defineConfig({
  server: { https: true },
  plugins: [viteBasicSslPlugin()]
});

然後開始開發伺服器就可以看到伺服器的網址有了 https。

Terminal window
  VITE v6.0.0  ready in 251 ms


  ➜  Local:   https://localhost:5173/
  ➜  Network: use --host to expose
  ➜  press h + enter to show help

因為是使用自己簽署的憑證，所以在瀏覽 https://localhost:5143/ 的時候會跳出警示，不過只要將這個網站加入例外就可以進入網頁。

Astro

Astro 因為底層是用 Vite，所以也可以用一樣的方法開啟 HTTPS 的開發伺服器。

一樣安裝完 @vitejs/plugin-basic-ssl 後，這次要修改的是 Astro 的設定檔。在 vite 下加入一樣的設定：

astro.config.mjs
import { defineConfig } from "astro/config";
import viteBasicSslPlugin from "@vitejs/plugin-basic-ssl";


// https://astro.build/config
export default defineConfig({
  vite: {
    server: { https: true },
    plugins: [viteBasicSslPlugin()]
  }
});

然後下 astro dev 指令開始開發伺服器後，一樣可以看到伺服器的網址有了 https。

Terminal window
 astro  v5.1.3 ready in 1028 ms


┃ Local    https://localhost:4321/
┃ Network  use --host to expose

如果不是開發伺服器，而是 astro build 完之後用 astro preview 開始，用來預覽 build 的預覽伺服器呢？

結果不行。原因是因為 vite 設定只有開發伺服器會使用，而預覽伺服器不會使用這個設定，現在似乎也沒有其他設定可以讓預覽伺服器接受 HTTPS。

參考資料