【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）
](https://snowtree-injune.com/2020/11/07/nginx-part3-dj015/)
- [さくらのVPSで、https対応かつDjango+uWSGI+nginxなアプリのログイン機能を実装してみた](https://qiita.com/ezmscrap/items/26b1897923db3665ac1c#%E4%B8%8B%E6%BA%96%E5%82%99)
- [ネコでもわかる！さくらのVPS講座 ～第三回「Apacheをインストールしよう」](https://knowledge.sakura.ad.jp/8541/)

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



## さくらのVPSにSSH接続する
まずは、お使いのPCからSSH接続を行います。

```ターミナル.
ssh create_user_name@xxx.xxx.xxx.xxx
```

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

OSユーザー作成方法など詳しくは、
[ネコでもわかる！さくらのVPS講座 ～第二回「サーバーをさわってみよう！](https://knowledge.sakura.ad.jp/8218/)

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

[公式サイト](https://www.anaconda.com/products/individual)の下の方に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インストール

[公式サイト](http://nginx.org/en/linux_packages.html#RHEL-CentOS)の手順でインストールしていきます。

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）
](https://snowtree-injune.com/2020/11/07/nginx-part3-dj015/)
- [さくらのVPSで、https対応かつDjango+uWSGI+nginxなアプリのログイン機能を実装してみた](https://qiita.com/ezmscrap/items/26b1897923db3665ac1c#%E4%B8%8B%E6%BA%96%E5%82%99)
- [ネコでもわかる！さくらのVPS講座 ～第三回「Apacheをインストールしよう」](https://knowledge.sakura.ad.jp/8541/)

## 次の目標
- <font color="Red">**済**</font>　独自ドメイン化
    - 参考記事
    - [さくらのVPS-独自ドメインの設定](https://www.sakura-vps.net/original-domain-settings-for-sakura-vps/)
- <font color="Red">**済**</font>　https化
    - 記事化完了してます
    - [【https化】CentOS7+Nginxで無料SSL証明書Let’s Encrypt（レッツ・エンクリプト）を取得する](https://qiita.com/narunblog/items/ddab90efd42d5f2d2af1)