個人的備忘録：ローカルでは動作していた画像やCSSがAWS上で動作しない原因と対策についてまとめてみた

はじめに

ローカル環境では問題なく表示されていた 静的ファイル が、AWS にデプロイすると 正常に読み込まれない ことがあります。

これは Django の設定ミス や AWS の環境特有の問題 が原因で発生します。

本記事では、その 具体的な原因と解決策 を紹介します。

書こうと思ったきっかけ

Django アプリを AWS にデプロイ した際に、CSS や画像が反映されないトラブル に直面しました。

同じ問題に悩む人も多いと思い、解決策を整理 することにしました。

この記事が、静的ファイルの問題で困っている方の助け になれば幸いです。

1. collectstatic が実行されていない（自分調べ）

AWS 上の Django アプリが静的ファイルを適切に認識していない可能性があります。

対応策

Django の静的ファイルを収集するために、AWS 環境で以下のコマンドを実行してください。

python manage.py collectstatic --noinput

実行後、STATIC_ROOT のディレクトリ (/app/staticfiles/ など) にファイルが存在するか確認します。

ls -l /app/staticfiles/

2. STATICFILES_DIRS や STATIC_ROOT の設定ミス（自分調べ）

AWS 上で settings.py の STATICFILES_DIRS や STATIC_ROOT の設定が適切でないと、静的ファイルが読み込まれません。

設定例

import os

STATIC_URL = '/static/'

STATICFILES_DIRS = [
    os.path.join(BASE_DIR, "static"),
]

STATIC_ROOT = os.path.join(BASE_DIR, "staticfiles")

STATICFILES_DIRS が適切に設定されていないと、ローカルでは動作しても collectstatic で AWS に反映されない可能性があります。

3. AWS のパーミッション問題（自分調べ）

AWS 上でのファイルのアクセス権限が適切でない場合、Nginx や Django が静的ファイルにアクセスできません。

対応策

静的ファイルのディレクトリに適切な権限を付与してください。

sudo chmod -R 755 /app/staticfiles/
sudo chown -R www-data:www-data /app/staticfiles/

4. Nginx の location 設定ミス（自分調べ）

AWS では、Nginx をリバースプロキシとして使用することが多いですが、その設定ミスにより静的ファイルが読み込まれない場合があります。

修正前（誤った設定例）

location /static/ {
    root /etc/nginx/html;
}

修正後（正しい設定例）

location /static/ {
    alias /app/staticfiles/;
}

設定変更後、Nginx を再起動してください。

sudo systemctl restart nginx

または Docker を使用している場合は、以下のコマンドでコンテナを再起動します。

docker-compose down
docker-compose up -d --build

5. DEBUG = False の影響（自分調べ）

Django の DEBUG を False にすると、Django は開発時のように静的ファイルを提供しません。そのため、Nginx で静的ファイルを提供する必要があります。

対応策

settings.py で DEBUG = False にした場合、以下を確認してください。

DEBUG = False
ALLOWED_HOSTS = ['your-aws-instance-ip', 'yourdomain.com']

さらに、STATICFILES_STORAGE の設定を追加すると、静的ファイルの配信が改善されることがあります。

STATICFILES_STORAGE = 'django.contrib.staticfiles.storage.ManifestStaticFilesStorage'

6. AWS S3 を使用している場合（自分調べ）

AWS の S3 に静的ファイルをアップロードして配信している場合、django-storages を正しく設定する必要があります。

対応策

S3 を使う場合、settings.py に以下のような設定を追加してください。

AWS_STORAGE_BUCKET_NAME = 'your-s3-bucket-name'
AWS_S3_CUSTOM_DOMAIN = f'{AWS_STORAGE_BUCKET_NAME}.s3.amazonaws.com'

STATIC_URL = f'https://{AWS_S3_CUSTOM_DOMAIN}/static/'

また、以下のコマンドで django-storages をインストールし、AWS IAM の適切な権限を確認してください。

pip install django-storages[boto3]

7. キャッシュの影響（自分調べ）

ブラウザのキャッシュや CloudFront（CDN）などが影響して、最新の静的ファイルが反映されない場合があります。

対応策

以下のいずれかの方法を試してください。

1. ブラウザのキャッシュを削除

   • Chrome なら Ctrl + Shift + R で強制リロード
   • 開発者ツール > ネットワーク > キャッシュ無効化 をチェック

2. CloudFront のキャッシュを削除

   aws cloudfront create-invalidation --distribution-id YOUR_DISTRIBUTION_ID --paths "/*"
   

まとめ

優先的に確認すべきポイント

1. python manage.py collectstatic --noinput を実行し、静的ファイルが STATIC_ROOT に配置されているか確認
2. STATICFILES_DIRS と STATIC_ROOT の設定をチェック
3. nginx.conf で location /static/ の alias 設定を適切にする
4. DEBUG = False の場合は、Nginx で静的ファイルを提供する設定になっているか確認
5. AWS S3 を使用している場合は、設定が適切か確認
6. キャッシュが影響していないかをチェック（ブラウザキャッシュ・CloudFront など）

これらを試して、まだ解決しない場合はエラーログを共有してください！