vite 要怎麼讓 localhost 也可以有 https 憑證？

把 Facebook JavaScript SDK 引入到專案中，然後啟動 server，發現console.log出現The method FB.getLoginStatus can no longer be called from http pages.

原因是 Facebook JavaScript SDK 規定從2018年10月開始，網站都必須要有 ssl 憑證才能使用。參考這裡

問題來了，我現在只是開發階段，又還沒部署（會不會部署還不知道咧），我怎會有https的網域？

這邊介紹大家一個方法，使用套件：Mkcert ( 在 github 上有28k顆星星)

 

安裝Mkcert

打開終端機，直接在電腦上安裝 mkcert，如果不是 mac ，請參考這裏其他作業系統的安裝方式

$ brew install mkcert

 

創建本地憑證

創建之前請先cd到你要放憑證的資料夾。

例如，我想要放在我的專案裡面的assets資料夾：

$ cd path-to-project/src/assets

確認目前在要放憑證的資料夾後就可以開始創建：

$ mkcert -install
$ mkcert localhost

等他跑完後會發現你的assets資料夾中多了兩個檔案：localhost-key.pem、localhost.pem

 

設定 server

接下來這一步請注意，你可能不是跟我一樣使用 vite ，可能是 webpack 或 vue cli，但不管，你要找到可以設定https.createServer()所需參數的地方。

這邊以 vite 為例，他是放在server.https中，然後參數的方式官網也有連結可以參考：

const fs = require('fs');

const options = {
  key: fs.readFileSync('test/fixtures/keys/agent2-key.pem'),
  cert: fs.readFileSync('test/fixtures/keys/agent2-cert.pem')
};

但是我們不能直接貼上，要先把路徑改成我們剛剛的assets路徑，然後寫進vite.config.js中。

const fs = require("fs");

export default defineConfig({
  plugins: [vue()],
  //...
  server: {
    https: {
      key: fs.readFileSync(`${__dirname}/src/assets/localhost-key.pem`),
      cert: fs.readFileSync(`${__dirname}/src/assets/localhost.pem`),
    },
  },
});

重啟server：

$ yarn dev

這時候你打開localhost會發現他還是錯誤，這時候請打開電腦中的「鑰匙圈存取」，點左邊的「系統」，然後找到「XXXXXXX.local」的憑證

點右鍵，選擇「取得資訊」

把「信任」頁籤內的選項全部改成「永遠信任」

這時候只要你關掉視窗，他就會問你是否要儲存，輸入電腦的密碼後就會儲存並關閉。

可以看看剛剛的 facebook javascript sdk 有沒有報錯囉！

如果還是有的話，重新啟動一次 server : $ yarn dev

---

同場加映

如果是vue.config.js的話：

const fs = require("fs");

module.exports = {
//...
  devServer: {
    https: {
      key: fs.readFileSync(`${__dirname}/src/assets/localhost-key.pem`),
      cert: fs.readFileSync(`${__dirname}/src/assets/localhost.pem`),
    },
  },
};