如何讓HTTPS在本地主機localhost上工作? - Konstantin

• 如何設定本地域
• 如何建立自簽名SSL證書（或更準確地說是TLS證書）
• 如何配置Nginx以使用SSL證書
• 如何使用docker-compose在Docker容器中配置HTTPS的情況下執行Nginx
• 無需手動建立證書的解決方案

為什麼您可能需要本地域的HTTPS
有一些原因可能需要為本地域啟用HTTPS：

• 您可能需要用它來實現OAuth。
• 如果您在“主機”檔案中配置了本地域，並且想要在本地測試Service Worker
• 檢查您的網路應用重定向是否按預期工作

設定本地域
您可以使用“ localhost”作為域名，也可以建立本地自定義域以用於開發目的。如果您決定繼續使用“ localhost”，則只需跳過此部分並轉到下一個。
在整個教程中，我將使用“ myapp.local”域名作為示例。您可以使用任何您想要的域。
要建立本地域，您需要向“主機”檔案中新增新記錄。
使用“ nano”或“ vim”編輯器開啟“ / etc / hosts”檔案。在大多數情況下，您將需要新增“ sudo”以具有編輯和儲存檔案的許可權。我在下面的命令中使用“ nano”編輯器。
sudo nano /etc/hosts
新增具有所需域名的新行：
127.0.0.1       myapp.local
這會將“ myapp.local”域（或您選擇的任何域名）對映到IP 127.0.0.1。該IP已經被對映到同一檔案中的localhost。
儲存並關閉編輯器。現在，當您啟動Nginx伺服器時（即，如果您從本教程中使用Docker），則可以在瀏覽器的位址列中使用myapp.local域。
 

建立根自簽名SSL證書
您可以使用根證書來建立任意數量的本地證書。將根證書放置在專案資料夾或任何全域性資料夾中，以將其重新用於任何本地專案。
我在使用者的主目錄中建立了一個新資料夾“ local-root-ca”。

mkdir ~/local-root-ca
cd ~/local-root-ca

openssl genrsa -des3 -out rootCA.key 2048

openssl req -x509 -new -nodes -key rootCA.key -sha256 -days 1024 -out rootCA.pem

將自簽名SSL證書新增到Chrome瀏覽器中的受信任證書
轉到Chrome瀏覽器設定（單擊右上角的三個點）。

1. 然後點選左側的“隱私和安全”選單；
2. 選擇“安全性”選單項；
3. 然後滾動到底部，然後在“高階”部分中選擇“管理證書”部分。
4. 選擇“許可權”標籤，然後單擊“匯入”按鈕。
5. 然後選擇您先前建立的“ rootCA.pem”檔案。至少檢查“信任此證書以標識網站”，然後單擊“確定”。

建立域SSL證書通用配置
準備用於建立域SSL證書的配置檔案。這是一項一次性的任務。您最近可以將其用於多個本地域。
使用以下內容建立一個名為“ server.csr.cnf”的證書配置檔案。

[req]
default_bits = 2048
prompt = no
default_md = sha256
distinguished_name = dn

<p class="indent">[dn]
C=US
ST=RandomState
L=RandomCity
O=RandomOrganization
OU=RandomOrganizationUnit
emailAddress=example@example.com

CN = ${ENV::SSL_DOMAIN_TEMP}

authorityKeyIdentifier=keyid,issuer
basicConstraints=CA:FALSE
keyUsage = digitalSignature, nonRepudiation, keyEncipherment, dataEncipherment
subjectAltName = @alt_names

<p class="indent">[alt_names]
DNS.1 = ${ENV::SSL_DOMAIN_TEMP}

建立域SSL證書
將我們要建立SSL證書的域名設定為環境變數“ SSL_DOMAIN_TEMP”。
export SSL_DOMAIN_TEMP=myapp.local


然後建立“ crt”和“ key”檔案。兩者都是SSL證書的一部分。“ crt”檔案是簽名的SSL證書，“ key”檔案是該檔案的私鑰。
建立一個“金鑰”檔案命令：

openssl req -new -sha256 -nodes -out server.csr -newkey rsa:2048 -keyout server.key -config <( cat server.csr.cnf )

openssl x509 -req -in server.csr -CA rootCA.pem -CAkey rootCA.key -CAcreateserial -out server.crt -days 500 -sha256 -extfile v3.ext

Nginx HTTPS配置示例
如果您使用本教程中的Docker，則需要建立一個Nginx配置檔案。在專案資料夾中建立一個新檔案“ default.conf”。
這是啟用HTTPS的localhost的基本Nginx配置。

server {
    server_name _;
    
    listen 80 default_server;
    listen 443 ssl;

    ssl_certificate      /var/server.crt;
    ssl_certificate_key  /var/server.key;

    location / {
        root   /usr/share/nginx/html/;
        index  index.html index.htm;
    }
}

使用Docker Compose執行Nginx
如果您不使用Docker，則可以跳過這一部分。
在專案目錄中建立“ docker-compose.yml”檔案。我們這裡已經有資料夾“ certificates”。
使用以下內容填充docker-compose.yml。

version: '3'

services:
    nginx:
        image: nginx:alpine
        ports:
            - 80:80
            - 443:443
        volumes:
            - ./default.conf:/etc/nginx/conf.d/default.conf
            - ./certificates/server.crt:/var/server.crt
            - ./certificates/server.key:/var/server.key

• 從輕量級Alpine映象建立一個簡單的Nginx容器
• 從容器映象 80（HTTP）和443（HTTPS）埠
• 在Docker容器中掛載Nginx配置和SSL證書

無需手動建立證書的解決方案
這裡是一些簡單的解決方案。選擇任何一個。

• 使用mkcert實用程式自動執行上述整個過程
• 將Caddy Web伺服器與自動HTTPS一起使用
• 使用ngrok透過HTTPS將本地伺服器公開到公共URL