質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
86.12%
Django

DjangoはPythonで書かれた、オープンソースウェブアプリケーションのフレームワークです。複雑なデータベースを扱うウェブサイトを開発する際に必要な労力を減らす為にデザインされました。

Apache

Apacheは、Apache HTTP Serverの略で、最も人気の高いWebサーバソフトウェアの一つです。安定性が高いオープンソースソフトウェアとして商用サイトから自宅サーバまで、多くのプラットフォーム向けに開発・配布されています。サーバーソフトウェアの不具合(NCSA httpd)を修正するパッチ(a patch)を集積、一つ独立したソフトウェアとして開発されました。

React.js

Reactは、アプリケーションのインターフェースを構築するためのオープンソースJavaScriptライブラリです。

解決済

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

sasaki0628
sasaki0628

総合スコア95

Django

DjangoはPythonで書かれた、オープンソースウェブアプリケーションのフレームワークです。複雑なデータベースを扱うウェブサイトを開発する際に必要な労力を減らす為にデザインされました。

Apache

Apacheは、Apache HTTP Serverの略で、最も人気の高いWebサーバソフトウェアの一つです。安定性が高いオープンソースソフトウェアとして商用サイトから自宅サーバまで、多くのプラットフォーム向けに開発・配布されています。サーバーソフトウェアの不具合(NCSA httpd)を修正するパッチ(a patch)を集積、一つ独立したソフトウェアとして開発されました。

React.js

Reactは、アプリケーションのインターフェースを構築するためのオープンソースJavaScriptライブラリです。

1回答

0グッド

0クリップ

193閲覧

投稿2022/10/26 01:15

編集2022/10/26 01:38

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>

以下のような質問にはグッドを送りましょう

  • 質問内容が明確
  • 自分も答えを知りたい
  • 質問者以外のユーザにも役立つ

グッドが多くついた質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

気になる質問をクリップする

クリップした質問は、後からいつでもマイページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

下記のような質問は推奨されていません。

  • 間違っている
  • 質問になっていない投稿
  • スパムや攻撃的な表現を用いた投稿

適切な質問に修正を依頼しましょう。

sasaki0628

2022/10/26 01:54

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

回答1

0

自己解決

正しい書き方かわかりませんが、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

良いと思った回答にはグッドを送りましょう。
グッドが多くついた回答ほどページの上位に表示されるので、他の人が素晴らしい回答を見つけやすくなります。

下記のような回答は推奨されていません。

  • 間違っている回答
  • 質問の回答になっていない投稿
  • スパムや攻撃的な表現を用いた投稿

このような回答には修正を依頼しましょう。

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
86.12%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問

同じタグがついた質問を見る

Django

DjangoはPythonで書かれた、オープンソースウェブアプリケーションのフレームワークです。複雑なデータベースを扱うウェブサイトを開発する際に必要な労力を減らす為にデザインされました。

Apache

Apacheは、Apache HTTP Serverの略で、最も人気の高いWebサーバソフトウェアの一つです。安定性が高いオープンソースソフトウェアとして商用サイトから自宅サーバまで、多くのプラットフォーム向けに開発・配布されています。サーバーソフトウェアの不具合(NCSA httpd)を修正するパッチ(a patch)を集積、一つ独立したソフトウェアとして開発されました。

React.js

Reactは、アプリケーションのインターフェースを構築するためのオープンソースJavaScriptライブラリです。