LoginSignup
3
3

More than 3 years have passed since last update.

Djangoで DEBUG = False にした時にstaticファイル(CSS, JS, img)が読み込まれない問題を解決する。

Posted at

HerokuやGAE(Google App Engine)などのサーバでデバッグモードをFalseにすると、いままで開発用に Django が提供していた static ファイルが提供されなくなりCSSやJS、imgなどが表示できなくなってしまうことがあります。

そこで、Google Cloud Storageに static ファイルをアップロードすることによりこの問題を解決することができますので、その方法を解説したいと思います。

Django Strage (Google Cloud Storage) 公式ドキュメント
https://django-storages.readthedocs.io/en/latest/backends/gcloud.html

Django Strage のインストール

Django で Google Cloud Strage を扱うための Django ライブラリ、 Django Strage (Google Cloud Storage) をpipでインストールします。

bash
$ pip install django-storages[google]

Google Cloud Platform で認証情報の取得

Google Cloud Platform から、 Cloud Strageの認証情報の登録と、認証情報の記載された JSON ファイルを取得します。

サービスアカウントの取得

Googleスタートガイド (https://cloud.google.com/docs/authentication/getting-started) から取得できます。

手順1
Googleスタートガイド (https://cloud.google.com/docs/authentication/getting-started) のリンクから、「[サービスアカウントキーの作成]ページに移動」を選択
手順1

手順2
新しいサービスアカウントを作成で、サービスアカウント名を入力。
GCS2
その後、役割から「ストレージ」 -> 「ストレージ管理者」を選択。
キーのタイプがJSONになっていることを確認して、「作成」ボタンを押下してください。
GCS3
そうすると、JSONファイルがダウンロードされます。
GCS4

ダウンロードしたJSONファイルは、Djangoプロジェクトのルートディレクトリに配置してください。

Google Cloud Strageのバケットの作成

Cloud Strageの単位をバケットといいます(データを入れるバケツみたいな意味)
これを作成して、データを収納します。

Google Cloud Console (Cloud Strage)
https://console.cloud.google.com/storage/browser

上記URLからアクセスすると、以下のような作成画面に遷移すると思うので、新規バケットを作成します。
作成画面.png

完了すると以下のような画面になります。
作成完了.png

これで、Google Cloud Platform console での設定は完了です。

Djangoでの設定

settings.pyに設定の追加

settings.pyファイルでデフォルトのストレージとバケット名を設定します。

settings.py
STATIC_URL = '/static/'
STATIC_ROOT = os.path.join(BASE_DIR, 'staticfiles')
STATICFILES_STORAGE = 'storages.backends.gcloud.GoogleCloudStorage'
DEFAULT_FILE_STORAGE = 'storages.backends.gcloud.GoogleCloudStorage'
GS_BUCKET_NAME = '[YOUR_BUCKET_NAME_GOES_HERE]'

from google.oauth2 import service_account

GS_CREDENTIALS = service_account.Credentials.from_service_account_file(
    os.path.join(BASE_DIR, '[YOUR_AUTHENTICATON_KEY_FILE_NAME].json'),
)

以上で設定は完了です。

あとは以下のコマンドを実行しましょう。

bash
$ python manage.py collectstatic

そして設定の変更をサーバにデプロイすると正常に機能するはずです。

お疲れ様でした。

3
3
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
3
3