
【IT】Azure App ServiceへのDjangoディプロイ時の画像ファイル(media)の設定
皆さま
こんにちは
Azure App ServiceへのDjangoを
設定をそのままにディプロイした場合、
以下の様に画像ファイルが表示されなく、
アプケーションを再起動する度に
アップロードしたファイルが消えてしまいます。

Django本番環境でメディアファイル公開設定
通常、公開先の環境では、DEBUG=Falseとなっているため、
MEDIAファイルのURLが参照出来なくなっております。
まずは、Django側の設定変更を行います。
1.プロジェクトのurls.pyに設定を追加
urls.py(プロジェクトの)
from django.contrib import admin
from django.urls import path, include
from django.conf import settings
from django.conf.urls.static import static
from django.urls import path, include, re_path
→追加
from django.views.static import serve
→追加
urlpatterns = [
path('admin/', admin.site.urls),
path('', include('app.urls')),
]
# MEDIA_ROOTを公開する(アクセス可能にする)
urlpatterns += static(
settings.MEDIA_URL, document_root=settings.MEDIA_ROOT
)
# DEBUG=FalseでもMEDIA_ROOTを見える様にする
urlpatterns += [re_path(r'^media/(?P<path>.*)$', serve, {'document_root': settings.MEDIA_ROOT, }), ]
→追加
2.MEDIA_URLとMEDIA_ROOTを設定
MEDIAファイルの場所を
ローカル開発環境とAzure側で分ける場合は、
環境変数をセットします。
MEDIA_URL = os.getenv('ENV_MEDIA_URL', '/media/')
MEDIA_ROOT = os.getenv('ENV_MEDIA_ROOT', os.path.join(BASE_DIR, 'media'))
.env
※settings.pyと同じディレクトリ配下へ配置
→今回は、ローカル側には追加しません。
Azure 側での設定
Azure ポータルで
・Azure Storageの設定
・環境変数の設定
・パスのマッピング
を行います。
Azure Storageの設定
ストレージ アカウントより
ストレージカウントを作成します。
リージョンは、AppServiceと同じリージョンと場所を選択します。

ネットワークの設定でApp Serviceからのアクセスを許可しておきます。
※App SerivceでVNET統合をしてあることが前提です。
注意:VNET統合は、AppServiceのFreeプランでは選択出来ません。(2023年2月時点)
※今回は、公開する写真ですので
プライベートエンドポイントまでは設定はしません。

ファイル共有を作成します。

テスト用ですのでクオータを最小にしておきます。

Azure App Serviceでのマウント
App Serviceで作成したファイル共有をマウントします。
「構成」ー「パスのマッピング」
ー「新しいAzure Storage マウント」を選択します。

Azure Filesを選択し、
マウントパスは、今回は、
「/home/site/wwwroot/media」とします。

Azure App Serviceへ環境変数の追加
ENV_MEDIA_ROOTに先ほどマウントしたパス
「/home/site/wwwroot/media」をセットし、
「保存」ボタンを押して反映します。
※注意:「保存」ボタンを押すとアプリが再起動します。

動作確認
再度、画像をアップロードします。
※アップロードパスが異なるため、
先ほどアップした画像は破棄されます。

これで設定完了です。
では
<<ご参考>> ※過去記事です。