XserverVPSでDjangoアプリをデプロイ/公開してみたので、手順を解説します。

どうせなら作ったものは公開したいですよね。そこで今回はXserverVPSを使ってローカルで作成してDjangoアプリケーションを公開するということをやっていきます。

XserverVPSでどうやって公開すればいいのか流れが知りたいっていう方は参考にしてみてください。

XserverVPSでDjangoアプリ公開していこう。

XserverVPSと契約する

Xserver VPSとまずは契約してサーバーを使える状態にしておきます。申し込み手順に関しては以下の記事でやっているので、よかったら参考にしてみてください。

ちなみに今回はメモリ2GBのプランでやっていきます。

【手順解説】エックスサーバーVPSの申し込み方法と始め方を紹介します。

2022.12.21

エックスサーバーVPS使ってみたいんだけどどう始めたらいいんだろう？ そんな疑問を解消するためにこの記事ではエックスサーバーVPSの申し込み方法と始め方を書いていきます。 サーバーの作成までやるので、順番通りにやれば自分のサーバーが立っている状態になります。 記事の内容 エックスサーバーVPSの申し...

デプロイするDjangoアプリ

今回XserverVPSにデプロイするアプリは以下。TODOアプリです。

動かしている環境としては以下です。

この環境をXserverVPSでも構築して公開するっていうことをやっていきますよ。

XserverVPSでサーバーを用意する

XserverVPSでOSがUbuntuのサーバーを作成します。もし既にサーバーを立てているなら、OSの再インストールをしてもいいでしょう。

今回はOSがUbuntu22.04、メモリ2GBのプランでやっていきます。

SSH接続する

XserverVPSにはコンソールもついていますが、SSH接続して作業した方がやりやすいと思います。以下の記事でSSH接続の方法を書いているので、よかったら参考にしてみてください。

エックスサーバーVPSにSSH接続する方法と設定を紹介します。

2022.11.27

エックスサーバーVPSにSSH接続したい・・・どうやるんだろう？ 今回はそんな悩みを解決するために、エックスサーバーVPSでSSH接続する方法を書いていきます。立てたサーバーにSSH接続したかったら参考にしていただけると幸いです。 記事の内容 エックスサーバーVPSでのSSH Keyの登録方法 プラ...

パッケージの更新

パッケージの更新は諸々インストールする前にやっておきます。

$ apt update
$ apt upgrade

ここからアプリケーションに必要なものをインストールしていきますよ。

Nginxをインストール/設定をする

WebサーバーにはNginxを使いたいのでインストールします。

$ apt install -y nginx

Nginxのステータスを確認して起動していなかったら起動しましょう。

