【お試し】エックスサーバーVPSにDjangoプロジェクトをデプロイする方法

このようなDjango学習中の方に向けて書きました。

どうせDjangoを勉強するなら、サーバーにデプロイしてみたいですよね。

ところがデプロイは手順が多いので、最初からそれなりのアプリケーションを作ろうとすると途中で挫折してしまうことが多いです。

でもそれでは、せっかくやる気になっているのにもったいない。

「鉄は熱いうちに打て」です。

そこで本記事ではDjangoのセットアップは最低限にして、ロケットが飛んでいるページの状態でデプロイします。

サーバーも管理画面のわかりやすいエックスサーバーVPS利用です。

本来であればセキュリティの考慮やアプリの実装などもありますが、ここでは「素早く理解する」ことに全振りしているのでこれらはいったん無視の方針です。

慣れていない方でも丸一日あれば全部消化できる分量にしました。

デプロイのための事前準備

デプロイにあたって、次の手順が必要です。

ゆっくりとで大丈夫です。一つずつ進めていきましょう。

エックスサーバーVPSを契約する

今回はデプロイ先としてエックスサーバーVPS を選びました。

設定直後のDjangoプロジェクトをのせるだけなので、以下の内容で十分です。

申し込み方法の詳細は、以下の記事で解説しました。

» 参考：エックスサーバーVPS（XServer VPS）の申し込み方法

あわせて読みたい

【簡単】エックスサーバーVPS（XServer VPS）の申し込み方法 エックスサーバーVPS の申し込みをしたい方向けの記事です。 サーバーの契約、なんとなく身構えてしまいますよね。 なんとなく難しそう… 設定が大変そう… 複雑なんじゃ…

SSH接続の設定

サーバーとの通信にはSSH接続を使います。

エックスサーバーではSSH接続が簡単にできるようになっているので、手順に従えば簡単に導入できます。

以下の記事でSSH接続までの流れを解説しました。

» 参考：【エックスサーバーVPS】SSH接続する方法

あわせて読みたい

【エックスサーバーVPS】SSH接続する方法 エックスサーバーVPSでSSH接続がしたい！ このような疑問にお答えします。 サーバーとの通信にはSSH接続が必須です。 慣れてしまえば簡単なのですが、サーバーを触りた…

自分のIPアドレスを確認

エックスサーバー VPSパネル にログインすると、上の方にIPアドレスの記載があります。

このIPアドレスはこの後頻繁に使うので、控えを取っておいてください。

ログイン情報は「■重要■ VPSアカウント設定完了のお知らせ 」というタイトルのメールに記載があります。

ポートを解放しておく

最初は、サーバーのポートが閉じられているのでアクセスができません。

今回はWEBとSSH接続をしたいので、この二つのポートを解放しておきましょう。

STEP

VPSパネルにアクセス

エックスサーバーVPSパネルにアクセスします。

» 参考：エックスサーバー VPSパネル

ログイン情報は「■重要■ VPSアカウント設定完了のお知らせ 」というタイトルのメールに記載があります。

STEP

パケットフィルター設定を追加する

サイドバーから「パケットフィルター設定」を選択しましょう。

その後、「パケットフィルター設定を追加する」ボタンをクリックしてください。

STEP

WebとSSHを許可する

フィルターとしてWebを選択して、「追加する」ボタンをクリックします。

同じ要領でフィルターにSSHを追加して追加してください。

STEP

設定後の画面

最終的には、上の画像の用にSSHとWebが許可された状態になっていればOKです。

karo

これをやらないとサーバーへのログインやブラウザ表示ができないので注意です！

一般ユーザーを作成

まずはrootユーザーでログインします。

ssh root@サーバーのIPアドレス

実はrootユーザーでログインするのはセキュリティ上危険です。

そのため、サーバーで操作する用の一般ユーザーを作成します。

sudo adduser karo

ユーザー名はkaroとしましたが、別の名前に置き換えてもらって大丈夫です。

この後に色々聞かれますが、パスワードだけ設定しましょう。（その他は何も入力せずにEnterキーを押す）

