React＋nginx＋uWSGI＋Djangoでデプロイする際の設定

##はじめに

フロントエンドとしてReact、バックエンドとしてDjangoで実装されたアプリを、ひとつのEC2上で同時に動かした際に、設定で時間を食ってしまったので作業メモに残す。
ついでにDjangoが開発用サーバで動かしていたので、uWSGIを入れた状態で動かす。

WSGIサーバを入れた方がいい理由は、以下参照。
Djangoの開発サーバーをプロダクション環境で使わないように、という話

前提

• Reactのフロントエンド、Djangoのバックエンドを実装し、EC2上に配置
• npm、nginxをEC2にインストール
• ローカルや別々のEC2にnginx＋ReactとDjangoを単純に配置して動作する状態

参考：
丁寧解説】秒速でもDjango 3アプリをAWS EC2で公開【Nginx, gunicorn, postgresqlデプロイ】
React/Next.jsアプリケーションを作成し、AWS EC2を使って本番環境にデプロイするまで

アプリの構成

ひとまず、別々のサーバにいたものをそのまま並べた構成とする。
Webブラウザ <--> nginx <--> Reactアプリ(Port:3000)<--> uWSGI <--> Djangoアプリ(Port：8000)

uWSGIのインストール、動作確認

$ pip install uwsgi

Djangoアプリの構成時に、(Djangoアプリフォルダ)/config/wsgi.py が配置されていれば特別な設定は必要なし。
動作確認等でチュートリアルの和訳記事を参照した。
Django + uWSGI + nginx (uWSGIチュートリアルの和訳)

ファイルの設定内容

React

アクセス先のDjangoのURLはEC2のパブリックアドレスを指定する。
(localhost、127.0.0.1ではうまく繋がらなかった)

(Reactアプリフォルダ)/src/views/foo.js

    axios.get(`http://(EC2インスタンスのパブリックIP):8000/api/… `)
                   // ↑port:8000のDjangoのAPIにアクセス

nginx

/etc/nginx/conf.d に.confファイルを作成。
プロキシとしてport:3000に飛ばす設定のみ。バックエンドとしてのDjangoの設定はなくても動作した。

/etc/nginx/conf.d/react.conf

server {
    listen 80;
    listen [::]:80;

    server_name (EC2のパブリックアドレス);

    location / {
        # プロキシの設定
        proxy_set_header Host $http_host;
        # proxy_pass http://127.0.0.1:3000; ←こちらでもOK　
        proxy_pass http://(EC2のパブリックアドレス):3000; 

    }
}

/etc/nginx/nginx.conf に、以下の記述があることを確認しておく。これで、/etc/nginx/conf.d/の設定がnginx起動時に読み込まれる。

/etc/nginx/nginx.conf

http {
    …
    include /etc/nginx/conf.d/*.conf;
    include /etc/nginx/sites-enabled/*; 
}

/etc/nginx/sites-enabled/* に関する記述は、nginxで複数のサイトを扱う際に、サイトごとの設定をsites-enabled/ に保存するために必要(今回は未使用)。

設定については以下も参照。
nginxについてまとめ(設定編)

Django

settings.pyの"CORS_ORIGIN_WHITELIST"で、EC2のパブリックアドレスを指定する。
(localhostや127.0.0.1ではうまく動かなかった)
port:3000のあるアドレスとないアドレスの両方を登録しておく。

(Djangoアプリフォルダ)/config/settings.py

CORS_ORIGIN_WHITELIST = [
    'http://(EC2のパブリックアドレス):3000',
    'http://(EC2のパブリックアドレス)',
]

アプリの起動

Djangoアプリ起動(uWSGI)

Djangoアプリのメインフォルダに移動し、wsgi.pyファイルを指定してuWSGIを起動する。

$ cd (Djangoアプリフォルダ)
$ uwsgi --http :8000 --module config.wsgi　
                            　↑(Djangoアプリフォルダ)/config/wsgi.pyを指定している

React、Nginxを起動

$ cd (Reactアプリフォルダ)
$ npm start
$ sudo systemctl start nginx

おわりに

今回はフロントエンドとバックエンドを別々に配置したが、次はReactをDjango側に配置して動かす予定。

その他参考サイト

Python Django + React
React+Nginx+Django Rest Frameworkでデプロイ
uWSGIでDjangoアプリを動かす基礎