【IT】Azure App ServiceへのDjangoディプロイ時の静的ファイル（static)の設定

皆さま
こんにちは

Azure App ServiceへのDjangoを
設定をそのままにディプロイした場合、
以下の様に静的ファイル(static)が読めません。

教材は、DjangoGirlsBlogを使用しております。

はじめに · HonKit

以下のAzure ラーニングサイトを参考に設定します。

Linux Python アプリを構成する - Azure App Service

Azure App Serviceへ環境変数のセット

Azure ポータル画面にて
ー　「App Service」
ー　「対象サービス」
ー　「構成」
ー　「アプリケーション設定」
ー　「＋新しいアプケーション設定」
の順番で環境変数の画面を開き、

・SECRET_KEY
・DEBUG
・ALLOWED_HOSTS
・DATABASES関連の環境変数
　　（DBNAME、DBHOST、DBUSER、DBPASS）
等を設定します。

AppsでDjango アプリの静的ファイルの設定

１．静的ファイ場所をセット

静的ファイルの場所を
ローカル開発環境とAzure側で分ける場合は、
環境変数をセットします。

settings.py

＃ 読み込んだファイルをまとめて出力する先
STATIC_ROOT = os.path.join(BASE_DIR, os.getenv('ENV_STATIC_ROOT'))
＃ ブラウザ上でアクセスするためのURLパス
STATIC_URL = os.getenv('ENV_STATIC_URL')

.env
※settings.pyと同じディレクトリ配下へ配置

ENV_STATIC_URL=static/
ENV_STATIC_ROOT=static

２．静的ファイル収取箇所追加

Django の collectstatic プロセスで
検出されるように、そのフォルダーを
Django の STATICFILES_DIRS 変数へ
追加します。

フロントエンド フォルダー(frontenddir)で
yarn build を実行し、静的ファイルを含んだ
build/static フォルダーが
yarn によって生成される場合は、
以下の様に設定します。

settings.py

FRONTEND_DIR = os.path.join(BASE_DIR, 'frontenddir')  
STATICFILES_DIRS = [
    STATIC_DIR,
	os.path.join(FRONTEND_DIR, 'build', 'static')
	
]

３．requirements.txt ファイルにwhitenoiseを追加

whitenoise を追加します。

whitenoise を追加します。 Whitenoise (whitenoise.evans.io) は、運用環境の Django アプリから応答として静的ファイルを返すための作業を省力化する Python パッケージです。 具体的に言うと、Django の STATIC_ROOT 変数で指定されたフォルダーに見つかったファイルを Whitenoise が応答として返します。

https://learn.microsoft.com/ja-jp/azure/app-service/configure-language-python#customize-startup-command

以下コマンドでwhitenoise導入、反映します。

pip install whitenoise
pip freeze > requirements.txt

４．Whitenoise 関連の行を settings.py ファイルに追加

STATICFILES_STORAGE
MIDDLEWARE
INSTALLED_APPS
へWhitenoiseの行を追加します。

settings.py

STATICFILES_STORAGE = ('whitenoise.storage.CompressedManifestStaticFilesStorage')
＃　↑追加

MIDDLEWARE = [                                                                   
    'django.middleware.security.SecurityMiddleware',                          
    'whitenoise.middleware.WhiteNoiseMiddleware',　　　　　＃　追加
    　・
　　　　  　・
    　・
]


INSTALLED_APPS = [
    "whitenoise.runserver_nostatic",　　　　　　　　　　　　　　　　　　　　＃　追加
    　・
　　　　  　・
    　・
]

スタートアップコマンドの設定

Gunicornでworkersやthreadsを設定する場合は、
プロジェクトフォルダー直下に以下のファイルを設置します。

startup.sh  (例）

python manage.py migrate
gunicorn --workers 2 --threads 4 --timeout 60 --access-logfile \
    '-' --error-logfile '-' --bind=0.0.0.0:8000 \
     --chdir=/home/site/wwwroot config.wsgi

動作確認

再度、ディプロイしてAzure Appsで静的ファイルが表示されているか確認します。

これで設定完了です。

では

＜＜ご参考＞＞　※過去記事です。