django環境をVPSにデプロイ

PROGRAMMING

vultrにて、 OS:Ubuntuを使用し、VPSを開設します。

ログインを済ませたら、Product/ Instanceで、Deploy new serverを選択

Cloud Comput, Tokyo, OS選択(今回はUbuntu),料金選択(今回は5ドル/月)

サーバーが立ち上げに成功し、ステータスがRunningになったらOKです。クリックしてIPアドレス、ユーザー名、passwordを確認しましょう!

<ターミナルでの操作>

(任意のディレクトリ)

ssh ユーザー名@IPアドレス

ここでのユーザー名とは、初期では、rootになります。password:入力が求められます。コピペしてください。(表示されない)

ーセキュリティ対策ー

最低限必要な対策を進めていきます。まず、新しくユーザーを作って、管理者権限を与え、新しく作ったユーザーで操作をしていきます。

また同時にrootユーザーの検出も行います。なぜ検出をするかというと、rootユーザーは全権限を持っているユーザーなので、ログインされてしまうと、悪用されてしまうリスクがあるためです。

passwd

でパスワードの変更ができます。

adduser ユーザー名

新規のユーザーを作成できます。ここでpasswordの入力が求められますので設定してください(結構、強固なものでないと弾かれます)

追加情報を求められますが、空でenter押して、最後[y]を押してenter

画像のように進めていただければ、新規ユーザーの作成は完了です。

次に、今作成したユーザーに管理者権限を与えていきます。コマンドは↓

usermod -aG sudo ユーザー名(今作った)

上のコマンドでは、ユーザー名で指定したユーザーにsudo という権限を与えています。

rootユーザーのログインを禁止していきます。sshのconfigファイルをいじっていく必要があります。

vim /etc/ssh/sshd_config

vimとは、ubuntuに入っているテキストエディタのこと。vimはマウス操作ができませんので、全てキーボードでいじっていく必要があります。よって少し初めはとっつきにくいテキストエディタとなっています。

操作コマンドに関しては以下を参照してください。

https://qiita.com/one-a/items/a4e1d5a736d8408fd089

qiita vim 操作
noに変更してあげる

少し下の方へいくとPermitRootLogin yesとあるので、インサートモードにして、noと変更してあげてください。完了したら、保存して終了してください(esqキー →  :wq と入力)

実はvimはこれだけでは変更がされないので、変更を反映させるために以下のコマンドを実行します。

systemctl reload sshd

これで、リロードされ、rootユーザーでのログインができなくなりました。それでは、一度『logout』とコマンドをうってrootユーザーでのログイン状態を解除したのち、新しく作ったユーザーでログインしていきます。

ssh ユーザー名@IPアドレス

firewallの設定を行います。外部からのアクセスをブロックする機能です。デフォルトではoffになっています。

注意しないといけないのが、何も設定せずにfirewallをONにしてしまうと全アクセスを拒絶してしまうため、何もできなくなってしまいます。

ssh通信の許可を行います。ufw がfirewallのコマンドになります。

sudo ufw allow ssh
passを入れると、ssh のルールが更新されました。

firewallの実行を行います。その後、状況を見てみます。

sudo ufw enable   #実行コマンド 
sudo ufw status   #状態確認
実行コマンド後、今してるssh通信は大丈夫か?と確認される

これにて、VPSの初期設定は終了です。

Git、GitHub

『ローカル環境』で作成したコードを全世界に公開するために、『リモート環境』に転送をしていきます。

それを行うために、gitとgithubを使用します。gitとは、ある時点でのコードを保存する技術です。RPGゲームでのセーブ機能とイメージしていただければいいかと思います。githubはgitをWeb上で扱えるサービスで、gitとは異なります。複数のローカル環境のgit(セーブデータ)を行ったり来たりさせるHubの機能を担うサービスです。

もともと、サーバー(今回で言うならばVPS:Ubuntu)にログインして、コードを書いていけばなんの問題もないですが、通常はローカル環境で開発を行います。

それは、Web開発というのは決して1人で行うものではないからです。複数人が同時にサーバーにアクセスし、同時にコードをいじってしまったらゴチャゴチャしてしまうのは目に見えますよね?

そこで、各人がローカル環境で開発を行い、後から合わせるという形をとります。各人の開発環境のズレ(言語やフレームのバージョンの差etc.)をなくすのがgithubのもともとの役割だったりします。(バージョン管理ツール)。

次に、gitの主要コマンドを見ていきましょう。別途git,githubに関して詳しく記事を書いていくつもりですので、めちゃくちゃざっくりになります。今回は、以下のコードや画像を見てイメージしていただけたらなと思います。

ローカル→リモートの場合

  • git add : ステージングにコードを追加
  • git commit : レポジトリにコードを追加
  • git push : ローカルから、リモートへコードを移す

