本番環境のAdmin画面の崩れ

NginxでDjangoアプリをクラウドにデプロイしたら、なぜかローカルで綺麗に表示された管理画面（AdminSite）のレイアウトが下記の図のように崩れてしまいました。

いつもローカルでpython manage.py runserverで開発サーバーを立ち上げるとき、何もせずとも管理画面が綺麗に表示してくれたので、困ったもんですね。。

そこで、Chatgptと先人たちの知恵をかりながらこの問題を無事に解消したので、その解消法をご紹介いたします。

Djangoの静的ファイル設定

Djangoプロジェクトでは、静的ファイルの設定は主にSTATIC_URLとSTATIC_ROOTに関係します。

設定例

DjangoProjectのsettings.pyで：

settings.py

STATIC_URL = '/static/'
STATIC_ROOT = os.path.join(BASE_DIR, 'staticfiles')

STATIC_URL：テンプレートで静的ファイルを参照するためのURLプレフィックス。
STATIC_ROOT：collectstatic`コマンドで全ての静的ファイルを集めるディレクトリ。

静的ファイルの収集

本番環境では、以下のコマンドを実行して静的ファイルを収集します：

bash.

python manage.py collectstatic

これにより、全ての静的ファイルがSTATIC_ROOTに指定されたディレクトリに集められます。

Nginxの設定

Nginxでは、静的ファイルのパスを正しく設定する必要があり、今回の問題はまさにNginxの設定によるものでした。

Nginx設定例

nginx.conf

server {
listen 80;
server_name your_server_ip;
location = /favicon.ico { access_log off; log_not_found off; }
location /static/ {
alias /path/to/your/project/staticfiles/;
# 問題があった設定↓
# root /path/to/your/project/staticfiles/;
}
location / {
include proxy_params;
proxy_pass http://unix:/path/to/your/project/your_project.sock;
}
}


- **`alias`**：リクエストパスを指定されたディレクトリに直接マッピングし、
- 静的ファイルディレクトリへの正しいマッピングを保証します。

Nginxの再起動

設定を完了したら、Nginxサービスを再起動して変更を適用していきます。

bash.

sudo systemctl restart nginx

再度管理画面にアクセスすると、、正常に表示されるようになりました！!

Nginxでの`root`と`alias`の違い

Nginxで静的ファイルを提供する際、rootとaliasの使い方には重要な違いがあります。

`root`

説明：rootはリクエストパスのプレフィックスを保持します。
使用例：

nginx.conf

  location /static/ {
      root  /path/to/your/project/staticfiles/;
  }

リクエストパスが/static/css/style.cssの場合、rootは/static/をプレフィックスとして保持する：/path/to/your/project/staticfiles/static/css/style.css

`alias`

説明：aliasはリクエストされたURIを指定されたディレクトリに直接マッピングします。
使用例：

ngixn.conf

  location /static/ {
      alias /path/to/your/project/staticfiles/;
  }

リクエストパスが/static/css/style.cssの場合、
aliasは/static/をプレフィックスとして保持せず、指定のパスに直接にマッピングする：path/to/your/project/staticfiles/css/style.css

違いの説明：

パスの処理：rootはURIのプレフィックス(パスや文字列の先頭部分)を保持し、aliasはそれを置き換えます。
適用シナリオ：静的ファイルのディレクトリを直接指定する場合はaliasが適しています。

まとめ

ローカル環境ではDjangoが自動的に静的ファイルび解析をしてくれるので特段気にしていなかったのですが、本番環境ではDjangoとNginxの静的ファイルパスをきちんと設定を行ないとAdmin画面だけでなくアプリのコンテンツ画面も正常に表示されない可能性がありますので、今後は新しい確認視点として意識していこうと思います！

本記事がDjangoプロジェクトでの静的ファイル設定にお役立つことを願っています。
ご質問があれば、ぜひコメントしてください！