Django + Nginx + uWSGIな環境を構築する!「Hello, World」公開まで。

2020年7月24日

Python
Django

DjangoとNginxでブログを作成してみた

どうも、テック備忘LOGのYuki(@tech_bibo_log)です!!

Python3を触りたい、Nginxを使ってみたい...! そんなことを思い立ってから時が流れ、 ついに先日ConoHaでVPSを借りたので、 ブログを作成してURL:xxx.xxx.xxx.xxx(IP)/blogでアクセスして「Hello, World」を表示させるところまでの手順を議事録として公開します。

▽▽▽ サーバーを用意した時のお話し ▽▽▽

前提:
1.python3が使用できる環境
2.pipが使用できる環境(pipを使用しながらの説明になるため)

[ 目次 (開く) ]

Djangoで「Hello World」を公開するまでの手順

用意する環境:
1. ConoHaのVPS(CentOS8)
2. python 3.6.8
3. pip 20.0.2 (from /usr/local/lib/python3.6/site-packages/pip (python 3.6))

補足:
分かりやすいように、基本コマンドを叩く際はフルパスで記載します。
※一部を除く

Djangoをインストール

1.Djangoをインストールしよう

現在: /(ルート)

# pip install django

Nginxをインストール

0.yumでNginxをインストールしよう

現在: /(ルート)
※CentOS8からはyumではなく、dnfを使用することが推奨されています。

1.Nginxリポジトリを追加しよう(その1)

現在: /(ルート)

# vi /etc/yum.repos.d/nginx.repo


2.Nginxリポジトリを追加しよう(その2)

現在: /(ルート)

/etc/yum.repos.d/nginx.repo
[nginx-stable]
name=nginx stable repo
baseurl=http://nginx.org/packages/centos/$releasever/$basearch/
gpgcheck=1
enabled=1
gpgkey=https://nginx.org/keys/nginx_signing.key

[nginx-mainline]
name=nginx mainline repo
baseurl=http://nginx.org/packages/mainline/centos/$releasever/$basearch/
gpgcheck=1
enabled=0
gpgkey=https://nginx.org/keys/nginx_signing.key


3.パッケージの情報を確認しよう

現在: /(ルート)

# yum info nginx


4.Nginxをインストールしよう

現在: /(ルート)

# yum --disablerepo=AppStream install -y nginx

uWSGIをインストール

0.「uWSGI」をインストールしよう(その1)

uWSGIとはPythonでWebサービスを動かすためのAPPサーバの一種。
Nginx(Webサーバー)でpythonのWebアプリケーションを扱う時によく使われる。


1.「uWSGI」をインストールしよう(その2)

現在: /(ルート)
uwsgiのインストール時にエラーが出る場合があります。 私の場合は以下の順番で必要なものをインストールしておくことで、[uWsgi]のインストールを行うことが出来ました。

# yum install python3-devel
# yum groupinstall "Development Tools"
# pip install uwsgi


2.ファイヤーウォールにポートやサービスを追加・反映しよう

現在: /(ルート)

# firewall-cmd --permanent --add-port=8080/tcp
# firewall-cmd --permanent --add-service=http
# firewall-cmd --permanent --add-service=https --zone=public
# firewall-cmd --reload ←反映


ブログを作成

0.プロジェクトを作成しよう

それでは早速Djangoプロジェクトを作成していきましょう。


1.プロジェクトを作成するdirを用意しよう

現在: /(ルート)

# mkdir /opt/django


2.プロジェクトを作成しよう

現在: /opt/django

# django-admin startproject プロジェクト名(以後、「websites」) .

※最後のドットを忘れないように
※忘れるとファイル構成が深くなってしまう↓↓
誤: /opt/django/websites/websites/
正: /opt/django/websites/


3.アプリを作成しよう

現在: /opt/django

# python3 manage.py startapp アプリ名(以後、「blog」)
※manage.pyはプロジェクト作成時に自動生成された/opt/django/配下のプログラムの事


4.この時点でのプロジェクト全体のファイル構成を確認しよう

ここまでの作業で生成された/opt/django/配下のdir構成はこのようになっているはずです。
treeコマンドを使用して確認してみましょう!

