Zenn
🐍

VercelにDjangoをデプロイする

2022/06/15に公開
django
Python
Vercel
tech

Vercelは簡単にGitHubと連携できるホスティングサービスであり、無料でも充分に動作します。
主にNext.jsやNuxt.jsなどのjavascript系の言語での動作例や解説はあるものの、他言語での説明資料や動作例が充実していません。

VercelはPythonにも対応しており、DjangoをVercel上で動作させることも可能です。
今回はVercel上にDjangoをデプロイさせる方法についてまとめました。

Vercel上でも以下のような初期ページが生成されることを目的としています。

Djangoのプロジェクトを用意

まずはDjangoの環境をローカルで構築しましょう。
Pythonのバージョンは3.9にして、Vercel上でも同じバージョンで動かします。

Djangoのバージョンは最新の4.0.5にします。

$ python --version
Python 3.9.0

$ pip install Django==4.0.5

以下のコマンドでDjangoのプロジェクトを作成します。カレントディレクトリ上にconfigとmanage.pyが作成されるはずです。

$ django-admin startproject config .
$ ls
config
manage.py

requirements.txtを作成

requirements.txtをカレントディレクトリ上に作成します。

$ touch requirements.txt
$ ls
requirements.txt
config
manage.py

requirements.txtの中身にはインストールをしたDjango==4.0.5を加えます。

requirements.txt
Django==4.0.5

settings.pyの編集

config/settings.pyの内容を以下のように編集します。

config/settings.py
# ALLOWED_HOSTS = []を以下のようにして、vercel.appでも開けるようにする
ALLOWED_HOSTS = [
    '*',
    '.vercel.app'
]

# LANGUAGE_CODEとTIME_ZONEを以下のように変更して日本語表示にする
LANGUAGE_CODE = 'ja'

TIME_ZONE = 'Asia/Tokyo'

DATABASESを空にする

初期設定であるdb.sqlite3を使用する場合は、以下のように内容を空にします。

config/settings.py
DATABASES = {}

静的ファイルのビルドのためにSTATIC_ROOTを設定

python manage.py collectstaticを使用するためにもSTATIC_ROOTを設定します。

config/settings.py
STATIC_ROOT = os.path.join(BASE_DIR, 'static')

静的ファイルをビルドするスクリプトを用意

vercelにデプロイされたタイミングでbuild_files.shというシェルスクリプトのファイルが実行されるようにします。

$ touch build_files.sh

ファイルの中身としては、Djangoがインストールされて、collectstaticを実行することで静的ファイルをビルドします。

build_files.sh
pip install -r requirements.txt
python3.9 manage.py collectstatic

Vercel.jsonを作成

vercelにデプロイするための設定ファイルとしてvercel.jsonを作成します。

$ touch vercel.json
$ ls
build_files.sh
config
manage.py
requirements.txt
vercel.json

vercel.jsonの中身としては以下のようになります。

vercel.json
{
    "regions": [
        "hnd1"
    ],
    "builds": [
        {
            "src": "config/wsgi.py",
            "use": "@vercel/python",
            "config": {
                "maxLambdaSize": "15mb",
                "runtime": "python3.9"
            }
        },
        {
            "src": "build_files.sh",
            "use": "@vercel/static-build",
            "config": {
              "distDir": "static"
            }
        }
    ],
    "routes": [
        {
            "src": "/static/(.*)",
            "dest": "/static/$1"
        },
        {
            "src": "/(.*)",
            "dest": "config/wsgi.py"
        }
    ]
}

configの中にあるruntimeを以下のようにすることで、python3.9上で実行するようにします。

{
    "src": "config/wsgi.py",
    "use": "@vercel/python",
    "config": {
        "maxLambdaSize": "15mb",
        "runtime": "python3.9"
    }
}

vercel.jsonの設定項目としては以下の公式のドキュメントが参考になります。

https://vercel.com/docs/project-configuration

config/wsgi.pyファイルを編集する

最後にconfig/wsgi.pyファイルを編集して、最後の行にapp = applicationを加えます。

config/wsgi.py
"""
WSGI config for config project.

It exposes the WSGI callable as a module-level variable named ``application``.

For more information on this file, see
https://docs.djangoproject.com/en/4.0/howto/deployment/wsgi/
"""

import os

from django.core.wsgi import get_wsgi_application

os.environ.setdefault('DJANGO_SETTINGS_MODULE', 'config.settings')

application = get_wsgi_application()
app = application

app = application

Vercel上でデプロイする

いよいよデプロイを行ってきます。

https://vercel.com/dashboard

上記にアクセスしてダッシュボードを開きます。そこから「+ New Project」をクリックして開き、「Import Git Repository」から対象のリポジトリを選択します。

「Deploy」をクリックすることでデプロイが実行され、一番上のような初期のDjangoの画面が表示されるはずです。

参考記事

https://www.devmaesters.com/blog/15

https://github.com/maesterzak/DjangoVercel

Discussion