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

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

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

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

## 書こうと思ったきっかけ
Django アプリを **AWS にデプロイ** した際に、**CSS や画像が反映されないトラブル** に直面しました。  

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

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

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

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

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

```sh
python manage.py collectstatic --noinput
```

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

```sh
ls -l /app/staticfiles/
```

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

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

### **設定例**

```python
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 が静的ファイルにアクセスできません。

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

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

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

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

### **修正前（誤った設定例）**
```nginx
location /static/ {
    root /etc/nginx/html;
}
```

### **修正後（正しい設定例）**
```nginx
location /static/ {
    alias /app/staticfiles/;
}
```

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

```sh
sudo systemctl restart nginx
```

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

```sh
docker-compose down
docker-compose up -d --build
```

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

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

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

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

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

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

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

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

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

```python
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 の適切な権限を確認してください。

```sh
pip install django-storages[boto3]
```

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

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

### **対応策**
以下のいずれかの方法を試してください。

1. **ブラウザのキャッシュを削除**
   - Chrome なら `Ctrl + Shift + R` で強制リロード
   - `開発者ツール > ネットワーク > キャッシュ無効化` をチェック

2. **CloudFront のキャッシュを削除**
   ```sh
   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 など）

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