# sudo adduser karo
ユーザー `karo' を追加しています...
新しいグループ `karo' (1000) を追加しています...
新しいユーザー `karo' (1000) をグループ `karo' に追加しています...
ホームディレクトリ `/home/karo' を作成しています...
`/etc/skel' からファイルをコピーしています...
新しいパスワード: 
新しいパスワードを再入力してください: 
passwd: パスワードは正しく更新されました
karo のユーザ情報を変更中
新しい値を入力してください。標準設定値を使うならリターンを押してください
	フルネーム []: 
	部屋番号 []: 
	職場電話番号 []: 
	自宅電話番号 []: 
	その他 []: 
以上で正しいですか? [Y/n] Y

最後にYを入力してEnterキーを押せば、ユーザーが作成されます。

続いて作成した一般ユーザーをsudoグループに追加します。

sudo usermod -aG sudo karo

これでkaroユーザーのままでも、コマンドの先頭にsudoをつけるだけでスーパーユーザー権限でコマンドを実行できるようになりました。

次のコマンドで、ユーザーをスーパーユーザーからkaroに変更します。

su - karo

プロンプトの先頭がkaroに変われば成功です。

root@x***-**-**-**:~# ←前の表示
karo@x***-**-**-**:~$ ←新しい表示

というわけで、これ以降はkaroユーザーでの操作となります。

本来はスーパーユーザーからログアウトしてから、一般ユーザーで入り直します。
今回は簡略化のためにsuコマンドでユーザー切り替えのみ行いました。

Nginxのセットアップ

WebサーバーとしてNginxを使います。

設定の流れは以下の通りです。

こちらも一つずつ慎重に進めていきましょう。

Nginxのインストール

まずはNginxをインストールします。

sudo apt update && sudo apt install -y nginx

インストールが完了したら、Nginxの起動です。

systemctl start nginx

以下のコマンドでNginxが動いているか確認します。

systemctl status nginx

次のようなメッセージが返ってくるはずです。

$ systemctl status nginx
● nginx.service - A high performance web server and a reverse proxy server
   Active: active (running) since Sun 2024-10-20 08:10:02 JST; 1h 58min ago
   ~~ 中略 ~~
   Main PID: 90547 (nginx)

このようにactive(running)と表示されていて、かつMain PIDがあればNginxは正常に動いています。

視覚的に確認したい場合には、最初に確認しておいたサーバーのIPアドレスをブラウザに入力しましょう。

このような画面が表示されていれば、Nginxは動いています。

Nginxの設定ファイルを作成・有効化

今回デプロイするアプリ用に、Nginx設定ファイルを作成します。

sudo vi /etc/nginx/conf.d/my_project.conf

内容は以下としてください。

server {
    listen 80;
    server_name VPSサーバーのIPアドレスを入力;

    location / {
        proxy_pass http://unix:/run/sock/my_project.sock;
        proxy_set_header Host $host;
        proxy_set_header X-Real-IP $remote_addr;
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
        proxy_set_header X-Forwarded-Proto $scheme;
    }

    location /static/ {
        alias /var/www/my_project/static/;
    }
}

ハイライトしたserver_nameだけ、契約したVPSのIPアドレスに置き換えて下さい。

Gunicornのセットアップ

アプリケーションサーバーとしてGunicornを使います。

GunicornはPythonの世界でインストールするので、Linux上はインストールコマンドの実行はありません。

つまり、設定ファイルの作成と有効化だけを行います。

Gunicornサービスファイルの作成

Gunicornの自動管理を行うため、サービスファイルを作成します。

sudo vi /etc/systemd/system/gunicorn.service

内容は以下としましょう。

[Unit]
Description=gunicorn daemon
After=network.target

[Service]
User=www-data
Group=www-data
WorkingDirectory=/var/www/my_project
ExecStart=/var/www/my_project/venv/bin/gunicorn --workers 7 --bind unix:/run/sock/my_project.sock core.wsgi:application

[Install]
WantedBy=multi-user.target

保存したら、以下のコマンドで有効化して下さい。

sudo systemctl enable gunicorn

コマンド実行後に、以下のメッセージが表示されたらOKです。

$ sudo systemctl enable gunicorn
Created symlink /etc/systemd/system/multi-user.target.wants/gunicorn.service → /etc/systemd/system/gunicorn.service.

余談ですが、UserとGroupとして設定したwww-dataは、Nginxを動かしているユーザーです。

Djangoアプリにアクセスがあると、リクエスト情報をNginxとGunicornがバケツリレーします。

なので、このバケツに対する権限を同じにしておくことで権限が原因となるエラーが起きにくくする狙いがあります。

