##はじめに
フロントエンドとして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ではうまく繋がらなかった)
axios.get(`http://(EC2インスタンスのパブリックIP):8000/api/… `)
// ↑port:8000のDjangoのAPIにアクセス
nginx
/etc/nginx/conf.d に.confファイルを作成。
プロキシとしてport:3000に飛ばす設定のみ。バックエンドとしてのDjangoの設定はなくても動作した。
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起動時に読み込まれる。
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のあるアドレスとないアドレスの両方を登録しておく。
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アプリを動かす基礎