Django web application on azure deployment

I am trying to deploy my Django web application on azure. It is running fine with debug = true. but after deployment on azure app service with debug = False in settings.py, it is not able to load user uploaded media files in an iframe, saying URL not found. I am able to delete and move media files but i am not able to show using Iframe in HTML.

This is settings.py:

MEDIA_URL = '/media/'  # URL for accessing media files
MEDIA_ROOT = BASE_DIR / 'media'  # Directory where files will be uploaded to

this is urls.py:

urlpatterns+= static(settings.STATIC_URL, document_root=settings.STATIC_ROOT) + static(settings.MEDIA_URL, document_root=settings.MEDIA_ROOT)

this is html: <iframe src="{{ MEDIA_URL }}{{ row.document.url }}" title="Document View" frameborder="0" width="100%" height="600px"></iframe>

I tried adding core headers, but it is not working.

I tried deploying a sample Python Django app to Azure with DEBUG = False set in the settings.py file.

After a successful deployment, my static files are not being served properly, as shown below.

enter image description here

Django does not serve static or media files in a production environment. To serve both static and media files, you can use Azure Blob Storage. For serving only static files, use Whitenoise.

Thanks to @medium for the clear explanation on uploading Django static and media files to Azure Blob Storage.

I created a storage account in Azure, then went to Configuration and enabled Allow Blob anonymous access as shown below.

enter image description here

I created two containers, media and static, with the Blob anonymous access level.

enter image description here

I added the following lines of code to settings.py at the end.

 STATIC_URL = '/static/'
STATIC_ROOT = os.path.join(BASE_DIR, 'static')
AZURE_ACCOUNT_NAME = "<StorageAccountName>"
AZURE_ACCOUNT_KEY = "<StorageAccountKey>"
AZURE_CONNECTION_STRING = "<ConnectionString>"
AZURE_CONTAINER_STATIC = "static"
AZURE_CONTAINER_MEDIA = "media"
STATIC_ROOT = f"https://{AZURE_ACCOUNT_NAME}.blob.core.windows.net/{AZURE_CONTAINER_STATIC}/"
MEDIA_URL = f"https://{AZURE_ACCOUNT_NAME}.blob.core.windows.net/{AZURE_CONTAINER_MEDIA}/"
STORAGES = {
    "default": {
        "BACKEND": "storages.backends.azure_storage.AzureStorage",
        "OPTIONS": {
            "azure_container": AZURE_CONTAINER_MEDIA,
            "account_name": AZURE_ACCOUNT_NAME,
            "account_key": AZURE_ACCOUNT_KEY,
            "connection_string": AZURE_CONNECTION_STRING,
        },
    },
    "staticfiles": {
        "BACKEND": "storages.backends.azure_storage.AzureStorage",
        "OPTIONS": {
            "azure_container": AZURE_CONTAINER_STATIC,
            "account_name": AZURE_ACCOUNT_NAME,
            "account_key": AZURE_ACCOUNT_KEY,
            "connection_string": AZURE_CONNECTION_STRING,
        }
    }
}
DEFAULT_AUTO_FIELD = 'django.db.models.BigAutoField'                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                     

requirements.txt:

Django
django-storages[azure]
azure-storage-blob

AZURE_ACCOUNT_NAME is the name of the storage account. You can find the connection string and account key in the Access keys section of the Storage Account.

enter image description here

After making the above changes, I successfully served the static and media files after deployment.

Azure Output:

enter image description here

enter image description here

For serving only static files, refer to this Stack Overflow thread.

Back to Top