【Django】作成したWebアプリをさくらのVPSでデプロイするまでの流れ【初心者】

始めに

• この記事のゴール

  • Djangoで作成したWebアプリをさくらのVPSにデプロイしてブラウザから見れるようにする
  • 独自ドメインはなしで、IPアドレスでの表示になります
  • https化はしない（通信が暗号化されません）

• こんな人に向けての記事

  • 自分（後で手順がわからなくなった時に参考にするよう）

  • DjangoでWebアプリ作ったけど、公開方法がわからない人

  • なんとなくWebアプリ公開までの流れを理解したい人

• 前提条件

  • さくらのVPSを契約している（レンタルサーバーならさくらのVPSじゃなくてもOK）
  • SSH接続のやり方がわかる
  • Githubの使い方がわかる
  • Linuxコマンドがわかる(cd,ls,vi程度)

作業環境

• さくらのVPS(CentOS7)
• VScode
• Python
• Django
• Nginx
• gunicorn
• Mac

参考サイト(記事の最後でも紹介してます)

• DjangoでgunicornとNginxを使う（Nginxその3）
  
• さくらのVPSで、https対応かつDjango+uWSGI+nginxなアプリのログイン機能を実装してみた
• ネコでもわかる！さくらのVPS講座 ～第三回「Apacheをインストールしよう」

全体の流れ

1. さくらのVPSにSSH接続する
2. Python環境構築
3. 仮想環境構築
4. Githubからコードダウンロードする
5. サーバーの各種設定
6. settings.py変更
7. Django起動
8. ブラウザからサイトにアクセスする

さくらのVPSにSSH接続する

まずは、お使いのPCからSSH接続を行います。

ターミナル.

ssh [e-mail]

xxxはSSH接続したいPCのIPアドレス
ここではさくらのVPSでレンタルしたもの

OSユーザー作成方法など詳しくは、
ネコでもわかる！さくらのVPS講座 ～第二回「サーバーをさわってみよう！

Python環境構築

サーバーの設定ができたところで、Pythonをインストールしていきます。
仮想環境も作りたいので、いろいろまとまっているAnacondaにします。

公式サイトの下の方にDLリンクあるのでリンクコピーします。

ターミナル.

wget https://repo.anaconda.com/archive/Anaconda3-2020.11-Linux-x86_64.sh

エラーになる場合はwgetがインストールされていないため先にwgetをインストールします。

ターミナル.

yum install wget

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

ターミナル.

sh Anaconda3-2020.11-Linux-x86_64.sh

パスを有効にします。

ターミナル.

source .bashrc

仮想環境構築

開発がしやすいように仮想環境を構築します。

環境を作成します

ターミナル.

conda create -n my_env #my_envは好きな環境名に変更可

環境を有効にします

ターミナル.

conda activate my_env

パッケージ管理はpipで行うのでcondaでインストールするのはpipのみです。
※仮想環境を有効にした状態にしてください

ターミナル.

conda install pip

pipがインストールされたか確認
pipが確認できたらOKです。

ターミナル.

conda list

Githubからコードダウンロードする

次はGithubからwebアプリをダウンロードします。
事前にローカルで開発したDjangoプロジェクトフォルダをアップロードしておきます。

ターミナル.

git clone https://github.com/xxxxxxxx/xxxxxxx

多分、requirements.txtがあると思うので、ライブラリ各種（Django含む）をインストール
※オプションの-rをお忘れなく（忘れるとエラーになります。）

ターミナル.

pip install -r requirements.txt

Djangoやライブラリがインストールされたか確認
webアプリに使っているライブラリが表示されたらOKです。

ターミナル.

pip list

サーバー各種設定

Djangoデプロイに必要な各種サーバーをインストールします。

• Nginx(エンジンエックス)
• gunicorn(グリーンユニコーン)

Nginxインストール

公式サイトの手順でインストールしていきます。

yum-utilsのインストール

ターミナル.

yum install yum-utils

ファイルの作成
/etc/yum.repos.d/nginx.repo

作成したファイルを編集

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
module_hotfixes=true

[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
module_hotfixes=true

設定変更

ターミナル.

yum-config-manager --enable nginx-mainline

nginxインストール

ターミナル.

yum install nginx

ファイルの作成
etc/nginx/conf.d/project.conf

作成したファイルの編集

project.conf

server {
    listen  80;
    server_name xxx.xxx.xxx.xxx; #独自ドメインを契約している場合はドメインでも可

    root /usr/share/nginx/html; #ルートディレクトリ

    location /static {
        alias /usr/share/nginx/html/static; #staticファイルを読み込むための設定
    }

    location / {
        proxy_pass http://127.0.0.1:8000; #Djangoと接続するポート番号
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
        proxy_set_header Host $http_host;
        proxy_redirect off;
        proxy_set_header X-Forwarded-Proto $scheme;
    }
}

nginxを起動する

ターミナル.

systemctl status nginx.service  #状態確認
systemctl start nginx.service  #起動

gunicornインストール

gunicornはpipでインストールすることができます。
実は先ほどpip install -r requirements.txtした際にgunicornもインストールしていました。
まだの方はインストールしましょう。
※仮想環境を有効にしてインストールしてください。

ターミナル.

pip install gunicorn

settings.py変更

デプロイ用にいくつか変更していきます。
※変更箇所のみ載せています。

settings.py

DEBUG = False
# デフォルトは DEBUG = True

ALLOWED_HOSTS = ["xxx.xxx.xxx.xxx"] # 独自ドメインを持っている方は独自ドメイン可
#デフォルトは ALLOWED_HOSTS = []
# ALLOWED_HOSTS = ["*"]でも良いみたいですが、全てを許可してしまうため推奨されていません。

STATIC_URL = '/static/' #Djangoから静的ファイルにアクセスするディレクトリ
#デフォルトは STATIC_URL = '/static/'
STATIC_ROOT = '/usr/share/nginx/html/' #collectstaticで静的ファイルが集まるディレクトリ
#デフォルトはないので、新しく追加する

デプロイ用にstaticファイルを集めます。

ターミナル.

python manage.py collectstatic

Django起動

python manage.py runserverコマンドは使いません。
gunicornでWebアプリを起動させます。

ターミナル.

cd /xxx/xxx/my_env/Project  #git cloneでプロジェクトフォルダを置いたディレクトリ
# manage.pyがあるディレクトリ
gunicorn --bind 127.0.0.1:8000 project.wsgi -D
#projectのところは自分で作成したプロジェクトフォルダの名前
# -Dはデーモン化オプション

ブラウザからサイトにアクセスする

ブラウザを立ち上げて、http://xxx.xxx.xxx.xxx にアクセスします。
ブラウザが表示されたら完了。

終わりに

かなり端折ったので、わからないところあるかもです。
時間見つけて更新していきます。

参考サイト

• DjangoでgunicornとNginxを使う（Nginxその3）
  
• さくらのVPSで、https対応かつDjango+uWSGI+nginxなアプリのログイン機能を実装してみた
• ネコでもわかる！さくらのVPS講座 ～第三回「Apacheをインストールしよう」

次の目標

• 済　独自ドメイン化
  • 参考記事
  • さくらのVPS-独自ドメインの設定
• 済　https化
  • 記事化完了してます
  • 【https化】CentOS7+Nginxで無料SSL証明書Let’s Encrypt（レッツ・エンクリプト）を取得する