/opt/django/配下
# tree ./
/opt/django/
├── blog
│   ├── admin.py
│   ├── apps.py
│   ├── init.py
│   ├── migrations
│   │   └── init.py
│   ├── models.py
│   ├── tests.py
│   └── views.py
├── manage.py
└── websites
├── asgi.py
├── init.py
├── pycache
│   ├── init.cpython-36.pyc
│   └── settings.cpython-36.pyc
├── settings.py
├── urls.py
└── wsgi.py


5.アプリケーションを登録しよう

現在: /opt/django/websites
Djangoのプロジェクトにblogアプリケーションを認識させましょう。

/django/websites/setting.py
INSTALLED_APPS = [
'django.contrib.admin',
'django.contrib.auth',
'django.contrib.contenttypes',
'django.contrib.sessions',
'django.contrib.messages',
'django.contrib.staticfiles',
'blog', ← 作成したアプリケーション名を追記
]


6.ホストを登録しよう

現在: /opt/django/websites
※VPS内のブラウザ(localhost:8080でのアクセス)ではなく、外部のPCからVPSサーバーのグローバルIPを指定してDjangoのアプリケーションの起動を確認するため

/opt/django/websites/setting.py
ALLOWED_HOSTS = ['xxx.xxx.xxx.xxx', 'その他']


7.Nginx周りを設定しよう

Nginxのデフォルト設定ファイルをコピーして新規に作成します。
※ファイル名は任意です。

# cp /etc/nginx/conf.d/default.conf /etc/nginx/conf.d/blog.conf
# mv /etc/nginx/conf.d/default.conf /etc/nginx/conf.d/default.conf_
# view /etc/nginx/conf.d/blog.conf


次に先程コピーした設定ファイルを次のように編集していきます。