リモート→ローカルの場合

  • git clone : リモート→ローカル
主要コマンドの概念

では早速、githubで作業をしていきましょう。まずはgithubにアクセスして、アカウント作成、ログインを行ってください。

こんな画面になればOKです。

画面右上の『+ボタン』から『new repository』を選択後、repository name(プッシュするプロジェクト名と揃えるのが一般)を指定して『create repository』を押します。他のものはオプション設定ですのでいじらなくても大丈夫です。

New reopsitoryの画面

遷移した画面にてgithubがプッシュ(ローカル→リモート)のやり方を教えてくれていますので、この通りターミナルでコマンドを入力していきます。

githubにやり方が書いてある。

まず、gitがインストールされていない場合は

sudo apt-get install git

次に、プッシュしたいプロジェクトにcdコマンドでディレクトリを合わせます。その後以下のコマンドを実行します。

  • git init #(initialize)空のステージングを作る
  • git add . # 上のステージングにコード全て(.)を追加
  • git commit -m “コメント” #レポジトリにコードを追加

これにて”ローカル環境での”レポジトリの作成ができました。これを先ほど作成したGitHubのレポジトリとつなげていきます(プッシュ)

  • git remote add origin URL #繋ぎ込み
  • git push origin master #masterブランチにプッシュ

URLはそれぞれGithubを参照してください(1つ上の画像の部分を自分のページで確認する)

VPSにgitをクローンする

vultrのVPSにログイン後、lsコマンドで何も入っていないことを確認します。

ssh ユーザー名@IPアドレス
ls
何もファイルがない

githubのレポジトリ画面にて右側に緑色のボタン『Clone or download』があるのでそこからURLをコピーしておきます。

ターミナルで、以下のコマンドを実行(もちろん、VPSにログインした状態で)

git clone URL
lsコマンドでファイルが入っていることを確認できる

『ローカル環境にあるコード→GitHubにプッシュ→GitHubからVPSにプル』という一連の流れが完了し、コマンドの確認もできました。

deployをする

(VPSにログインした状態で作業を初めてください)

ssh ユーザー名@IPアドレス

1.初期設定

1-1. パッケージマネージャーの更新
ubuntuのパッケージマネージャーの更新をします。

sudo apt update

1-2. pip、PostgreSQL、Nginxのインストール
デプロイに必要なソフトをまとめてインストールします。

sudo apt install python3-pip python3-dev libpq-dev postgresql postgresql-contrib nginx curl
  • pip=Pythonのパッケージマネージャー
  • PostgreSQL=データベース(djangoのsqlite3は本番環境に向いていない)
  • Nginx=Webサーバーのこと

※Do you want to continue? [Y/n] 出たら、 y としましょう

2. PostgreSQLの設定

2-1. データベースへのログイン
以下のコマンドで、PostgreSQLにログインします。

sudo -u postgres psql

これで、データベースの中をいじっていくことができます。

2-2. データベーステーブルの作成
データベーステーブルを作成します。『Excelでファイル作成』のイメージです。(赤文字はデータベース名で変更可能ですが、他の設定でも同じ名前を使っていく必要があります。)

CREATE DATABASE myproject ;

2-3. ユーザーの作成
データベース内でユーザーを作成します。

CREATE USER myprojectuser WITH PASSWORD 'password';

2-4. データベースの初期設定
データベースの初期設定を進めていきます。(文字コードなどの設定で特に注意する点はありません。ユーザー名だけ気をつけて、コピペでお願いします。)

ALTER ROLE myprojectuser SET client_encoding TO 'utf8';

ALTER ROLE myprojectuser SET default_transaction_isolation TO 'read committed';

ALTER ROLE myprojectuser SET timezone TO 'UTC';

2-5. データベースへの権限の付与
データベースに権限を与えていきます。

GRANT ALL PRIVILEGES ON DATABASE myproject TO myprojectuser ;

2-6. データベースから抜ける
これでデータベースの設定は完了ですので、以下のコマンドでデータベースから抜けます。

\q

3. 仮想環境の構築

本番環境では仮想環境が必ず必要になります。ここでは、virtualenvを使っていきます。

3-1. 仮想環境のインストール
まずは仮想環境を実行するために必要なファイルをインストールします。

sudo -H pip3 install --upgrade pip

sudo -H pip3 install virtualenv

3-2. 開発環境の作成と起動
仮想環境の作成と起動を進めていきます。開発環境を作っていく場所は”manage.py”ファイルが入っているディレクトリ(BASE_DIR)です。cdでディレクトリを変更しておいてください(例:fumi@vultr:~/todoproject$)

virtualenv todoenv

source todoenv/bin/activate

