さくらの VPS (Ubuntu 20.04) で Django アプリケーションを作る(3/3)

作成した Django アプリケーションの HTTPS 化、そして使用データベースを MySQL に変更します。

  1. ドメインの HTTPS 化
    • ポート 443 の開放
    • certbot と Nginx プラグインのインストール
    • certbot の設定
    • 変更内容の確認
  2. 使用データベースを MySQL に変更する
    • MySQL のインストール
    • 非 root ユーザーとデータベースの作成
    • mysqlclient インストールの準備
    • Python 仮想環境と MySQLdb の動作確認

1. サイトの HTTPS 化

サイトに https でアクセスできる様設定します。certbot を使えば Let's Encrypt の TLS/SSL 証明書の取得や設定を簡単に行うことができます。

ポート 443 の開放

さくらインターネットのパケットフィルタを使っている場合、ポート番号 443 が開放されている必要があります。

ファイアウォールで設定する場合は ufw コマンドで必要な設定を行ってください。

certbot と Nginx プラグインのインストール

certbot(Let's Encrypt 使用の HTTPS 自動設定パッケージ)と python3-certbot-nginx(Certbot 用 Nginx プラグイン)をインストールします。

$ sudo apt install certbot python3-certbot-nginx

certbot の設定

Nginx プラグインを使用して自動設定を走らせます。このプロセスによって自動的に sites-available ディレクトリ内の Nginx 設定ファイルに変更が加えられます。

コマンド内「-d」の後に HTTPS 化するドメインを入力します。Nginx の設定ファイル内、server_name に指定されているドメインと一致しているのを確認してください。

$ sudo certbot --nginx -d example.com -d www.example.com

これを実行すると緊急連絡用のメールアドレスの入力を求められ、入力して続けると利用規約への同意、お知らせメール送信の可否、そして最後に HTTP へのリクエストを HTTPS へリダイレクトするか否かを尋ねられるのでそれぞれ回答して進めていきます。

以上で完了です。https でのアクセスが可能になっているはずです。

変更内容の確認

完了後、Nginx 設定ファイルを確認すると「# managed by Certbot」のコメントと共に自動で追記された内容を確認できます。

既存の server ブロック内への追記内容

    listen [::]:443 ssl; # managed by Certbot
    listen 443 ssl; # managed by Certbot
    ssl_certificate /etc/letsencrypt/live/graffuhs.com/fullchain.pem; # managed by Certbot
    ssl_certificate_key /etc/letsencrypt/live/graffuhs.com/privkey.pem; # managed by Certbot
    include /etc/letsencrypt/options-ssl-nginx.conf; # managed by Certbot
    ssl_dhparam /etc/letsencrypt/ssl-dhparams.pem; # managed by Certbot

新規作成された server ブロックの内容

server {
    if ($host = example.com) {
        return 301 https://$host$request_uri;
    } # managed by Certbot


        listen 80;
        listen [::]:80;

        server_name example.com;
    return 404; # managed by Certbot


}
server {
    if ($host = www.example.com) {
        return 301 https://$host$request_uri;
    } # managed by Certbot


        listen 80;
        listen [::]:80;

        server_name www.example.com;
    return 404; # managed by Certbot


}

この設定によって「http://example.com」と「http://www.example.com」両方とも HTTPS へリダイレクトされる様になりました。

2. 使用データベースを MySQL に変更する

MySQL のインストール

コマンド「sudo apt install mysql-server」を実行し、MySQL をインストールします。

adminvps@xx1-234-56789:~$ sudo apt install mysql-server
adminvps@xx1-234-56789:~$ 

コマンド「sudo mysql_secure_installation」を実行。

adminvps@xx1-234-56789:~$ sudo mysql_secure_installation
adminvps@xx1-234-56789:~$ 

コマンド「sudo mysql」で MySQL へアクセスしてみます。

vpsadmin@xx1-234-56789:~$ sudo mysql
Welcome to the MySQL monitor.  Commands end with ; or \g.
Your MySQL connection id is 11
Server version: 8.0.23-0ubuntu0.20.04.1 (Ubuntu)

Copyright (c) 2000, 2021, Oracle and/or its affiliates.

Oracle is a registered trademark of Oracle Corporation and/or its
affiliates. Other names may be trademarks of their respective
owners.

Type 'help;' or '\h' for help. Type '\c' to clear the current input statement.

mysql> 

無事アクセスできました。コマンド「exit」で MySQL から出ます。

mysql> exit
Bye
vpsadmin@xx1-234-56789:~$ 

非 root ユーザーとデータベースの作成

root で接続

sudo mysql -u root
create user ユーザー名 identified by 'パスワード';
GRANT ALL PRIVILEGES ON demodb.* to demouser@'%';
flush privileges;

ここで作成したユーザー名とパスワードを Django の settings.py で使います。

mysqlclient インストールの準備

libmysqlclient-dev と default-libmysqlclient-dev をインストールします。

adminvps@xx1-234-56789:~$ sudo apt install libmysqlclient-dev default-libmysqlclient-dev

Python 仮想環境と MySQLdb の動作確認

(sample) adminvps@xx1-234-56789:~/sample/bin$ pip install wheel
Collecting wheel
  Downloading wheel-0.36.2-py2.py3-none-any.whl (35 kB)
Installing collected packages: wheel
Successfully installed wheel-0.36.2
(sample) adminvps@xx1-234-56789:~/sample/bin$ pip install mysqlclient
Requirement already satisfied: mysqlclient in /home/adminvps/sample/lib/python3.9/site-packages (2.0.3)
(sample) adminvps@xx1-234-56789:~/sample/bin$ 

ここで、Python の仮想環境と MySQLdb の動作確認をしてみます。

Python 仮想環境を作り、起動します。

vpsadmin@ss1-234-56789:~$ python3.9 -m venv testvenv
vpsadmin@ss1-234-56789:~$ source testvenv/bin/activate
(testvenv) vpsadmin@ss1-234-56789:~$

wheel をインストールします。

(testvenv) vpsadmin@ss1-234-56789:~$ pip install wheel
Collecting wheel
  Using cached wheel-0.36.2-py2.py3-none-any.whl (35 kB)
Installing collected packages: wheel
Successfully installed wheel-0.36.2
(testvenv) vpsadmin@ss1-234-56789:~$

mysqlclient をインストールします。

(testvenv) vpsadmin@ss1-234-56789:~$ pip install mysqlclient
Processing ./.cache/pip/wheels/43/55/d9/a2243d4b624c18c5cba30bf88e0521147498368068cb302532/mysqlclient-2.0.3-cp39-cp39-linux_x86_64.whl
Installing collected packages: mysqlclient
Successfully installed mysqlclient-2.0.3
(testvenv) vpsadmin@ss1-234-56789:~$ 

*pip install は「mysqlclient」ですが、python で import するときは「import MySQLdb」になります。(import mysqlclient ではない)誰も間違わないかもしれませんが僕はこれでハマってました。。。

Python を起動し、import MySQLdb ができるか確認します。

(testvenv) vpsadmin@ss1-234-56789:~$ python3.9
Python 3.9.0+ (default, Oct 20 2020, 08:43:38) 
[GCC 9.3.0] on linux
Type "help", "copyright", "credits" or "license" for more information.
>>> import MySQLdb
>>> 

無事 import できたので大丈夫そうです。

他の行程へ

さくらの VPS (Ubuntu 20.04) で Django アプリケーションを作る(2/3)

実際に Django のプロジェクト・アプリケーションを作って公開するところまで。今後同じサーバーで複数の Django プロジェクトを作っても大丈夫な様に設定していきます。

  1. サイトをホストするディレクトリの作成
    • ルートディレクトリ作成
    • 管理者の変更
  2. Django を動かす
    • Python 仮想環境作成
    • Django インストール
    • Django プロジェクトと Django アプリケーションを作成
    • settings.py の設定
    • Django の動作確認
  3. Web サーバーの設定(Nginx)
    • Web サーバー: Nginx
    • 設定ファイル(nginx.conf)
  4. アプリケーションサーバーの設定(Gunicorn)
    • アプリケーションサーバー: Gunicorn
    • 仮想環境内で pip install gunicorn
    • systemd .socket ファイル
    • systemd .service ファイル
    • Nginx の設定ファイルでソケットを使用する様設定する
  5. 静的ファイルの設定

1. サイトをホストするディレクトリの作成

サーバー上にサイトホスト用ディレクトリを作成しますが、今後を見越し、複数のドメインを同じサーバー上でホスト出来る様に配慮して作業を進めていきます。

ルートディレクトリ作成

サイトをホストするルートディレクトリを作成します。

Nginx はデフォルトで「/var/www/html」というディレクトリを作っていますが、今回は /var/www/ の配下にドメイン名のディレクトリ、そしてその配下に html というディレクトリを作ります。(イメージ:/var/www/example.com/html)

vpsadmin@xx1-234-56789:/var/www$ sudo mkdir -p example.com
[sudo] password for vpsadmin: 
vpsadmin@xx1-234-56789:/var/www$ ls
html  meatthezoo.org
vpsadmin@xx1-234-56789:/var/www$ cd example.com
vpsadmin@xx1-234-56789:/var/www/example.com$ sudo mkdir -p html

管理者の変更

ディレクトリの管理者を変更します。

vpsadmin@xx1-234-56789:/var/www$ sudo chown -R $USER:$USER /var/www/example.com/html

2. Django を動かす

Python 仮想環境作成

ルートディレクトリ(/var/www/example.com/html)直下で「python3 -m venv 仮想環境名」を実行しPython の仮想環境を作成します。

$ python3 -m venv djangovenv

Django インストール

仮想環境を起動し、「pip install django」で Django をインストールします。

% cd djangovenv
% source bin/activate
(djangovenv) % pip install django

Django プロジェクトと Django アプリケーションの作成

Django プロジェクトと Django アプリケーションを作成していきます。

(djangovenv) % django-admin startproject djangoprod
(djangovenv) % cd djangoprod
(djangovenv) % python manage.py startapp djangoapp

settings.py の設定

settings.py の ALLOWED_HOSTS にサイトのドメイン名を登録し、INSTALLED_APS にアプリケーションを追加します。

ALLOWED_HOSTS = ['example.com', 'www.example.com']

INSTALLED_APPS = [
    'django.contrib.admin',
    'django.contrib.auth',
    'django.contrib.contenttypes',
    'django.contrib.sessions',
    'django.contrib.messages',
    'django.contrib.staticfiles',

    'djangoapp.apps.DjangoAppConfig' # 追記分
]

Django の動作確認

コマンド「python manage.py runserver 0.0.0.0:8000」を実行し、ブラウザの URL バーに「ドメイン名:8000」と打ち込んでみます。

Django デフォルトのロケットの画面が出たら大丈夫です。ちなみにこの画面は settings.py の DEBUG = True の時だけ表示されます。

Djangoのデフォルトエラーページが DEBUG=Falseだと見れないのはなんでか調べた

今現在、Django の runserver を起動した場合に限り、ポート 8000 でなら Django が動くという状態です。

というわけで Web サーバー(Nginx)をアプリケーションサーバー(Gunicorn)を使って下記を解決していきます。

問題解決方法
URL バーでポート 8000 を指定しないとアクセスできないNginx の設定ファイルで、該当するドメイン名にアクセスされたら Django に繋ぐ様変更する
runserver を起動していないとアクセスできないGunicorn を使う

3. Web サーバーの設定(Nginx)

設定ファイル(nginx.conf)

デフォルトの設定ファイルは「/etc/nginx/nginx.conf」

初めから下記の二行が書いてあればこのファイルはノータッチで良さそうです。

  • include /etc/nginx/conf.d/*.conf;
  • include /etc/nginx/sites-enabled/*;

複数ドメイン対応

一つのサーバーで複数のウェブサイトを運営しようとした場合、一つの IP アドレスに複数のドメイン名が紐づく事になります。そのため、リクエストされた URL に応じて適切なサイトの情報を返せる様設定していきます。

  1. sites-available ディレクトリにドメイン毎の設定ファイルを置く
  2. 各ドメインの設定ファイルでドメインとルートディレクトリを紐付け
  3. それらファイルのシンボリックリンクを sites-enabled ディレクトリに作成
  4. sites-enabled を nginx.conf 本体に include

設定ファイルの複製と編集

「sites-available」ディレクトリの「default」ファイルを個別サイト用にコピーします。

sudo cp /etc/nginx/sites-available/default /etc/nginx/sites-available/example.com

コピーした方のファイルを確認します。下の方に Virtual Host のための設定というところがあるのでそちらを使います。上半分は Default Server のための設定なので全てコメントアウトします。

server_name と location / の部分を編集しました。

example.com ファイルの Virtual Host 設定部分
# Virtual Host configuration for example.com
#
# You can move that to a different file under sites-available/ and symlink that
# to sites-enabled/ to enable it.
#

server {
        listen 80;
        listen [::]:80;

        server_name www.example.com;
        return 301 http://example.com$request_uri;
}


server {
        listen 80;
        listen [::]:80;

        server_name example.com;

        root /var/www/example.com/html;
        index index.html;

        location / {
                try_files $uri $uri/ =404;
                include proxy_params;
                proxy_pass http://127.0.0.1:8000;
        }
}

初めの部分は「www.example.com」へのアクセスを自動的に「example.com」へリダイレクトする設定です。

シンボリックリンクを作成します。

sudo ln -s /etc/nginx/sites-available/example.com /etc/nginx/sites-enabled/

Nginx を再起動します。

sudo systemctl restart nginx

そして runserver を実行して、反映を確かめます。

python manage.py runserver 0.0.0.0:8000

これで一つ解決です。ポート 8000 を URL に含めなくても Django に飛ぶ様になりました。

次は runserver を起動していないとアクセスできないという部分を、Gunicorn を使って解決します。

問題解決方法
runserver を起動していないとアクセスできないGunicorn を使う

4. アプリケーションサーバーの設定(Gunicorn)

Nginx から飛んできたリクエストを、待ち受けているソケットから Django アプリケーションに伝える様に設定します。

言い方を変えると Nginx からのリクエストを .socket ファイルが受け、.service ファイルを起動し Gunicorn の処理を実行します。

Gunicorn のインストール

仮想環境内で pip install gunicorn を実行します。

pip install gunicorn

.socket と .service の作成

「/etc/systemd/system/」ディレクトリに .socket と .service を作成します。今回はファイル名をそれぞれ「sample_django.socket」、「sample_django.service」としています。

systemd .socket ファイル

Nginx の設定ファイルで指定したポートでリクエストを待ち受け、 リクエストがあったら指定されているサービスに接続を渡します。

# sample_django.socket

[Unit]
Description=gunicorn socket
[Socket]
ListenStream=/run/sample_django.sock
[Install]
WantedBy=sockets.target
項目メモ
Descriptionログ出力の際などに使われる
ListenStreamポートの指定。Nginx 設定ファイルの pass_proxy で指定
WantedBysockets.target

systemd .service ファイル

サービスの依存関係や実際の実行内容を定義します。

# sample_django.service

[Unit]
Description=gunicorn daemon
Requires=sample_django.socket
After=network.target
[Service]
User=root
Group=root
WorkingDirectory=/var/www/example.com/html/djangovenv/djangoprod
ExecStart=/var/www/example.com/html/djangovenv/bin/gunicorn --workers 3 --bind unix:/run/sample_django.sock djangoprod.wsgi:application
[Install]
WantedBy=multi-user.target
項目メモ
Descriptionログ出力の際などに使われる
Requires対応する .socket ファイル
After
User
Group
WorkingDirectorymanage.py があるディレクトリのフルパス?
ExecStartsystemctl start した時に実行するコマンド。
.sock と wsgi を bind。
venv 内の gunicorn のフルパス(?)を指定
WantedBy大抵 multi-user.target で大丈夫

サービスを起動します。

systemctl start sample_django.socket
systemctl start sample_django.service

Nginx 設定ファイルの変更

Nginx 設定ファイルの proxy_pass の部分を下記の様に変更しました。.socket ファイルの ListenStream で設定したポートを指定しています。

location / {
        try_files $uri $uri/ =404;
        include proxy_params;
        # proxy_pass http://127.0.0.1:8000;
        proxy_pass http://unix:/run/sample_django.sock;
}

Nginx の設定を検証し再起動します。

$ sudo nginx -t
nginx: the configuration file /etc/nginx/nginx.conf syntax is ok
nginx: configuration file /etc/nginx/nginx.conf test is successful
$ sudo systemctl restart nginx

これで runserver を実行しなくても URL を叩けば Django アプリケーションへアクセスできる様になったはずです。

*作業時は何かにつけて「pkill gunicorn」で gunicorn を終わらせた方が良いです。エラーが起きていくらコードを修正しても治らないまま数時間経って、「pkill gunicorn」一発で治ったこともありました。

静的ファイルの設定

実はこの時点では CSS や JavaScript のいわゆる静的ファイルはうまく反映されません。ドメイン名/admin にブラウザでアクセスすると CSS が抜けている状態だと思います。

Django で静的ファイルとうまくやる

本番環境でちゃんと表示される様、settings.py と Nginx の設定ファイルを編集します。

settings.py の編集

settings.py 内では STATICFILES_DIRS と STATIC_ROOT を設定します。

STATICFILES_DIRS = [
    os.path.join(BASE_DIR, 'static'),
]
STATIC_ROOT = '/var/www/example.com/html/static'
項目メモ
STATICFILES_DIRScollectstatic が静的ファイルを追加検索する対象のディレクトリ
STATIC_ROOTcollectstatic 実行時に静的ファイルの集約先となるディレクトリ

collectstatic を実行します。

python manage.py collectstatic

Nginx の設定ファイルの編集

server ディレクティブの中に STATIC_ROOT 指定したパスを追記しました。

        location /static {
                alias /var/www/example.com/html/static;
        }

これでドメイン名/admin を再度確認すると CSS が反映されていると思います。

他の行程へ

さくらの VPS (Ubuntu 20.04) で Django アプリケーションを作る(1/3)

さくらの VPS で Django アプリケーションを作るまでに実際に辿ったステップを記録します。手順がかなり多いので途中あまり詳しく書いていないところもありますがご了承ください。

まずは VPS の契約から Ubuntu OS の設定、Python のインストール、Web サーバーのインストールまで。

  1. さくらのレンタル VPS の契約
  2. 独自ドメインの取得
  3. IP アドレスとドメイン名を紐付け
  4. OS (Ubuntu 20.04) のインストール
  5. Ubuntu の初期設定
    • ssh でサーバーへ接続
    • 非 root ユーザーの作成
    • パッケージリストを最新版へ更新
    • パッケージのアップグレード
    • サーバーの再起動
  6. FTP サーバーのインストール
  7. 開発パッケージのインストール
  8. Python と関連パッケージのインストール
    • 依存関係のインストール
    • Python 3.9 のインストール
    • python3.9-dev のインストール
    • 仮想環境(venv)のインストール
  9. Web サーバー(Nginx)のインストール

1. さくらのレンタル VPS の契約

さくらのサイトで契約。月額 880 円〜の さくらのVPS 1G プランにしました。

https://vps.sakura.ad.jp/

2. 独自ドメインの取得

こちらもさくらのサイトで取得しました。

https://domain.sakura.ad.jp/

3. IP アドレスとドメイン名を紐付け

VPS コントロールパネルの「ネームサーバ登録」をクリックします。

遷移先のページで「ドメインリスト」をクリック後、対象のドメインの「ゾーン編集」をクリックし、情報を登録します。

ゾーン情報の設定に関しては下記の記事にもまとめているので参考にしてみてください。

4. OS (Ubuntu 20.04) のインストール

VPS コントロールパネルの「各種設定」そして「OSインストール」をクリックします。

今回は標準 OS の Ubuntu 20.04 をインストールします。

サーバーのファイアウォールを設定する代わりに、さくら VPS のパケットフィルタの機能でポートの開閉を設定しています。

ファイアウォールで設定する場合はパケットフィルタをオフにします。

5. Ubuntu の初期設定

ssh でサーバーへ接続

ターミナルで「ssh 管理ユーザー名@ホスト名」と打ち込み接続します。ホスト名は下記の通りコントロールパネルの「ネットワーク情報」タブで確認できます。

下記の様にコマンド「ssh 管理ユーザー名@ホスト名」を入力します。

% ssh ubuntu@xx1-234-56789.vs.sakura.ne.jp

初めて接続する際に下記の様に「The authenticity of host 'xx1-234-56789.vs.sakura.ne.jp (123.456.78.90)' can't be established.」とメッセージが出ることがありますが特に問題ないので yes と打ち込みます。

The authenticity of host 'xx1-234-56789.vs.sakura.ne.jp (123.456.78.90)' can't be established.
ECDSA key fingerprint is XXX123:ABCDEFGHIJKLMNOPQRSTUVWXYZ.
Are you sure you want to continue connecting (yes/no/[fingerprint])? 
Are you sure you want to continue connecting (yes/no/[fingerprint])? yes
Warning: Permanently added 'xx1-234-56789.vs.sakura.ne.jp.123.456.78.90' (ECDSA) to the list of known hosts.
% ssh ubuntu@xx1-234-56789.vs.sakura.ne.jp
ubuntu@xx1-234-56789.vs.sakura.ne.jp's password: 

パスワードを入力し無事ログインできました。

% ssh ubuntu@xx1-234-56789.vs.sakura.ne.jp
ubuntu@xx1-234-56789.vs.sakura.ne.jp's password: 
Welcome to Ubuntu 20.04.1 LTS (GNU/Linux 5.4.0-52-generic x86_64)

 * Documentation:  https://help.ubuntu.com
 * Management:     https://landscape.canonical.com
 * Support:        https://ubuntu.com/advantage

  System information as of Fri Apr  9 08:11:04 JST 2021

  System load:  0.0               Processes:             105
  Usage of /:   2.0% of 94.43GB   Users logged in:       0
  Memory usage: 16%               IPv4 address for ens3: 123.456.78.90
  Swap usage:   0%


66 updates can be installed immediately.
0 of these updates are security updates.
To see these additional updates run: apt list --upgradable


The list of available updates is more than a week old.
To check for new updates run: sudo apt update


The programs included with the Ubuntu system are free software;
the exact distribution terms for each program are described in the
individual files in /usr/share/doc/*/copyright.

Ubuntu comes with ABSOLUTELY NO WARRANTY, to the extent permitted by
applicable law.


SAKURA internet [Virtual Private Server SERVICE]

To run a command as administrator (user "root"), use "sudo <command>".
See "man sudo_root" for details.

ubuntu@xx1-234-56789:~$ 

非 root ユーザーの作成

ログインしたユーザーを root ユーザーへ昇格し、新たな sudo ユーザーを作成します。詳しくは下記の記事を参照してください。

パッケージリストを最新版へ更新

コマンド「sudo apt update」でパッケージリストを最新版に更新します。

ubuntu@xx1-234-56789:~$ sudo apt update
ubuntu@xx1-234-56789:~$ 

パッケージのアップグレード

コマンド「sudo apt upgrade」を実行し、サーバーに元々インストールされているパッケージに対してアップグレードを実施します。

ubuntu@xx1-234-56789:~$ sudo apt upgrade
ubuntu@xx1-234-56789:~$ 

サーバーの再起動

コマンド「sudo reboot」を実行し、サーバーを再起動します。

ubuntu@xx1-234-56789:~$ sudo reboot
Connection to xx1-234-56789.vs.sakura.ne.jp closed by remote host.
Connection to xx1-234-56789.vs.sakura.ne.jp closed.
% 

6. FTP サーバーのインストール

FTP 接続ができる様にしたいので vsftpd をインストールします。コマンド「sudo apt install vsftpd」を実行します。

ubuntu@ik1-437-50827:~$ sudo apt install vsftpd
ubuntu@ik1-437-50827:~$ 

Cyberduck で接続できました。

7. 開発パッケージのインストール

adminvps@xx1-234-56789:~$ sudo apt install build-essential
adminvps@xx1-234-56789:~$ 

8. Python と関連パッケージのインストール

コマンド「python3 -V」で Ubuntu 20.04 にもともと入っている Python のバージョンを確認します。

adminvps@xx1-234-56789:~$ python3 -V
Python 3.8.5
adminvps@xx1-234-56789:~$

依存関係のインストール

Python 自体をインストールする前に必要な依存関係をインストールします。コマンド「sudo apt install 〜」で様々なパッケージをインストールします。

adminvps@xx1-234-56789:~$ sudo apt install zlib1g-dev libncurses5-dev libgdbm-dev libnss3-dev libssl-dev libreadline-dev libffi-dev libsqlite3-dev wget libbz2-dev
adminvps@xx1-234-56789:~$ 

Python 3.9 のインストール

adminvps@xx1-234-56789:~$ sudo apt install python3.9
adminvps@xx1-234-56789:~$ 

python3.9-dev のインストール

仮想環境(venv)のインストール

Python の仮想環境である venv をインストールするためコマンド「sudo apt-get install python3.9-venv」を実行します。

9. Web サーバー(Nginx)のインストール

コマンド「sudo apt install nginx」で Nginx をインストールします。

sudo apt install nginx

ブラウザの URL バーにサーバーの IP アドレスを入れてみて、下記のページが出れば無事インストールされています。

とりあえず VPS に Ubuntu が入り、Python と Nginx がインストールされた状態です。

他の行程へ

【Django】独自 ID の自動インクリメントが行われていなかった

問題

Django でモデルを扱う際、デフォルトで作成される id ではないプライマリキーで管理をしたかったので、なんとなくネットでささっと見た情報で 「models.AutoField(primary_key=True)」を設定していました。

ただ、データベース上での設定が正しくできていなかった様で自動インクリメントが機能していませんでした。

そのため Django の admin 画面からデータを登録する際、すでに存在する値が id として登録されていました。

ちなみに、models.py では「models.AutoField(primary_key=True)」となっていたもののテーブル上ではカラムがプライマリキーになっていなかったため、エラーにもなっていませんでした。

修正作業

この時点でのテーブルは下記の状態。「id」カラムを修正していきます。

mysql> describe ig_mst_product;
+-------------------+--------------------------+------+-----+---------+-------+
| Field             | Type                     | Null | Key | Default | Extra |
+-------------------+--------------------------+------+-----+---------+-------+
| id                | int(6) unsigned zerofill | NO   |     | 000000  |       |
| product_nm        | varchar(60)              | YES  |     | NULL    |       |
| product_category  | varchar(20)              | YES  |     | NULL    |       |
| brand_cd          | int(6) unsigned zerofill | YES  |     | NULL    |       |
| product_url       | text                     | YES  |     | NULL    |       |
| product_image_url | text                     | YES  |     | NULL    |       |
+-------------------+--------------------------+------+-----+---------+-------+

プライマリキーとして設定

既存の値が再度使われてしまうのはおかしいので MySQL 上でプライマリキーを設定。

mysql> alter table ig_mst_brand add primary key (id);

値の重複の解決

admin 画面からレコードを追加すると「1062, "Duplicate entry '000000' for key 'ig_mst_product.PRIMARY'"」という感じで値の重複が発生。

「000000」を id として使用しようとしているので、おそらく値の自動インクレメントがされていない状態

デフォルト値の設定削除

デフォルト値として「000000」を設定していたのでとりあえずなくしてみます。

mysql> alter table ig_mst_product alter id drop default;

auto_increment の設定

その上で MySQL でカラムに auto_increment を設定しようとしたところ、また値の重複で拒否されました。

mysql> alter table テーブル名 modify カラム名 int(6) unsigned zerofill not null auto_increment;
ERROR 1062 (23000): ALTER TABLE causes auto_increment resequencing, resulting in duplicate entry '000001' for key 'テーブル名.PRIMARY'

この時点で id カラムには「000000」〜「000069」まで存在していたにもかかわらず、なぜか「000001」を使おうとして重複エラーが返ってきている状況。

調べてみたところ、既存データの対象のカラムの中に 0 もしくは -1 以下の値が入っているとこのエラーになる様です。既存データで「000000」が存在したのでこれを別の値に変更して再度実行したら成功しました。

mysql> alter table ig_mst_product modify id int(6) unsigned zerofill not null auto_increment;
Query OK, 69 rows affected, 2 warnings (0.04 sec)
Records: 69  Duplicates: 0  Warnings: 2

正しい設定をまとめると…

Id として使用するカラムがデータベース上で下記の条件を満たす必要がある様です。

  • デフォルト値なし
  • プライマリキーとして設定
  • AUTO_INCREMENT を設定
    • 既存データで 0 もしくはそれ以下の値が入っていないことを確認

一応 Before / After も載せておきます。Key, Default, Extra が変わっています。

Before

mysql> describe ig_mst_product;
+-------------------+--------------------------+------+-----+---------+-------+
| Field             | Type                     | Null | Key | Default | Extra |
+-------------------+--------------------------+------+-----+---------+-------+
| id                | int(6) unsigned zerofill | NO   |     | 000000  |       |
| product_nm        | varchar(60)              | YES  |     | NULL    |       |
| product_category  | varchar(20)              | YES  |     | NULL    |       |
| brand_cd          | int(6) unsigned zerofill | YES  |     | NULL    |       |
| product_url       | text                     | YES  |     | NULL    |       |
| product_image_url | text                     | YES  |     | NULL    |       |
+-------------------+--------------------------+------+-----+---------+-------+

After

mysql> describe ig_mst_product;
+-------------------+--------------------------+------+-----+---------+----------------+
| Field             | Type                     | Null | Key | Default | Extra          |
+-------------------+--------------------------+------+-----+---------+----------------+
| id                | int(6) unsigned zerofill | NO   | PRI | NULL    | auto_increment |
| product_nm        | varchar(60)              | YES  |     | NULL    |                |
| product_category  | varchar(20)              | YES  |     | NULL    |                |
| brand_cd          | int(6) unsigned zerofill | YES  |     | NULL    |                |
| product_url       | text                     | YES  |     | NULL    |                |
| product_image_url | text                     | YES  |     | NULL    |                |
+-------------------+--------------------------+------+-----+---------+----------------+

【Django】Nginx + Gunicorn でサブドメインを設定する方法

「example.com」というドメイン名ですでに運用しているところに追加で「sub.example.com」も使いたいという想定で書きます。

また、Django の処理には Gunicorn を使っています。

ネームサーバーでサブドメインの設定をする

ネームサーバーでサブドメインを登録します。

さくらインターネットを使っている場合は会員メニュー > ドメイン > ゾーン表示の画面で登録できます。

フィールド
エントリ名sub
種別別名 (CNAME)
@
DNSチェックする
TTLの設定なし

サブドメイン用のディレクトリを作る

任意の場所にサイトをホストするためのディレクトリを作成します。

例えば「example.com」というディレクトリの配下にさらにサブドメイン用に「sub」ディレクトリ、その配下に「html」と作る場合は下記の様な形。

$ cd var/www/example.com
$ mkdir sub
$ cd sub
$ mkdir html

ディレクトリの管理者を変更します。

$ sudo chown -R $USER:$USER /var/www/example.com/sub/html/

注意

一度上記の管理者の変更を飛ばした際、後で Django の「python manage.py startapp アプリ名」を実行した時に「ImportError: Couldn't import Django. Are you sure it's installed and available on your PYTHONPATH environment variable? Did you forget to activate a virtual environment?」というエラーが出ました。

「pip install django」を実行した際に django モジュールが仮想環境内に上手くインストールされなかったことが原因です。

仮想環境と Django プロジェクトを作成する

Python の仮想環境を作成、起動します。

$ cd var/www/example.com/sub/html/
$ python3.9 -m venv dj_proj_venv
$ cd dj_proj_venv
$ source bin/activate

Django を pip install し、プロジェクトとアプリケーションを作成します。

(dj_proj_venv) $ pip install django
(dj_proj_venv) $ django-admin startproject dj_proj
(dj_proj_venv) $ cd dj_proj
(dj_proj_venv) $ python manage.py startapp dj_app

settings.py の INSTALLED_APPS にアプリケーションを追記します。

INSTALLED_APPS = [
    'django.contrib.admin',
    'django.contrib.auth',
    'django.contrib.contenttypes',
    'django.contrib.sessions',
    'django.contrib.messages',
    'django.contrib.staticfiles',

    'dj_app.apps.DjAppConfig', # 追記分
]

settings.py の ALLOWED_HOSTS にサブドメインを含むのを追加します。

ALLOWED_HOSTS = ['sub.example.com']

Gunicorn を設定する

Gunicorn をインストールします。

$ pip install gunicorn

.socket ファイルの作成

# example_sub.socket
[Unit]
Description=gunicorn socket
[Socket]
ListenStream=/run/example_sub.sock
[Install]
WantedBy=sockets.target
項目メモ
Descriptionログ出力の際などに使われる
ListenStreamポートの指定。Nginx 設定ファイルの pass_proxy で指定
WantedBysockets.target

.service ファイルの作成

# example_sub.service
[Unit]
Description=gunicorn daemon
Requires=example_sub.socket
After=network.target
[Service]
User=root
Group=root
WorkingDirectory=/var/www/example.com/sub/html/dj_proj_venv/dj_proj
ExecStart=/var/www/example.com/sub/html/dj_proj_venv/bin/gunicorn --workers 3 --bind unix:/run/sample_django.sock dj_proj.wsgi:application
[Install]
WantedBy=multi-user.target
項目メモ
Descriptionログ出力の際などに使われる
Requires対応する .socket ファイル
After
User
Group
WorkingDirectorymanage.py があるディレクトリのフルパス?
ExecStartsystemctl start した時に実行するコマンド。
.sock と wsgi を bind。
venv 内の gunicorn のフルパス(?)を指定
WantedBy大抵 multi-user.target で大丈夫

socket の待ち受けを開始します。

$ systemctl start example_sub.socket
$ systemctl start example_sub.service

Nginx の設定ファイルにサブドメインの処理を追記する

「sub.example.com」と「example.com」の処理が記述されています。

server {
        listen 80;
        listen [::]:80;

        server_name sub.example.com;

        root /var/www/example.com/sub/html;
        index index.html;

        location / {
                proxy_set_header Host $http_host;
                proxy_set_header X-Forwarder-For $proxy_add_x_forwarded_for;
                proxy_set_header X-Forwarded-Proto $scheme;
                proxy_pass http://unix:/run/example_sub.sock;
        }

        location /static {
                alias /var/www/example.com/sub/html/static;
        }

}

server {
        listen 80;
        listen [::]:80;

        server_name example.com;

        root /var/www/example.com/html;
        index index.html;

        location / {
                proxy_set_header Host $http_host;
                proxy_set_header X-Forwarder-For $proxy_add_x_forwarded_for;
                proxy_set_header X-Forwarded-Proto $scheme;
                proxy_pass http://unix:/run/example.sock;
        }

        location /static {
                alias /var/www/example.com/html/static;
        }

}

ローカルで作成した Django アプリケーションを Ubuntu の本番環境へ反映する

Mac のローカル環境で作成した Django プロジェクトをさくらの VPS で用意した Ubuntu 環境へ反映する際の流れをメモしています。

下記が完了していることを想定しています。

  • Web サーバーの設定が完了済み(筆者は Nginx を使用)
  • 仮想環境を作るディレクトリが決めてある
  1. データベースを本番環境にコピーする
    • ローカル環境での作業
    • 本番環境での作業
  2. ローカル環境のパッケージを本番環境で再現
    • requirements.txt の作成
    • requirements.txt を本番環境へコピー
    • 本番環境で Python 仮想環境を作成
    • requirements.txt によるパッケージインストール
  3. settings.py の編集
    • ファイルを分割する必要性
    • 開発環境の runserver 実行時に settings_dev.py を指定
    • settings.py(本番環境用)の編集
  4. Django ソースコードを本番環境に配置
    • 本番環境への git のインストール
    • リモートリポジトリから本番環境へファイルをコピー
  5. gunicorn のインストール
  6. データベースのログイン情報をサーバーの環境変数に記述
  7. 静的ファイルの配置

1. データベースを本番環境にコピーする

検証環境で準備したデータベース、テーブル、そしてデータを本番環境でも反映します。

ここはうまくやれば一行スクリプト書いて終了する方法もある様ですが、色々とエラーが出て逆にめんどくさそうだったのでステップバイステップでやっていきます。

ローカル環境での作業

まずローカル環境でコマンド「mysqldump データベース名 > dump.txt」を実行し、dump ファイルを作成します。

% mysqldump graffuhs > dump.txt                                                              
%

それを FTP か何かで本番環境へアップロードします。

本番環境での作業

本番環境に接続し、本番環境の MySQL でデータベースを作成します。

mysql> create database データベース名;

そしてコマンド「sudo mysql データベース名 < dump.txt」を実行します。

$ sudo mysql データベース名 < dump.txt
$

これで本番環境の MySQL にもローカル環境と同じデータベース、テーブル、そしてデータがコピーされました。

2. ローカル環境のパッケージを本番環境で再現

ローカル環境の Python 関連パッケージを本番環境でも再現するため、ローカル環境で requirements.txt ファイルを作成し、それを元に本番環境でパッケージインストールをさせます。

requirements.txt の作成

ローカル環境の Python 仮想環境へ移り、コマンド「pip freeze > requirements.txt」を実行します。

% pip freeze > requirements.txt

requirements.txt を本番環境へコピー

コマンド「scp requirements.txt 本番環境のユーザー名@本番環境のホスト名(もしくは IP アドレス):保存先のディレクトリ」を実行します。

だいぶ長いですが下記の例だとすると。。。

  • 本番環境のユーザー名: vpsadmin
  • 本番環境のホスト名: xx1-234-56789.vs.sakura.ne.jp
  • 保存先のディレクトリ: /var/www/example.com/html

下記の様になります。

scp requirements.txt vpsadmin@xx1-234-56789.vs.sakura.ne.jp:/var/www/example.com/html

無事本番環境に requirements.txt がコピーされました。

$ ls
requirements.txt

本番環境で Python 仮想環境を作成

本番環境のディレクトリへ移動し、Python の仮想環境を作成します。

$ python3.9 -m venv pythonvenv
$ ls
pythonvenv  requirements.txt

requirements.txt によるパッケージインストール

本番環境の Python 仮想環境に入った状態で、コマンド「pip install -r requirements.txt」を実行します。

(pythonvenv) $ pip install -r requirements.txt

すると requirements.txt の内容を元に Django を含めローカル環境で使っていたものと同じパッケージがインストールされます。

3. settings.py の編集

ファイルを分割する必要性

settings.py は本番環境と開発環境で内容が異なる部分が出てくるので、下記の様にファイルを分ける必要があります。(ファイル名は任意)

  • settings_common.py:開発環境と本番環境で共通の部分を記述
  • settings.py:本番環境でのみ適用する部分を記述
  • settings_dev.py:開発環境でのみ適用する部分を記述

settings.py と settings_dev.py それぞれに「from .settings_common import *」と記述し、共通部分を settings_common.py から読み込む様設定します。

開発環境の runserver 実行時に settings_dev.py を指定

runserver 実行時、デフォルトでは settings.py が設定ファイルとして読み込まれますが、今後開発環境(ローカル環境)では settings_dev.py を使う必要があります。

そのため、今後開発環境で runserver を実行する際は settings_dev.py を「runserver --settings=プロジェクトディレクトリ名.settings_dev」の形式で渡して実行します。

(inmybag) % python manage.py runserver --settings=some_project.settings_dev

settings.py(本番環境用)の編集

DEBUG の変更

False に変更

DEBUG = False

ALLOWED_HOSTS の変更

ドメイン名を設定。

ALLOWED_HOSTS = ['example.com']

Web サーバーで www.example.com から example.com のリダイレクトを行っていれば example.com のみを設定するだけで大丈夫。

静的ファイルの本番環境での配置場所

STATIC_ROOT = '/var/www/examlpe.com/html/static'

4. Django ソースコードを本番環境に配置

本番環境への git のインストール

本番環境でコマンド「sudo apt update」を実行しパッケージリストを更新、その後「sudo apt install git」で git をインストールします。

$ sudo apt update
$ sudo apt install git
Reading package lists... Done
Building dependency tree       
Reading state information... Done
git is already the newest version (1:2.25.1-1ubuntu3.1).
git set to manually installed.
0 upgraded, 0 newly installed, 0 to remove and 18 not upgraded.

リモートリポジトリから本番環境へファイルをコピー

プロジェクトフォルダをリポジトリに設定しているので、プロジェクトフォルダを配置したい場所へ移動した上で git clone を実行します。

$ git clone https://github.com/ユーザー名/リポジトリ名.git

これで本番環境にもプロジェクトフォルダがコピーされました。

ローカル環境からリモートリポジトリへファイルを反映させる方法はこちら↓

https://notemite.com/programming/github-local-to-remote

5. gunicorn のインストール

本番環境でのみ必要となるものとして、アプリケーションサーバーがあります。今回は gunicorn を使います。

Python 仮想環境内でアプリケーションサーバーの gunicorn をインストールします。

(pythonvenv) $ pip install gunicorn

socket の待ち受けを開始します。

(pythonvenv) $ systemctl start example_sub.socket
(pythonvenv) $ systemctl start example_sub.service

今後作業する際は何かにつけて「pkill gunicorn」で gunicorn を終わらせた方が良いです。エラーが起きた時にいくらコードを修正しても治らないまま数時間経って、「pkill gunicorn」一発で治ったこともありました。

6. データベースのログイン情報をサーバーの環境変数に記述

MySQL のデータベースを使用していて、settings.py ではユーザー名とパスワードを環境変数から取る様に設定しています。

DATABASES = {
    'default': {
        'ENGINE': 'django.db.backends.mysql',
        'NAME': 'データベース名',
        'USER': os.environ.get('DB_USER'),
        'PASSWORD': os.environ.get('DB_PASSWORD'),
        'HOST': '',
        'PORT': '',
    }
}

そのため、サーバーの環境変数として記述します。ホームディレクトリの .bashrc ファイルの最下部に下記を追加しました。

export DB_USER='ユーザー名'
export DB_PASSWORD='パスワード'

7. 静的ファイルの配置

コマンド「python manage.py collectstatic」を実行し、settings.py で STATIC_ROOT に設定したパスに静的ファイルを集約します。

$ python manage.py collectstatic

これでとりあえず本番環境でも動くと思います。

Django のフォームで投稿した内容を Postfix でメール送信する方法

Django で作ったサイトのフォームで受け付けた情報を自分の Gmail アカウントへ送信する様に設定します。受信については特に考慮していません。

サーバーの OS は Ubuntu 20.04 となっています。

Postfix の設定

コマンド「sudo apt install postfix」を実行し、Postfix をインストールします。

すると下記の様な画面が表示されます。

「General type of mail configuration」の文言の後にいくつか選択肢が表示されますが、No configuration を選択します。

/etc/postfix/main.cfの編集

インストールが完了したらコマンド「sudo cp /usr/share/postfix/main.cf.debian /etc/postfix/main.cf」を実行し、postconf コマンドで main.cf ファイルを編集していきます。hostname、mydomain、myorigin の3つを確認、設定します。

hostname の設定

DNS の MX レコードで指定されているホスト名を指定します。

$ sudo postconf -e "myhostname = mail.example.com"

コマンド「vi /etc/postfix/main.cf」で main.cf を確認すると「myhostname = mail.example.com」が追記されているはずです。

mydomain の設定

mydomain は hostname の値によって自動的に決まります。コマンド「postconf mydomain」を実行して確認できます。hostname からサブドメインが除外された値になっているはずです。

$ postconf mydomain
mydomain = example.com

もし上記の様な値が返ってこない場合はコマンド「sudo postconf -e "mydomain = example.com"」で明示的に main.cf に設定します。

myorigin の設定

myorigin は デフォルトでは $myhostname を参照しています。

$ postconf myorigin
myorigin = $myhostname

代わりに $mydomain を参照する様変更する必要があります。

コマンド「sudo postconf -e "myorigin = $mydomain"」だとなぜかうまく反映されなかったので「sudo vi /etc/postfix/main.cf」でファイルを開いて直接「myorigin = $mydomain」を記述しました。

$ postconf myorigin
myorigin = $mydomain

Postfix の再起動

コマンド「sudo systemctl restart postfix.service」で Postfix を再起動します。

$ sudo systemctl restart postfix.service
$ 

main.cf には下記の2行が追記されていれば Postfix の設定は完了です。

myhostname = mail.example.com
myorigin = $mydomain

Django の settings.py の編集

Django プロジェクトの settings.py に下記を設定します。

EMAIL_BACKEND = 'django.core.mail.backends.smtp.EmailBackend'
EMAIL_HOST = 'localhost'
EMAIL_PORT = 25
EMAIL_HOST_USER = ''
EMAIL_HOST_PASSWORD = ''
EMAIL_USE_TLS = False
DEFAULT_FROM_EMAIL = 'Sender <admin@example.com>'

動作確認

Django サイトのフォームで試しに投稿したところ、一応指定した G メールアカウントには届きました。

この時点で一応最低限の目的は達成されましたが、メールの暗号化とメールの認証について気になったので下記にまとめます。

メールの暗号化

Postfix で Gmail アカウント宛に送信したメールの詳細を見てみると「このメールは sakura.ne.jp で暗号化されませんでした」と表示があります。

これを解決するには、送信先がTLS(Transport Layer Security)に対応する場合はTLSで暗号化して送信する設定を Postfix 側で適用する必要があります。

下記のコマンドで main.cf に「smtp_tls_security_level = may」と追記し、 Postfix を再起動します。

$ sudo postconf -e "smtp_tls_security_level = may"
$ sudo systemctl restart postfix.service
$ 

再度メールを送って同じ部分を確認してみると「標準的な暗号化(TLS)」という表示に変わりました。

これでメールの暗号化は完了です。

メールの認証

Gメールで受信したメールの送信者のアイコンにカーソルを合わせると「Gメールでは、このメールが(スパム発信者からではなく)本当に example.com から送信されたメールであることを確認できませんでした。」という文言も表示されます。

この点に関しては手間がかかりそうな気がするので追々対応した際に追記します。

Django の クラスベースビューで URL のパラメータを使う

まず URL ディレクトリの文字列を使う場合の復習

Django の ListView などでテンプレートに返すデータをフィルタリングする際、urls.py で設定した URL ディレクトリの文字列を取得してそれを元にすることがあると思います。

下記の様な感じで get_queryset 関数で self.kwargs から値を取り出す感じですね。

# urls.py
urlpatterns = [
    path('<str:some_code>/', views.SomeData.as_view(), name="some_data"),
]
# views.py
class SomeData(generic.ListView):
    ### 一部省略 ###
    def get_queryset(self):
        code = self.kwargs['some_code']
        return SomeDataModel.objects.filter(some_code_column=code)

ただ、今回はそうではなく URL のパラメータを「ドメイン名.com/?キー=値&キー=値」の形式で取得してそれをデータ取得に使いたいと思います。

URL のパラメータを使いたい

self.request.GET.get(パラメータキー) で取得

get_queryset 関数をオーバーライドする際に self.request.GET.get(パラメータのキー) で取得できます。

例えば「http://127.0.0.1:8000/devicelist/?brand_nm=apple&category=laptop,phone」の様な URL の場合。

「?brand_nm=apple&category=laptop,phone」の部分をビューの処理に使いたいとします。

# views.py 内 get_queryset 関数
def get_queryset(self):
    brand = self.request.GET.get('brand_nm')
    return SomeDataModel.objects.filter(brand_nm=brand)

値が一つだけの場合

値が一つだけの場合(brand_nm=apple)は「self.request.GET.get(キー)」でそのまま値が一つ取得できます。

print(self.request.GET.get('brand_nm'))
# apple

値が複数の場合

複数の値を「,」で繋げて URL に渡した場合(category=laptop,phone)は、「,」が含まれただけの一つの文字列になっています。

print(self.request.GET.get('category'))
# laptop, phone

なので一旦 .split(',') を通してリストにしてあげる必要があります。

print(self.request.GET.get('category').split(','))
# ['laptop', 'phone']
print(self.request.GET.get('category').split(',')[0])
# laptop
print(self.request.GET.get('category').split(',')[1])
# phone

値を指定していない場合

URL で渡していないキーを指定すると None が返ってきます。

print(self.request.GET.get('product_type'))
# None

Django の ModelForm で select option をテーブルから参照する

やりたいこと:Django の ModelForm を作るときに、ドロップダウンメニューの選択肢(select option)をデータベースのテーブルから持ってきたい。

結論から言いますと Foreign Key を使って別のテーブルのユニークキーをフォームの選択肢として利用します。

models.py でドロップダウンにしたいカラムに models.ForeignKey を適用

まず、models.py でドロップダウン表示にしたい項目に models.ForeignKey を適用します。

別テーブルでユニークになっている値(つまりドロップダウンの候補になる値)が入るという設定をします。

# models.py

class IgMstProduct(models.Model):
    id = models.AutoField(primary_key=True)
    product_nm = models.CharField(max_length=60, blank=True, null=True)
    brand_cd = models.ForeignKey('IgMstBrand',on_delete=models.SET_NULL, null=True, db_column='brand_cd')
    product_url = models.TextField(blank=True, null=True)

    class Meta:
        managed = False
        db_table = 'ig_mst_product'

上記の設定時、「db_column」で DB 側で実際に情報を受け取るカラム名を指定しないと、フォーム Submit 時に「1054, "Unknown column '〜_id' in 'field list'"」というエラーが返ってくると思います。

詳しくは調べていませんがどうやら Django が自動的に「〜_id」のカラム名で処理をしようとするらしいです。

forms.py で ModelChoiceField を設定

下記の様に対象の項目に対して forms.ModelChoiceField(queryset=モデル名.objects.all()) を設定してみると、なんとなくそれっぽくドロップダウンが表示されます。

# forms.py

class IgProductForm(forms.ModelForm):
    brand_cd = forms.ModelChoiceField(queryset=IgMstBrand.objects.all())

    class Meta:
        model = IgMstProduct
        fields = ('product_nm', 'product_category', 'brand_cd', 'product_url',)

が、このままだとドロップダウンの表示名が下記の様に「モデル名 object (1)」とかになるので変更します。

<!-- Chrome で「検証」した例 -->

<select name="brand_cd" required id="id_brand_cd">
  <option value="" selected>---------</option>
  <option value="1">モデル名 object (1)</option>
  <option value="2">モデル名 object (2)</option>
  <option value="3">モデル名 object (3)</option>
  <option value="4">モデル名 object (4)</option>
  <option value="5">モデル名 object (5)</option>
  <option value="6">モデル名 object (6)</option>
</select>

ModelChoiceField を継承する別クラスを作成し、そこで label_from_instance 関数をオーバーライドし、return obj.表示したいカラム名 とすれば表示したいカラム名が表示名が変わります。

# forms.py

class CustomModelChoiceField(forms.ModelChoiceField):
    def label_from_instance(self, obj): # label_from_instance 関数をオーバーライド
         return obj.brand_nm # 表示したいカラム名を return


class IgProductForm(forms.ModelForm):
    brand_cd = CustomModelChoiceField(queryset=IgMstBrand.objects.all()) # 上記のクラスを参照する様変更

    class Meta:
        model = IgMstProduct
        fields = ('product_nm', 'product_category', 'brand_cd', 'product_url',)
<select name="brand_cd" required id="id_brand_cd">
  <option value="" selected>---------</option>
  <option value="1">Nikon</option>
  <option value="2">Canon</option>
  <option value="3">Sony</option>
  <option value="4">Fujifilm</option>
  <option value="5">Leica</option>
  <option value="6">Olympus</option>
</select>

Django の REST framework で JSON を返す API を作る方法

Python 仮想環境内に作ったプロジェクトに API 用の独自のアプリケーションを作り、その中に View を作ります。

ここで紹介するのは単純にテーブル内のデータを全て GET で抽出してそのまま JSON 形式で返すだけのものです。POST や DELETE などは触れていません。

  1. 下準備
    • API 用 Django アプリケーションの作成
    • djangorestframework のインストール
    • urls.py の設定
    • models.py にモデルを記述
  2. シリアライザの作成
  3. ビューの作成
    • class based view の場合
    • function based view の場合
  4. 動作確認

下準備

API 用 Django アプリケーションの作成

API 用にアプリケーション「api」を作成します。

% python manage.py startapp api

settings.py の INSTALLED_APPS に追加します。

INSTALLED_APPS = [
    'django.contrib.admin',
    'django.contrib.auth',
    'django.contrib.contenttypes',
    'django.contrib.sessions',
    'django.contrib.messages',
    'django.contrib.staticfiles',

    'api.apps.ApiConfig', # 追記
]

djangorestframework のインストール

コマンド「pip install djangorestframework」を実行します。

% pip install djangorestframework
Collecting djangorestframework
  Downloading djangorestframework-3.12.4-py3-none-any.whl (957 kB)
     |████████████████████████████████| 957 kB 4.1 MB/s 
Requirement already satisfied: django>=2.2 in /Users/ユーザー名/PythonProjects/仮想環境名/lib/python3.8/site-packages (from djangorestframework) (3.2)
Requirement already satisfied: pytz in /Users/ユーザー名/PythonProjects/仮想環境名/lib/python3.8/site-packages (from django>=2.2->djangorestframework) (2021.1)
Requirement already satisfied: sqlparse>=0.2.2 in /Users/ユーザー名/PythonProjects/仮想環境名/lib/python3.8/site-packages (from django>=2.2->djangorestframework) (0.4.1)
Requirement already satisfied: asgiref<4,>=3.3.2 in /Users/ユーザー名/PythonProjects/仮想環境名/lib/python3.8/site-packages (from django>=2.2->djangorestframework) (3.3.4)
Installing collected packages: djangorestframework
Successfully installed djangorestframework-3.12.4
%

settings.py の INSTALLED_APPS に追加します。

INSTALLED_APPS = [
    'django.contrib.admin',
    'django.contrib.auth',
    'django.contrib.contenttypes',
    'django.contrib.sessions',
    'django.contrib.messages',
    'django.contrib.staticfiles',

    'api.apps.ApiConfig',
    'rest_framework', # 追記
]

urls.py の設定

アプリケーション「api」ディレクトリに url.py を作成した上で、プロジェクトレベルの url.py から参照します。

from django.contrib import admin
from django.urls import path, include # 追記

urlpatterns = [
    path('admin/', admin.site.urls),
    path('api/', include('api.urls')), # 追記
]

models.py にモデルを記述

API で使用したいモデルを models.py に記述します。

今回すでにデータベース上にテーブルを用意してあるのでコマンド「python manage.py inspectdb テーブル名」でモデル情報を抽出します。

% python manage.py inspectdb yt_analysis_07
# This is an auto-generated Django model module.
# You'll have to do the following manually to clean this up:
#   * Rearrange models' order
#   * Make sure each model has one field with primary_key=True
#   * Make sure each ForeignKey and OneToOneField has `on_delete` set to the desired behavior
#   * Remove `managed = False` lines if you wish to allow Django to create, modify, and delete the table
# Feel free to rename the models, but don't rename db_table values or field names.
from django.db import models


class YtAnalysis07(models.Model):
    channel_id = models.CharField(max_length=40, blank=True, null=True)
    channel_name = models.TextField(blank=True, null=True)
    view_count = models.BigIntegerField(blank=True, null=True)
    like_count = models.IntegerField(blank=True, null=True)
    dislike_count = models.IntegerField(blank=True, null=True)
    favorite_count = models.IntegerField(blank=True, null=True)
    comment_count = models.IntegerField(blank=True, null=True)
    video_count = models.IntegerField(blank=True, null=True)

    class Meta:
        managed = False
        db_table = 'yt_analysis_07'
% 

クラス文を models.py にコピーしますが、その際に 1 つ「primary_key=True」のフィールドを持つ必要があるそうです。

シリアライザの作成

Python のリスト・辞書形式のデータを JSON に変換するためのシリアライザを作成します。

アプリケーションフォルダ(今回は api/ )に「serializers.py」というファイルを作成します。

from rest_framework import serializers
from .models import YtAnalysis07 # モデルをインポート

class APISerializer(serializers.ModelSerializer):
    class Meta:
        model = YtAnalysis07 # 使用するモデル
        fields = '__all__' # 処理対象にするフィールド(今回は全項目)

ビューの作成

API のビューを作成します。ざっくり言うとモデルからデータを抽出し、シリアライザに渡して JSON に変換し、その JSON データをレスポンスとして返します。

class based view の場合

from rest_framework import viewsets
from .serializers import APISerializer
from .models import YtAnalysis07

class DataListView(viewsets.ModelViewSet):
    queryset = YtAnalysis07.objects.all() # モデルからデータを抽出するクエリセット
    serializer_class = APISerializer # 使用するシリアライザ

urls.py の設定は下記の様にします。

from django.urls import path
from . import views

app_name = 'api'
urlpatterns = [
    path('data-list/', views.DataListView.as_view({'get': 'list'}), name="data-list"),
]

function based view の場合

from rest_framework.decorators import api_view
from rest_framework.response import Response
from .serializers import APISerializer
from .models import YtAnalysis07

@api_view(['GET']) # GET のみに対応
def dataList(request):
    api_data = YtAnalysis07.objects.all() # モデルからデータを抽出する
    serializer = APISerializer(api_data, many=True) # シリアライザにデータを渡す
    return Response(serializer.data) シリアル可されたデータを return で返す

urls.py の設定は下記の様にします。

from django.urls import path
from . import views

app_name = 'api'
urlpatterns = [
    path('data-list/', views.dataList, name="data-list"),
]

動作確認

設定した URL をブラウザに打ち込むと下記の様な画面が表示されます。JSON データも見えます。

ブラウザで URL を叩くと上記の様な画面で表示されますが、例えばターミナルで URL を requests.get すると下記の様に JSON 形式のデータだけが返ってきます。

>>> import requests
>>> r = requests.get('http://127.0.0.1:8000/api/data-list/')
>>> r.text
'[{"channel_id":"UCLkAepWjdylmXSltofFvsYQ","channel_name":"BANGTANTV","view_count":22423409,"like_count":7325674,"dislike_count":20936,"favorite_count":0,"comment_count":381315,"video_count":9},{"channel_id":"UCE_M8A5yxnLfW0KghEeajjw","channel_name":"Apple","view_count":19044060,"like_count":600159,"dislike_count":21023,"favorite_count":0,"comment_count":0,"video_count":10},

これを Django のテンプレートから JavaScript で呼び出すなどして活用します。