/etc/nginx/conf.d/blog.conf
server {
    listen       80;
    server_name  xxx.xxx.xxx.xxx(VPSのグローバルIPやドメイン名);
    charset utf-8;
    client_max_body_size 75M;
    
    location / {
        try_files $uri @blog;
    }
    
    location @blog {
        include /opt/django/websites/uwsgi_params;
        uwsgi_pass unix:/opt/django/blog/uwsgi.sock;
    }
    
    location /static {
        alias /opt/django/static;
    }
    
    error_log /var/log/nginx/error.log debug;
    error_page   500 502 503 504  /50x.html;
    
    location = /50x.html {
        root   /usr/share/nginx/html;
    }


8.ルーティング設定しよう

(1)自動生成されたurls.pyをview(vi)コマンドでファイルを開く

# view /opt/django/websites/urls.py

/websites/urls.pyを下記の通りに変更

/opt/django/websites/urls.py
from django.contrib import admin
from django.urls import include, path

urlpatterns = [ path('admin/', admin.site.urls), path('', include('blog.urls')), ]



(2)/blog/urls.pyを作成する

# touch /opt/django/blog/urls.py ← 自動生成されないので手動で作成
# view /opt/django/blog/urls.py

作成した/blog/urls.pyを下記の通りに変更する

/opt/django/blog/urls.py
from django.urls import path
from . import views

urlpatterns = [ path('', views.hello, name='hello'), ]



9.views.pyを編集しよう!

URL:xxx.xxx.xxx.xxx/blogへのアクセスで表示するviews.pyを作成していきます。

# view /opt/django/blog/views.py

blog/views.pyを次のように編集してください。

/opt/django/blog/views.py
from django.http import HttpResponse
#HTTPリクエストに「Hello, World」だけ返している
def hello(request):
    return HttpResponse("Hello, World.")
    


10.「uWSGI」関連の設定しよう

websites/uwsgi.iniを作成します。

# touch /opt/django/websites/uwsgi.ini
# view /opt/django/websites/uwsgi.ini

作成したwebsites/uwsgi.iniを下記の通り修正しましょう。

/opt/django/websites/uwsgi.ini
[uwsgi]
chdir = /opt/django/
module = websites.wsgi
master = true
socket=/opt/django/blog/uwsgi.sock
chmod-socket = 666
vacuum = true


11.組み込みの開発サーバーで起動を確認しよう

まずは、Djangoの開発サーバーで確認しましょう。

# python3 /opt/django/manage.py runserver

こんなのが出力されて...↓↓
Watching for file changes with StatReloader
Performing system checks...
System check identified no issues (0 silenced).
January 31, 2020 - 04:36:32
Django version 3.0.2, using settings 'websites.settings'
Starting development server at http://127.0.0.1:8000/
Quit the server with CONTROL-C.

ターミナルからVPS内のブラウザは立ち上げられない(?)ので、curlでレスポンスを確認
# curl -L http://127.0.0.1:8000/blog

※views.py内で指定した文字列が表示されてる ↓↓↓
Hello, World.



12.uWSGIにて直接に起動を確認しよう

# uwsgi --http :8000 --module websites.wsgi

こんなのが出力されて...↓↓
Watching for file changes with StatReloader
Performing system checks...
System check identified no issues (0 silenced).
January 31, 2020 - 04:36:32
Django version 3.0.2, using settings 'websites.settings'
Starting development server at http://127.0.0.1:8000/
Quit the server with CONTROL-C.

ターミナルからVPS内のブラウザは立ち上げられない(?)ので、curlでレスポンスを確認
# curl -L http://127.0.0.1:8000/blog

※views.py内で指定した文字列が表示されてる ↓↓↓
Hello, World.



13.最後に外部からアクセス! Nginx越しにuWSGI起動を確認しよう

現在: /opt/django
まずは、WebブラウザでVPSのグローバルIP(xxx.xxx.xxx.xxx)にアクセスしてNginxの起動を確認しましょう。

# systemctl restart nginx ← 設定の変更を反映させる

「Welcome to nginx!」が確認出来たら...次へ
エラーで起動を確認できない場合は、Nginx周りの設定を見直そう。 firewallの設定周りとかも。

# cd ./websites
# uwsgi --ini uwsgi.ini & ← 作成したuwsgi.iniを使って起動。
※最後尾に'&(アンド)'をつけることで、ctrl+cで抜けた後もプロセスを実行し続けることができます。

下記はメモ
# killall -9 uwsgi ← uwsgiのプロセスを強制終了

PCのWebブラウザでxxx.xxx.xxx.xxx/blogにアクセスすると
※views.py内で指定した文字列が表示されてる ↓↓↓
Hello, World.



14.管理画面を表示しよう

現在: /opt/django/websites

管理画面を表示するためにwebsites/settings.pyを編集していきましょう。

# view /opt/django/websites/settings.py 

websites/settings.pyを下記の通り設定。

/opt/django/websites/settings.py
STATIC_URL = '/static/'
STATICFILES_DIRS=(
    os.path.join(BASE_DIR, "static/"),
)
STATIC_ROOT = os.path.join(BASE_DIR, 'static')


(1)管理者ユーザーを作成するために、migrateコマンドを実行
# python3 manage.py migrate


(2)対話形式でユーザーを作成
# python3 manage.py createsuperuser


(3)静的ファイルを集約するディレクトリを準備
# mkdir /opt/django/static


(4)集約コマンドを実行
現在: /opt/django
# python3 manage.py collectstatic
↓このようなメッセージが出力される
130 static files copied to '/opt/django/static'.


以上です!
これで管理画面を表示する準備が整いました。


さいごに

完成!!以上で、すべての作業が終了です。

ちなみに、「Hello, World」までの流れは以下の通り ↓↓↓
クライアント → Nginx(Webサーバー) → socket通信(?) → uWSGI(APPサーバー)

NginxとuWSGI間の通信に関して、まだよく理解できていない。

uWSGIとかDjangoとか初めてであまり詳しくないですが、この手順でHello Worldまでは完成です。

最後に当ブログではブログやWebシステムを運営する際に通るドメインの設定や、https化を行う方法も紹介しています。

▽▽▽ 【ConoHaVPS × お名前.com】でドメインの設定をした時のお話し ▽▽▽

2020/5/14

取得したドメインでブログを公開する方法【ConoHaVPS × お名前.com】



▽▽▽ Let's EncryptでSSL証明書を取得した時のお話し ▽▽▽

2020/5/14

Let's EncryptでNginx + Djangoを使ったブログのSSL証明書を取得した話