React / Django Rest Framework / nginx / uWSGI の本番環境設定方法

Question

React / Django Rest Framework / nginx / uWSGI の本番環境設定方法

現在、Django Rest Framework と React を用いて開発を行っており、開発環境で動作した通信が本番環境でテストすると動かなくなり、困っています。
1台の物理サーバーでフロントエンド・バックエンドの両方を完結させようと試みています。

本番環境

• 物理サーバー: Ubuntu20.04
• WEBサーバー: nginx/1.18.0 (Ubuntu)
• アプリケーションサーバー: uwsgi 2.0.20
• django: 3.2.13
• node.js: v16.13.0

実現したいこと

• axios 等の http ライブラリを用いて、django 側とのデータの送受信を行いたい

発生している問題・エラーメッセージ

react から axios を用いてバックエンドの Django に対して通信を行おうとした際に、

net::ERR_CONNECTION_TIMED_OUT

となってしまいます。

POST http://(物理サーバーIPアドレス):8000/api/
net::ERR_CONNECTION_TIMED_OUT

該当のソースコード

# mysite/settings.py

...

DEBUG = False
ALLOWED_HOSTS = ["(物理サーバーのIPアドレス)", "localhost", "127.0.0.1"]

...

MIDDLEWARE = [
    'django.middleware.security.SecurityMiddleware',
    'django.contrib.sessions.middleware.SessionMiddleware',
    'django.middleware.common.CommonMiddleware',
    'django.contrib.auth.middleware.AuthenticationMiddleware',
    'django.contrib.messages.middleware.MessageMiddleware',
    'django.middleware.clickjacking.XFrameOptionsMiddleware',
    "corsheaders.middleware.CorsMiddleware",
    "django.middleware.common.CommonMiddleware",
    #'django.middleware.csrf.CsrfViewMiddleware',# ←JWT認証を使っているので外しています。
]

CORS_ALLOWED_ORIGINS = [
    "http://localhost",
    "http://127.0.0.1",  
    "http://(物理サーバーのIPアドレス)",
]

WSGI_APPLICATION = 'mysite.wsgi.application'

...

// 該当の関数
const hoge = (hoge) => {
  return axios ({
    method: 'post',
    mode: 'cors',
    url: BASEURL + 'api/',
    headers: {
      'Content-Type':'application/json'
    },
    data: {
      'hoge':hoge
    }
  })
  .then(function (response) {
    ...
  .catch(error => {
    ...
  })
}

# /etc/nginx/nginx.conf

user www-data;
worker_processes auto;
pid /run/nginx.pid;
include /etc/nginx/modules-enabled/*.conf;

events {
        worker_connections 768;
}

http {
        sendfile on;
        tcp_nopush on;
        types_hash_max_size 2048;
        include /etc/nginx/mime.types;
        default_type application/octet-stream;

        ssl_protocols TLSv1 TLSv1.1 TLSv1.2 TLSv1.3;
        ssl_prefer_server_ciphers on;
        access_log /var/log/nginx/access.log;
        error_log /var/log/nginx/error.log;

        gzip on;
        server_tokens off

        include /etc/nginx/conf.d/*.conf;# ← ここから以下の react.conf を読んでいます。
        include /etc/nginx/sites-enabled/*;
}

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

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

    server_name (物理サーバーのIPアドレス);
    charset     utf-8;
    root        /home/ubuntu/(reactのディレクトリ)/build;
    index       index.html index.htm;

    location / {
        proxy_set_header Host $http_host;        
        try_files $uri $uri/ /index.html;

        allow (物理サーバーのIPアドレス)
        allow 127.0.0.1;
        deny all;
    }
}

# uWSGI 起動時のコマンド
uwsgi --socket :8000 --module mysite.wsgi --pcre-jit --py-autoreload 1 --logto /tmp/uwsgi.log

得られる出力

# uWSGI のログ(/tmp/uwsgi.log)

*** Starting uWSGI 2.0.20 (64bit) on [Tue Oct 18 19:32:10 2022] ***
compiled with version: 11.2.0 on 18 October 2022 01:29:56
os: Linux-5.15.0-1020-aws #24-Ubuntu SMP Thu Sep 1 16:04:17 UTC 2022
nodename: ip-10-0-10-10
machine: x86_64
clock source: unix
pcre jit enabled
detected number of CPU cores: 4
current working directory: /home/ubuntu/(djangoのプロジェクトディレクトリ)
detected binary path: /home/ubuntu/.pyenv/versions/3.9.9/bin/uwsgi
your processes number limit is 62768
your memory page size is 4096 bytes
detected max file descriptor number: 1024
lock engine: pthread robust mutexes
thunder lock: disabled (you can enable it with --thunder-lock)
uwsgi socket 0 bound to TCP address :8000 fd 3
Python version: 3.9.9 (main, Sep  1 2022, 00:06:12)  [GCC 11.2.0]
Python main interpreter initialized at 0x55e4f544c790
python threads support enabled
your server socket listen backlog is limited to 100 connections
your mercy for graceful operations on workers is 60 seconds
mapped 145840 bytes (142 KB) for 1 cores
*** Operational MODE: single process ***
WSGI app 0 (mountpoint='') ready in 0 seconds on interpreter 0x55e4f544c790 pid: 253294 (default app)
*** uWSGI is running in multiple interpreter mode ***
spawned uWSGI master process (pid: 253294)
spawned uWSGI worker 1 (pid: 253324, cores: 1)
Python auto-reloader enabled

// ブラウザコンソールの出力
Failed to load resource: net::ERR_CONNECTION_TIMED_OUT

/var/log/nginx/error.log に出力はなく、/var/log/nginx/access.log に通常のアクセスが記載されているのみでした。

試したこと

①権限の書き換え

sudo chmod o+x /home/ubuntu/

→ /var/log/nginx/error.log を確認する限り、(13: Permission denied) のエラーがなくなりました。

②reactの再ビルド
axios でアクセスする際のアドレスを以下のように変更しました。

• (開発環境時): http://localhost:8000
• (変更後): http://(物理サーバのIPアドレス):8000

補足

(1) react のアプリケーションディレクトリは django の プロジェクトディレクトリ の外に配置しています
.
├── django
│   ├── mysite(プロジェクトディレクトリ)
│ 　　 ├── settings.py

　　　　　　　...

│   ├── myapp
│ 　　 ├── いろいろ

... ... ...

├── react

... ... ...

(2) react アプリケーションのビルドは以下のコマンドを用いて行いました。

npm run build

※知識が浅いので不要な情報でしたら申し訳ありません。スルーしてください。

ひとこと

axios を用いてデータの送受信を行う方法を探しています。
nginx や uWSGI についての知識が特に浅く、非常に困っています。

上記の問題の解決方法案が思い浮かぶ方がいらっしゃいましたら、ご教示いただけると幸いです。

よろしくお願いいたします。