如果您使用create-react-app
建立應用程序並在本地計算機上運行它,則默認情況下它將使用HTTP協議進行服務。
任何在生產環境運行的應用程序都將使用HTTPS,它是HTTP的安全版本。
在大多數情況下,您將輕而易舉地獲得HTTPS,特別是如果您使用像Netlify或Vercel這樣的現代平台來提供應用程序的話。
但是在本地環境中,情況會比我們希望的要複雜一些。
讓我們看看您可以如何實現這一點!
正如您所知,create-react-app
應用程序是通過npm run start
或簡單地通過npm start
運行的,因為在package.json
文件的scripts
部分中,我們有這一行:
"start": "react-scripts start"
將其更改為:
"start": "HTTPS=true react-scripts start"
這將HTTPS
環境變量設置為true
值。
但這還不夠。
現在,我們還需要生成一個本地證書。這一步對於任何應用程序都是有效的,不僅僅限於create-react-app
應用程序,但我將在本文中包含它作為參考。
注意:我在macOS上運行這些命令。Linux應該是同樣的。我對Windows不提供保證。
在項目的根文件夾中運行:
openssl req -x509 -newkey rsa:2048 -keyout keytmp.pem -out cert.pem -days 365
然後運行:
openssl rsa -in keytmp.pem -out key.pem
現在,您應該在文件夾中看到cert.pem
和key.pem
文件。
現在將package.json
文件中的start
腳本更改為:
"start": "export HTTPS=true&&SSL\_CRT\_FILE=cert.pem&&SSL\_KEY\_FILE=key.pem react-scripts start",
如果您運行npm run start
,並訪問https://localhost:3000
(或您的應用程序使用的端口,如果不同-在我的情況下是3008),您應該會看到此警告消息:
要在macOS上解決此問題,請按照我的教程如何在macOS上安裝本地證書的說明進行操作。
一旦您這樣做了,您就可以正常查看使用SSL提供的應用程序了: