😊

nginxとLet's EncryptでローカルHTTPS環境を作る

に公開

前提条件

SSL証明書につかうドメインは持っているものとします。
私はすでに ledsun.jp を持っています。
DNSで サブドメイン localhost.ledsun.jp に 127.0.0.1 を設定しました。

その他の環境情報

  • WSL + Ubuntu
  • nginx
  • Let's Encrypt

手順

SSL証明書の取得

Certbotのインストール

Let's EncryptでSSL証明書を取得するためにCertbotをインストールします。
Ubuntuではsnapdでインストールできます。

sudo snap install --classic certbot
sudo ln -s /snap/bin/certbot /usr/bin/certbot

SSL証明書の取得

次のコマンドを実行します。

sudo certbot certonly --manual -d localhost.ledsun.jp --preferred-challenges dns

出力メッセージを読み、DNSで次のような設定をします。

  • エントリ名
    • _acme-challenge.localhost
  • タイプ
    • TXT
  • データ
    • Ik9IyRLRei27lWszeyYyWJmCVA13kO_7LGOucXcSuEc

DNSの設定反映を5分程度まってEnterキーを押せば、次の Path に SSL 証明書が作成されます。

/etc/letsencrypt/live/localhost.ledsun.jp

nginxの設定

nginxのインストール

sudo apt update
sudo apt install -y nginx

SSL証明書のコピー

sudo mkdir -p /etc/ssl/ledsun
sudo cp /etc/letsencrypt/live/localhost.ledsun.jp/fullchain.pem /etc/ssl/ledsun/fullchain.pem
sudo cp /etc/letsencrypt/live/localhost.ledsun.jp/privkey.pem   /etc/ssl/ledsun/privkey.pem
sudo chown root:root /etc/ssl/ledsun/*.pem
sudo chmod 644 /etc/ssl/ledsun/fullchain.pem
sudo chmod 600 /etc/ssl/ledsun/privkey.pem

公開ディレクトリの作成

sudo mkdir -p /var/www/ledsun/public
sudo echo 'hello from nginx over https' > /var/www/ledsun/public/index.html

nginxの設定ファイル作成

次の Path に nginx の設定ファイルを生成します。

/etc/nginx/sites-enabled/localhost.ledsun.jp
server {
    listen 80;
    listen [::]:80;
    server_name localhost.ledsun.jp;
    return 301 https://$host$request_uri;
}

server {
    listen 443 ssl http2;
    listen [::]:443 ssl http2;
    server_name localhost.ledsun.jp;

    root /var/www/ledsun/public;
    index index.html;

    # TLS
    ssl_certificate     /etc/ssl/ledsun/fullchain.pem;
    ssl_certificate_key /etc/ssl/ledsun/privkey.pem;
    ssl_protocols TLSv1.2 TLSv1.3;
    ssl_prefer_server_ciphers on;

    access_log /var/log/nginx/ledsun.access.log;
    error_log  /var/log/nginx/ledsun.error.log;

    location / {
        try_files $uri =404;
    }
}

動作確認

sudo systemctl restart nginx

https://localhost.ledsun.jp/index.html が開けるはずです。

参考

CookieのSameSite=Laxの動きを確かめるためにローカル開発環境をHTTPS化する #Ruby - Qiita

ラグザイア

Discussion