在本地環境（mac）啟用https

前段時間客戶一個涉及地理定位功能的頁面突然出問題不能正常使用，在修復的過程中發現定位的方法 getCurrentPosition 只能在 https 協議下才能成功調用，這導致我在本地不能調試，每次修改完必須上傳到生產環境，可以想象這整個過程是多么痛苦。於是這幾天特地學了下如何在本地啟用 https ，並將它記錄下來以備不時之需：

1、安裝 openssl

npm install openssl

 

2、建立服務器私鑰 —— 私鑰最好建立在服務區的根目錄下(我本地用的是 nginx)

openssl genrsa -des3 -out server.key 1024

在這個過程中需要輸入密碼短語，需要記住這個密碼，后面會用到

 

3、生成安全證書

openssl req -new -key server.key -out server.csr

這一步需要手動輸入如下內容:

• Country Name(國家：中國填寫CN)
• State or Province Name(區域或是省份，如：Shanghai)
• Locality Name(地區局部名字，如：Shanghai)
• Organization Name(機構名稱：填寫公司名)
• Organizational Unit Name(組織單位名稱:部門名稱)
• Common Name(網站域名)
• Email Address(郵箱地址)
• A challenge password(輸入一個密碼)
• An optional company name(一個可選的公司名稱)

此時會在當前目錄生成 server.csr 文件，然后依次執行如下命令：

 

cp server.key server.key.org

openssl rsa -in server.key.org -out server.key

openssl x509 -req -days 365 -in server.csr -signkey server.key -out server.crt

4、配置 Nginx —— 在 Nginx 中找到你想要配置的域名的 .conf 文件寫入如下配置內容

• listen 443 ssl; (端口號並開啟ssl)
• server_name xxx.xxx.com; (域名)
• ssl_certificate /... /server.crt; (證書在本機的路徑)
• ssl_certificate_key / ... /server.key; (key在本機的路徑)

　　……

5、安裝證書 —— 雙擊 server.crt 即可安裝證書，安裝完后會打開鑰匙串，里面包含很多證書和應用程序秘密，剛剛安裝好的證書也在里面，雙擊打開該證書 -> 點擊信任左邊的三角按鈕 -> 設置“使用此證書時”的選項為“始終信任”

 

重啟 Nginx ，用 Safari 打開本地 https 網站已經沒有問題了，但用 Chrome 打開本地 https 網站仍然提示安全問題，沒關系我們可以無視強行訪問，畢竟我們開啟 https 只是為了方便開發而已。

 

6、配置Charles —— 到第五步其實已經可以在 pc 端啟用 https 了，但若想在手機端訪問本地 https 還需通過 Charles 來代理：

　　1）選擇 幫助 -> SSL代理 -> 安裝 Charles Root 證書 -> 設置 Charles Root 證書為始終信任

　　2）打開 Charles 代理設置，勾選 “啟用透明HTTP代理”，注意，這里不要勾選使用動態端口，后面配置手機端時候需要這里有個固定的端口，我這里設置的端口是8989。

　　3）打開 Charles 的 SSL 代理設置，並添加主機和端口，https 端口一般為443，主機建議用 * ，這樣可以避免以后頻繁改動。

7、配置手機 —— 想要手機訪問到電腦本地的主機有個前提，手機和電腦須處於一個局域網里，所以手機不能用4G，需要改成 wifi。

　　1）下載 Charles 根證書： 在瀏覽器中打開 chls.pro/ssl，按照提示點允許；

　　2）打開 設置 -> 通用 -> 描述文件與設備管理 安裝剛剛下載的文件；

　　3）打開：設置 -> 通用 -> 關於本機 -> 證書信任設置，找到剛剛安裝的 Charles 證書將其設為信任；

　　4）選擇 設置 -> 無線局域網 -> 當前wifi -> 配置代理 -> 手動，輸入服務器 ip 地址和端口，服務器 ip 即電腦在局域網中的 ip 地址，端口就是剛剛在 Charles 配置的代理端口，我這里是8989，填完別忘記存儲。

 

　　至此就開啟了完整的本地 https，可以同時在電腦和手機上進行調試。