Raspberry pi + Nginx + uWSGIでWebサーバーを立ち上げDjangoアプリをデプロイしてみる その2

## はじめに
本記事は [Raspberry pi + Nginx + uWSGIでWebサーバーを立ち上げDjangoアプリをデプロイしてみる その1](https://qiita.com/ochomaki/items/447c25cecbb5aee35ca1) の続きとなっております。まだ読んでない方はそちらを先にご覧ください。

その1ではPythonの仮想環境構築からDjango,uWSGIのインストールと動作確認を行いました。次はWebサーバーであるNginxをインストールします。最後までお付き合いくださいませ！

## Nginxをインストールする前に

インストール前にNginxについて軽く触れます。
NginxはWebサーバーの一種です。ブラウザより静的コンテンツのリクエストが来た場合はNginxが応答し返します。動的コンテンツの場合はアプリケーションサーバ(本構成ではuWSGI)へ要求を行います。
メジャーなWebサーバとしてApacheが挙げられますが、NginxはApacheと比較し軽量で、大量のリクエストを処理できます。以前はApacheがWebサーバの主流だったみたいですが、近年はNginxのシェアがかなり増えているみたいです。

こちらに詳しい比較が記載されているので気になる方はご一読ください。
[Apacheとnginxどちらを採用すべきかメリット・デメリット比較](https://qiita.com/pink/items/7709218310b5cf11eabe)

インストールする前に一点、[その1](https://qiita.com/ochomaki/items/447c25cecbb5aee35ca1) から続けて移ってきた方は、仮想環境（Test）に入っている状態だと思いますので一旦仮想環境から出ましょう。
その1の通りに進めている場合、ターミナルの表示は

```python:terminal
# その1の通りに進めている場合、ターミナルの表示は
(Test) pi@raspberrypi:~/Test/mysite $
# となっている筈なので、exitコマンドで仮想環境から抜けます
(Test) pi@raspberrypi:~/Test/mysite $ exit    #　exitコマンド
# (Test)が取れ、仮想環境から抜けた事がわかります
pi@raspberrypi:~/Test/mysite $
```
仮想環境から抜けたらNginxのインストールに移ります。~~本当は最新版をインストールしたいのですが少々手間なので今回は割愛します（後日別途解説予定）~~
(6/17 追記)
最新版インストールについての記事を書きました。以下を参照ください
[Raspberry piに最新版のNginxを導入する](https://qiita.com/ochomaki/items/b9e1353a50ea43c50a35)

## Nginxのインストール

それではNginxをインストールします。インストールしたら起動してみましょう

```python:terminal
$ sudo apt install nginx    # Nginxのインストール
$ sudo /etc/init.d/nginx start    # Nginxの起動
# 起動が成功すると以下が表示されます
[ ok ] Starting nginx (via systemctl): nginx.service.
```

起動が成功したら [http://127.0.0.1:80](http://127.0.0.1:80) にアクセスしてみましょう。正常に動いていれば下の"Welcome to nginx!"ページが表示されるはずです。
これでブラウザとWebサーバの連携が確認できました。

## Nginxの設定

次にNginxの設定を行います`/etc/nginx`ディレクトリに `uwsgi_params` というファイルがあると思いますので、それをコピーして`/home/pi/Test/mysite`ディレクトリにペーストします。
もし`/etc/nginx`ディレクトリにファイルが存在しない場合は以下の内容で`/home/pi/Test/mysite`に`uwsgi_param`の名前で保存してください。

```python:uwsgi_param
uwsgi_param  QUERY_STRING       $query_string;
uwsgi_param  REQUEST_METHOD     $request_method;
uwsgi_param  CONTENT_TYPE       $content_type;
uwsgi_param  CONTENT_LENGTH     $content_length;

uwsgi_param  REQUEST_URI        $request_uri;
uwsgi_param  PATH_INFO          $document_uri;
uwsgi_param  DOCUMENT_ROOT      $document_root;
uwsgi_param  SERVER_PROTOCOL    $server_protocol;
uwsgi_param  REQUEST_SCHEME     $scheme;
uwsgi_param  HTTPS              $https if_not_empty;

uwsgi_param  REMOTE_ADDR        $remote_addr;
uwsgi_param  REMOTE_PORT        $remote_port;
uwsgi_param  SERVER_PORT        $server_port;
uwsgi_param  SERVER_NAME        $server_name;
```
次に`/etc/nginx`ディレクトリに`sites-avaialble`と`sites-enabled`フォルダを作成し、`sites-available`に`mysite_nginx.conf`ファイルを作成します。

```python:terminal
$ sudo mkdir /etc/nginx/sites-available    # sites-availableフォルダ作成
$ sudo mkdir /etc/nginx/sites-enabled   # sites-enabledフォルダ作成
$ cd /etc/nginx/sites-available    # 作成したsites-availableに移動
$ sudo vi mysite_nginx.conf    # mysite_nginx.confを編集
```
`mysite_nginx.conf`には以下の内容を入力して保存してください。piユーザーでこの記事に沿って行っている場合はコピペで大丈夫です。それ以外の方はディレクトリを適宜変更して保存してください

```python:mysite_nginx.conf
# mysite_nginx.conf

# the upstream component nginx needs to connect to
upstream django {
    # server unix:///home/pi/Test/mysite/mysite.sock; # for a file socket
    server 127.0.0.1:8001; # for a web port socket (we'll use this first)
}

# configuration of the server
server {
    # the port your site will be served on
    listen      8000;
    # the domain name it will serve for
    server_name example.com; # substitute your machine's IP address or FQDN
    charset     utf-8;

    # max upload size
    client_max_body_size 75M;   # adjust to taste

    # Django media
    location /media  {
        alias /home/pi/Test/mysite/media;  # your Django project's media files - amend as required
    }

    location /static {
        alias /home/pi/Test/mysite/static; # your Django project's static files - amend as required
    }

    # Finally, send all non-media requests to the Django server.
    location / {
        uwsgi_pass  django;
        include     /home/pi/Test/mysite/uwsgi_params; # the uwsgi_params file you installed
    }
}
```
保存が完了したら、`mysite_nginx.conf`をコピーして`/home/pi/Test/mysite`へ複製します。複製したらシンボリックリンクを作成します。

```python:terminal
# mysite_nginx.confのコピペ
$ cp /etc/nginx/sites-available/mysite_nginx.conf ~/Test/mysite
# シンボリックリンクの作成
$ sudo ln -s ~/Test/mysite/mysite_nginx.conf /etc/nginx/sites-enabled/
```
シンボリックリンクを作成した`sites-enabled` がNginx起動時に読み込まれるかどうか確認します。`/etc/nginx/nginx.conf` を開き
`include /etc/nginx/sites-enabled/*;` の1行が追加されているか確認してください。もし無い場合は
`include /etc/nginx/conf.d/*.conf;` の次の行に追加してください。これでNginx起動時に`sites-enabled` 以下のファイルが全て読み込まれます。


## Django静的ファイルの展開
`mysite/static` ディレクトリにDjango静的ファイルを展開します。`/home/pi/Test/mysite/mysite` にある`settings.py`の末尾に以下の一行を追加します。

```python:settings.py
# 末尾に以下の一行を追加
STATIC_ROOT = os.path.join(BASE_DIR, "static/")
```
次にDjango静的ファイルの展開を行います。仮想環境Testを実行してから展開を行いましょう。以下に沿ってコマンドを実行してください

```python:terminal
# Testディレクトリに移動してから仮想環境Testを実行
$ cd ~/Test
$ pipenv shell
$ cd mysite
# Django静的ファイルを展開
$ python manage.py collectstatic
```
これで`Test/mysite`ディレクトリに`static`フォルダ以下が生成されているはずです。念の為確認してください

## メディアファイルの確認
メディアファイルが正しく取得できるかを確認します。
`/home/pi/Test/mysite`に`media`フォルダを生成し、好きな画像を`media.png`として保存します。
ちなみに私は猫の画像を保存しました
![media1.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/424307/dcf51e8b-d1df-d535-ac28-70283a5318f2.png)


```python:terminal
# /home/pi/Test/mysite に移動
$ cd /home/pi/Test/mysite
# mediaフォルダを生成
$ mkdir media
# media.pngを保存後、Nginxを再起動
$ sudo /etc/init.d/nginx restart
```
Nginxが正常に再起動できたら[http://127.0.0.1:8000/media/media.png](http://127.0.0.1:8000/media/media.png) にアクセスしてみてください。保存した猫の画像がブラウザに表示されれば成功です。
![media_SS.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/424307/3a4cb738-6700-70a9-f2c7-474f4f184102.png)

猫はやっぱり可愛いですね。
それでは今回はここで終わりとします。次のパートで最後です、これまでの2回でインストールしたuWSGIとNginxを組み合わせDjangoアプリをデプロイします。

### 次回（6/9追記）
[Raspberry pi + Nginx + uWSGIでWebサーバーを立ち上げDjangoアプリをデプロイしてみる その3(最終回)](https://qiita.com/ochomaki/items/685959ced864d2b6feac)