皆さま
こんにちは

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

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

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

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導入、反映します。

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で静的ファイルが表示されているか確認します。

これで設定完了です。

では

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