VSCodeでDjangoをhttpsで起動

django-allauth で Facebook の OAuth を利用してログインできるようにしようとしたのですが、VSCodeから manage.py runserver で起動すると http になるため、Facebook に叱られました。そこで https で起動できるようにしました。

使ったのは django-extensions というパッケージで、pip で入れました。

(.veng)$ pip install django-extensions Werkzeug pyOpenSSL

Werkzeug と pyOpenSSL は django-extensions の RunServerPlus を使用する際に必要になるようです。詳しくはドキュメントを参照してください。

https を利用する場合はSSL証明書を用意する必要があるので openssl で自己証明書を作成します。作り方はこちらのページを参考にさせていただき、以下のスクリプトを作りました。

#!/usr/bin/bash -x

openssl req -newkey rsa -x509 -nodes -keyout localhost.key -new -out localhost.crt -subj '/CN=localhost' -reqexts 'SAN' -extensions 'SAN' -config <(cat /etc/ssl/openssl.cnf <(printf '[SAN]\nsubjectAltName=DNS:localhost,IP:127.0.0.1')) -sha256 -days 3650

このスクリプトを実行してできた localhost.crt をエクスプローラーで右クリック、「証明書のインストール」で「信頼されたルート証明機関」にインポートしておきます。

django-extensions を Django で使えるように、settings.py の INSTALLED_APPS に追加しておきます。

INSTALLED_APPS = [
    'django.contrib.admin',
    'django.contrib.auth',
    'django.contrib.contenttypes',
    'django.contrib.sessions',
    'django.contrib.messages',
    'django.contrib.staticfiles',
    'django.contrib.sites', # required by django-allauth
    'allauth', # for django-allauth
    'allauth.account', # for django-allauth
    'allauth.socialaccount', # for django-allauth
    'allauth.socialaccount.providers.facebook', # for django-allauth
    'allauth.socialaccount.providers.google', # for django-allauth
    'allauth.socialaccount.providers.line', # for django-allauth
    # for only development environment
    'django_extensions',
]

RunServerPlus を起動します。

(.veng)$ ./manage.py runserver_plus --cert-file ../certs/localhost.crt
 * Running on https://127.0.0.1:8000/ (Press CTRL+C to quit)
 * Restarting with stat
Performing system checks...

System check identified no issues (0 silenced).

Django version 3.2.5, using settings 'poll.settings'
Development server is running at https://[127.0.0.1]:8000/
Using the Werkzeug debugger (http://werkzeug.pocoo.org/)
Quit the server with CONTROL-C.
 * Debugger is active!
 * Debugger PIN: 418-813-280

指定された https://127.0.0.1:8000/ はまだ用意していないので 404 Not Found なのですが、ブラウザの証明書は有効になっていることが確認できました。

VSCode から起動するときに RunServerPlus を起動するには、launch.json を修正します。

{
    // IntelliSense を使用して利用可能な属性を学べます。
    // 既存の属性の説明をホバーして表示します。
    // 詳細情報は次を確認してください: https://go.microsoft.com/fwlink/?linkid=830387
    "version": "0.2.0",
    "configurations": [
        {
            "name": "Python: Django",
            "type": "python",
            "request": "launch",
            "program": "${workspaceFolder}/manage.py",
            "args": [
                // "runserver", //default
                
                // django-extentions RunServerPlus
                "runserver_plus",
                "--cert-file",
                "${workspaceFolder}/../certs/localhost.crt",
            ],
            "django": true
        }
    ]
}

これでVSCode で F5(デバッグの開始)すると、RunServerPlus で https が有効になりました。