$ systemctl status nginx
● nginx.service - A high performance web server and a reverse proxy server
     Loaded: loaded (/lib/systemd/system/nginx.service; enabled; vendor preset:>
     Active: active (running) since Tue 2023-01-03 15:29:15 JST; 9s ago

// 起動していなかったら起動する
$ systemctl start nginx

ブラウザにIPアドレスを入力して確認してみると初期画面が表示されましたね。

表示されなかったらポートを確認しよう

XserverVPSではデフォルトで80番ポートは閉じてくれているので、閉じていたらポートの解放をしましょう。

Nginxの設定ファイルを作成する

Nginxの設定ファイルを作成します。

$ vim /etc/nginx/conf.d/app_nginx.conf

upstream django {
    ip_hash;
    server 127.0.0.1:8001;
}

server {
    listen      80;
    server_name XserverのIPアドレス;
    charset     utf-8;

    location /static {
        alias /static;
    }

    location / {
        uwsgi_pass  django;
        include     /etc/nginx/uwsgi_params;
    }
}

server_tokens off;

server_name IPアドレスの部分は自分のxserver vpsのIPアドレスにしておきましょう。

MySQLをインストール/設定をする

データベースにはMySQLを使うのでインストールします。statusを確認して起動していたらOKです。

$ apt install mysql-server
$ service mysql status
● mysql.service - MySQL Community Server
     Loaded: loaded (/lib/systemd/system/mysql.service; enabled; vendor preset:>
     Active: active (running) since Tue 2023-01-03 15:38:33 JST; 11s ago

// 起動していなかったら起動
$ service mysql start

MySQLのrootユーザーのパスワードを変更する

初期のrootパスワードは空欄なので、パスワードを設定しておきます。

# 初回rootパスワードは空欄です。
$ sudo mysql -u root -p

mysql> ALTER USER 'root'@'localhost' IDENTIFIED WITH mysql_native_password BY '<パスワード>';
mysql> FLUSH PRIVILEGES;

ユーザーを作成する

実際にDjangoアプリケーションから接続するMySQLユーザーも作成しておきます。

mysql> CREATE USER 'ユーザー名'@'localhost' IDENTIFIED BY 'パスワード';
mysql> GRANT ALL PRIVILEGES ON * . * TO 'ユーザー名'@'localhost';
mysql> FLUSH PRIVILEGES;

データベースを作成する

最後にDjangoアプリケーションで使うデータベースも作っておきます。

$ create database 〇〇;

ここで作成したデータベースにDjangoアプリケーションから接続していきますよ。

Pythonをインストールする

Pythonも使うのでインストールしておきましょう。venvも入れておきます。

$ apt install python3
$ apt install -y build-essential libssl-dev libffi-dev python3-dev
$ apt-get install python3-venv
$ apt install python-pip

DjangoアプリをXserverVPSにアップロードする

ローカルで作成したDjangoアプリケーションをXserverVPSにアップロードします。アップロードにはFTPソフトを使って行うことにします。

Cyberduckで自分はアップロードしますね。アップロードするディレクトリは今回/var/www/htmlとしておきます。

アプリケーションのセットアップを行う

アップロードしたDjangoアプリケーションの設定を諸々行います。

モジュールのインストール

アプリケーションに必要なモジュールをインストールします。

$ cd /var/www/html/django-todo

# 仮想環境を作成
$ python3 -m venv myvenv

# 仮想環境を有効化
$ source myvenv/bin/activate

$ pip install -r requirements.txt

データベースの接続設定

さっき作成したデータベースに接続できるようにsettings.pyを編集します。

$ vim app/settings.py

# IPアドレスを追加
ALLOWED_HOSTS = ['サーバーのIPアドレスを追加']

DATABASES = {
    'default': {
        'ENGINE': 'django.db.backends.mysql',
        'NAME': '作成したデータベース名',
        'USER': '作成したユーザー名',
        'PASSWORD': '設定したパスワード',
        'HOST': 'localhost',
        'PORT': '3306',
    }
}

migrate実行

データベース接続設定を編集したらmigrateしてテーブルを生成しましょう。

$ python manage.py migrate

Operations to perform:
Apply all migrations: admin, auth, contenttypes, sessions, todo
Running migrations:
Applying contenttypes.0001_initial... OK
Applying auth.0001_initial... OK
Applying admin.0001_initial... OK
Applying admin.0002_logentry_remove_auto_add... OK
Applying admin.0003_logentry_add_action_flag_choices... OK
Applying contenttypes.0002_remove_content_type_name... OK
Applying auth.0002_alter_permission_name_max_length... OK
Applying auth.0003_alter_user_email_max_length... OK
Applying auth.0004_alter_user_username_opts... OK
Applying auth.0005_alter_user_last_login_null... OK
Applying auth.0006_require_contenttypes_0002... OK
Applying auth.0007_alter_validators_add_error_messages... OK
Applying auth.0008_alter_user_username_max_length... OK
Applying auth.0009_alter_user_last_name_max_length... OK
Applying auth.0010_alter_group_name_max_length... OK
Applying auth.0011_update_proxy_permissions... OK
Applying auth.0012_alter_user_first_name_max_length... OK
Applying sessions.0001_initial... OK
Applying todo.0001_initial... OK

もし以下のようなエラーが出た場合はcryptographyっていうものを入れると解消できました。

RuntimeError: 'cryptography' package is required for sha256_password or caching_sha2_password auth methods

$ pip install cryptography

uWSGI起動して確認する

アプリケーションはuWSGIで動かしているので、uWSGIを起動します。Nginxも諸々設定したので再起動しておきます。

 $ uwsgi --socket :8001 --module app.wsgi 

$ systemctl restart nginx

ブラウザから確認する

ブラウザにIPアドレスを入力して確認すると無事動いてくれましたね。

まとめ

XserverVPSでDjangoアプリケーションを動かすということをやったけど、無事動きましたね。今回やった流れとしては以下です。

もちろんfirewallやユーザーなど諸々気にしないといけない点はたくさんあるけど、とりあえず動かすことができるぞっていうイメージはついたかなと思います。

VPSはクラウド、例えばAWSのEC2使って公開するっていうより簡単だしコストもそれほどかかりません。公開してみたかったらXserver VPS使ってみるといいですよ。