在本地環境（mac）啓用https

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

一、安裝 opensslnpm

npm install openssl

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

openssl genrsa -des3 -out server.key 1024

在這個過程當中須要輸入密碼短語，須要記住這個密碼，後面會用到安全

三、生成安全證書服務器

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

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

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

　　……代理

五、安裝證書 —— 雙擊 server.crt 便可安裝證書，安裝完後會打開鑰匙串，裏面包含不少證書和應用程序祕密，剛剛安裝好的證書也在裏面，雙擊打開該證書 -> 點擊信任左邊的三角按鈕 -> 設置「使用此證書時」的選項爲「始終信任」

重啓 Nginx ，用 Safari 打開本地 https 網站已經沒有問題了，但用 Chrome 打開本地 https 網站仍然提示安全問題，不要緊咱們能夠無視強行訪問，畢竟咱們開啓 https 只是爲了方便開發而已。

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

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

　　2）打開 Charles 代理設置，勾選「啓用透明HTTP代理」，注意，這裏不要勾選使用動態端口，後面配置手機端時候須要這裏有個固定的端口，我這裏設置的端口是8989。code

　　3）打開 Charles 的 SSL 代理設置，並添加主機和端口，https 端口通常爲443，主機建議用 * ，這樣能夠避免之後頻繁改動。

七、配置手機 —— 想要手機訪問到電腦本地的主機有個前提，手機和電腦須處於一個局域網裏，因此手機不能用4G，須要改爲 wifi。

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

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

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

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

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