Apacheと連携させたDjangoでReactのページをブラウザで表示すると真っ白で出力される

Reactで作ったページをyarn webpackコマンドを使用してbundle.jsファイルを生成し、bundle.jsを表示するindex.htmlをDjangoで表示しています。/usr/local/TEST/backend がDjangoのベースディレクトリであり、/usr/local/TEST/backend/templates/index.htmlと/usr/local/TEST/backend/templates/staic/js/bundle.jsを使用しています。

index.htmlの内容は以下になります。

<!DOCTYPE html>

{% load static %}

<html lang="en">
<head>
    <meta charset="utf-8">
    <title>React</title>
</head>
<body>
    <div id="root"></div>
    <script src="/static/js/bundle.js" ></script>
</body>
</html>

python3 manage.py runserver xxx.xxx.xxx.xxx:8000
コマンドで起動させたとき、トップページは正常に表示されています。Django側の設定は問題ないと考えました。しかし、http://xxx.xxx.xxx.xxx にアクセスをするとindex.htmlが見つからない、などの表示がされていました。
私はDjangoとApacheを連携させており、以下の記述をhttpd.confに追記していました。

httpd.conf

LoadModule wsgi_module /usr/local/anaconda3/lib/python3.9/site-packages/mod_wsgi/server/mod_wsgi-py39.cpython-39-x86_64-linux-gnu.so
WSGIScriptAlias / /usr/local/TEST/backend/config/wsgi.py
WSGIPythonHome /usr/local/anaconda3/
WSGIPythonPath /usr/local/TEST/backend

<Directory /usr/local/TEST/backend/config>
<Files wsgi.py>
Require all granted
</Files>
</Directory>

Djangoで作成したapiなど、他のページは見ることができているため、この部分の記述は問題がないと考えています。Apacheがindex.htmlを見ることができていないことが原因と思い、見よう見まねで、以下の記述をhttpd.confに追記しました。

<Directory /usr/local/TEST/backend/templates>
<Files index.html>
Require all granted
</Files>
</Directory>

<Directory /usr/local/TEST/backend/static/js>
<Files bundle.js>
Require all granted
</Files>
</Directory>

http://xxx.xxx.xxx.xxx にアクセスをすると、index.htmlが見つからないの表示は消えましたが、画面が真っ白で表示されています。httpd.confへの記述の仕方が何かおかしいのではないかと思うのですが、書き方がわからないため、ご教示いただきたいです…。

▽追記
httpd.confを試しに以下のように修正しましたが、状況は変わりませんでした。
/var/log/httpd/error_logにはエラーメッセージは出力されていません。

<Directory /usr/local/TEST/backend/templates>
Require all granted
</Directory>

<Directory /usr/local/TEST/backend/static/js>
Require all granted
</Directory>

hoshi-takanori

2022/10/26 01:49

Django は 8000 番ポートで動かしてるのに、http://xxx.xxx.xxx.xxx だと 80 番ポートにアクセスすることになります。とりあえず開発中は http://xxx.xxx.xxx.xxx:8000 にアクセスすれば良いのでは。

sasaki0628

2022/10/26 01:54

はい、開発時には問題がないのですが、最終的には80番ポートで動かしたいと考えています。

hoshi-takanori

2022/10/26 03:06

デプロイ先によりますね。django を直接 80 番ポートで動かすこともできなくはないと思いますが、nginx などでリバースプロキシするのが一般的でしょうか。 https://shigotoswitch.com/knowledge/how-to-deploy-a-django-project-on-a-server/

回答1件

自己解決

正しい書き方かわかりませんが、httpd.confを以下のように修正することでindex.htmlが表示されるようになりました。

Alias /templates/ /usr/local/TEST/backend/templates
<Directory /usr/local/TEST/backend/templates>
Require all granted
</Directory>

Alias /static/ /usr/local/TEST/backend/static/
<Directory /usr/local/TEST/backend/static/>
Require all granted
</Directory>

投稿2022/10/26 09:00

sasaki0628

総合スコア95