Gunicornの詳細は、以下の記事で解説しました。
» 参考：GunicornでDjangoプロジェクトをデプロイする方法

Djangoアプリケーションの準備

サーバーでDjangoアプリが動くよう、準備を行なっていきます。

実務的にはGitを使ってコードを取り込むことが多いですが、今回は単純化のためにSFTPでソースコードをアップロードしました。

Djangoソースコードをアップロード

あらかじめローカル側でDjangoプロジェクトを作成して、ロケットが飛ぶ画面が表示されるようにして下さい。

requirements.txtには以下のライブラリが入っていれば大丈夫です。

django
gunicorn

SFTPクライアントはなんでもOKですが、僕はFileZillaを使いました。

左はローカルPC、右はサーバーです。

先ほどNginxとGunicornの設定ファイルでDjangoプロジェクトのありかを/var/www/にしたので、ここでも/var/www/配下にプロジェクトファイルを配置します。

さらに、この/var/www/ディレクトリの権限を変更しておきます。

sudo chown -R www-data:www-data /var/www/my_project

このプロジェクトディレクトリの所有者とグループをwww-dataに変更しました。

必要なライブラリのインストール

ここでは仮想環境を作成して、必要なライブラリをインストールします。

最初に必要なパッケージをインストールしましょう。

sudo apt update
sudo apt install -y python3 python3-pip python3-venv build-essential libssl-dev libffi-dev python3-dev

続いてソースコードをアップロードした/var/www/に移動して、仮想環境を立ち上げます。

cd /var/www/my_project
sudo python3 -m venv venv
source venv/bin/activate

最後に必要なパッケージをインストールします。

プロジェクトの権限をwww-dataにしたので、実行にあたってはwww-data権限で実行しましょう。

sudo -u www-data pip install -r requirements.txt

Djangoの設定ファイルを編集

デプロイ用にDjangoのsettings.pyを編集していきましょう。

設定ファイルのパスがcore/settings.pyだった場合で解説します。

vi core/settings.py

以下の内容を書き換えてください。

ALLOWED_HOSTS = ['サーバーのIPアドレスを入力する']

データベースのマイグレーション

デプロイ前には、データベースのマイグレーションを行います。

python manage.py migrate

サーバー上でアプリを動かす

いよいよサーバー上でDjangoアプリを動かしましょう。

特にUNIXソケットの設定は詰まりがちなので、ゆっくり進めて下さい。

UNIXソケットのディレクトリ作成と権限設定

UNIXソケットのファイル保存先を作成します。

sudo mkdir /run/sock/
sudo chown www-data:www-data /run/sock/
sudo chmod 750 /run/sock/

このUNIXソケットを扱うのはNginxを操作するwww-dataユーザーです。

そのため、www-dataユーザーに権限を持たせることでアプリが問題なく動くようにしています。

Nginx, Gunicornの設定の反映

これまで編集してきた内容を反映させるため、GunicornとNginxを再起動します。

sudo systemctl restart nginx
sudo systemctl restart gunicorn

ブラウザ上で表示を確認

IPアドレスをブラウザに入力してアクセスしてみましょう。

今回はロケットを飛ばすところでデプロイしたので、以下の画面が表示されれば完了です。

「あれ？動かない…」と思った時にすること

初めてのサーバーへのデプロイでは、うまく動かないことは日常茶飯事です。

ここでは原因究明のための方法をお伝えします。

Nginxの設定ファイルが正しいか確認

Nginxには設定ファイルが正しいか確かめるコマンドが用意されています。

sudo nginx -t

問題があれば修正して、再起動することで設定を反映させましょう。

sudo systemctl restart nginx

ログを確認

動かない場合にすべきはログの確認です。

以下はNginxのログを確認するコマンドになります。

sudo tail -f /var/log/nginx/error.log

Gunicornは以下のコマンドです。

sudo journalctl -u gunicorn

まとめ

エックスサーバーVPSを使ったデプロイの流れを説明してきましたが、ブラウザの表示までできましたでしょうか？

流れとしては以下でした。

本記事は大体のデプロイまでの流れをご紹介するものでしたが、より本格的なデプロイのためには他にも考慮事項があります。

これらの設定については、後日記事として公開する予定なのでもう少しお待ちください。

» 参考：DjangoプロジェクトをSSL化するための知識（準備中）