如果用 create-react-app 構建一個程序，并且在本地運行，默認情況下會用 HTTP 協議為該程序提供服務。而在生產環境中運行的程序都用 HTTPS 進行服務。

盡管把 HTTPS 配置出來非常簡單，但是想在本地配置要復雜一些。

[[346336]]

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

"start": "react-scripts start" 

把它修改為：

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

把環境變量 HTTPS 的值設置為 true 。

這還不夠，還需要生成本地證書。

注意：以下命令是在 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 并訪問 React 程序，應該能看到下面的警告消息：

這是因為默認瀏覽器不信任本地證書。

單擊地址欄附近的“不安全”小圖標，然后會出現一個小面板：

單擊“證書”，會看到另一個面板，其中包含證書詳細信息：

現在用鼠標把證書圖標拖到桌面或某個文件夾中，就會得到證書文件。然后雙擊證書安裝，設置為“受信任的證書或簽發機構”。

設置完成后，就可以通過 HTTPS 在本地訪問自己的 React 程序了：