如果用 create-react-app 構(gòu)建一個(gè)程序，并且在本地運(yùn)行，默認(rèn)情況下會(huì)用 HTTP 協(xié)議為該程序提供服務(wù)。而在生產(chǎn)環(huán)境中運(yùn)行的程序都用 HTTPS 進(jìn)行服務(wù)。

盡管把 HTTPS 配置出來(lái)非常簡(jiǎn)單，但是想在本地配置要復(fù)雜一些。

[[346336]]

我們都知道，create-react-app 程序是用 npm run start(或簡(jiǎn)稱為 npm start)運(yùn)行的，在 package.json 文件的 scripts 部分中，有這樣一行配置：

"start": "react-scripts start" 

把它修改為：

"start": "HTTPS=true react-scripts start" 

把環(huán)境變量 HTTPS 的值設(shè)置為 true 。

這還不夠，還需要生成本地證書(shū)。

注意：以下命令是在 macOS 上執(zhí)行的，Linux 下可以用相同的方式操作。但是不保證在 Windows 下也能成功。

在項(xiàng)目根目錄中運(yùn)行：

openssl req -x509 -newkey rsa:2048 -keyout keytmp.pem -out cert.pem -days 365 

然后運(yùn)行：

openssl rsa -in keytmp.pem -out key.pem 

在當(dāng)前目錄下會(huì)生成 cert.pem 和 key.pem 兩個(gè)文件。

現(xiàn)在把 package.json 文件中的 start 腳本改為：

"start": "export HTTPS=true&&SSL_CRT_FILE=cert.pem&&SSL_KEY_FILE=key.pem react-scripts start", 

現(xiàn)在運(yùn)行 npm run start 并訪問(wèn) React 程序，應(yīng)該能看到下面的警告消息：

這是因?yàn)槟J(rèn)瀏覽器不信任本地證書(shū)。

單擊地址欄附近的“不安全”小圖標(biāo)，然后會(huì)出現(xiàn)一個(gè)小面板：

單擊“證書(shū)”，會(huì)看到另一個(gè)面板，其中包含證書(shū)詳細(xì)信息：

現(xiàn)在用鼠標(biāo)把證書(shū)圖標(biāo)拖到桌面或某個(gè)文件夾中，就會(huì)得到證書(shū)文件。然后雙擊證書(shū)安裝，設(shè)置為“受信任的證書(shū)或簽發(fā)機(jī)構(gòu)”。

設(shè)置完成后，就可以通過(guò) HTTPS 在本地訪問(wèn)自己的 React 程序了：