3-3. Djangoとgunicornのインストール
仮想環境内でdjangoとgunicornをインストールしていきます。

pip install django gunicorn psycopg2-binary

4. Djangoプロジェクトの設定

4-1. settings.pyファイルの設定
settings.pyファイルの設定を進めていきます。

vim ~/todoproject/config/settings.py

以下、settings.pyファイル内の設定変更点です。該当箇所を探して、書き換えてください。vimの操作に関してはこちら。(赤文字:自分の設定に置き換えてください、先ほど設定したDBの名前、ユーザー名、パスワード)

DEBUG = FALSE;
ALLOWED_HOSTS = ['VPSのIP', ‘localhost’’]

DATABASES = {
    'default': {
          'ENGINE': 'django.db.backends.postgresql_psycopg2',
          'NAME': ' myproject ',
          'USER': ' myprojectuser ',
          'PASSWORD': ' password ',
          'HOST': 'localhost',
           'PORT': '',
      }
}

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

※DATABASESの書き換え時に、バックスペースで全て消してもいいですが、normalモードで『d+d』二回連打で1行削除できます。

4-2. Migration等のコマンドの実行
Deployに先立ち、以下のコマンドを実行していきます。

manage.py makemigrations

manege.py migrate

manage.py collectstatic

manage.py createsuperuser

collectstaticは、静的ファイルを一箇所に集めるコマンドです。superuserはあとで、adminで操作するために作っておきます。

4-3. gunicornが起動するか確かめてみる
gunicornがサーバーとして機能しているか確認します。

sudo ufw allow 8000
gunicorn --bind 0.0.0.0:8000 todoproject.wsgi

IPアドレス:8000/ にアクセスして、サーバーが立ち上がっていればOKです。しかし、この状態だと、こちらがサーバーを立ち上げていないとユーザーはアクセスできません。(Ctr+c でサーバーを止めてもう一度アクセスしてみてください)

サーバーは基本的には常にリクエストを受け付ける状態である必要がありますが、gunicornはデフォルトでそのような状態ではありません。5.からはgunicornの設定をします。

4-4. 仮想環境を抜ける
以下のコマンドで、仮想環境を抜けます。

deactivate

5. gunicornの設定

デーモンプロセスでアクセスを受けることができるように、gunicornの設定を進めていきます。大きな流れとしては、『リクエスト→Nginx→gunicorn soket→gunicorn service→gunicorn/wsgy→djangoアプリケーションを動かす→レスポンス』です。この先、何やっているか分からないかと思いますが、この流れを構築設定しています。

5-1. gunicorn socketの作成
Nginxからアクセスを受けるソケットの作成をしていきます。

sudo vim /etc/systemd/system/gunicorn.socket

以下、ファイル内の設定

[Unit]
Description=gunicorn socket

[Socket]
ListenStream=/run/gunicorn.sock

[Install]
WantedBy=sockets.target

5-2. gunicorn serviceの作成
socketからアクセスを受けた時に実行するファイルの設定をしていきます。

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

以下、ファイル内設定

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

[Service]
User= fumi
Group=www-data
WorkingDirectory=/home/ryota/todoproject
ExecStart=/home/fumi/todoproject/todoenv/bin/gunicorn \
          --access-logfile - \
         --workers 3 \
         --bind unix:/run/gunicorn.sock \
         config.wsgi:application

[Install]
WantedBy=multi-user.target

5-3. gunicorn socketの実行
gunicorn.socketファイルを実行していきます。

sudo systemctl start gunicorn.socket
sudo systemctl enable gunicorn.socket

Nginxの設定

最後にNginxの設定を進めていきましょう。

6-1. Nginxの繋ぎこみの設定
ブラウザから受けたリクエストをgunicornに繋げるための設定を行っていきます。

sudo vim /etc/nginx/sites-available/todoproject

以下、ファイル内の設定

server {
     listen 80;
     server_name VPSのIP ;
     location = /favicon.ico { access_log off; log_not_found off; }
     location /static/ {
           root /home/ ryota / todoproject ;
     }
     location / {
        include proxy_params;
        proxy_pass http://unix:/run/gunicorn.sock;
     }
}

6-2. 設定の反映
シンボリックリンクの設定をすることで、上記の内容を反映させていきます。

sudo ln -s /etc/nginx/sites-available/todoproject /etc/nginx/sites-enabled

※ todoprojectの後の半角空白に注意

6-3. Nginxの再起動
設定を反映させるために再起動します。

sudo systemctl restart nginx

6-4. Firewallの設定
ブラウザからのアクセスを許可するための設定をします。

sudo ufw allow 'Nginx Full'

これで設定は完了です。IPアドレスをブラウザに入力すると、todolistが表示されます。

参考

https://www.udemy.com/course/django-3app/