With Django + Google Cloud Strage, ImageField images are displayed normally on the server

Images are not displayed properly even when using ImageField on servers such as Heroku and GAE (Google App Engine).

This is because SQL doesn't support uploading images, and you'll have to upload images to cloud storage such as Google Cloud Strage or Amazon S3 to resolve this.

This time, I will show you how to upload images to Google Cloud Storage.

Django Strage (Google Cloud Storage) Official Documentation https://django-storages.readthedocs.io/en/latest/backends/gcloud.html

Install Django Strage

Install Django Strage (Google Cloud Storage), a Django library for working with Google Cloud Strage on Django, with pip.

bash


$ pip install django-storages[google]

Get credentials on Google Cloud Platform

From Google Cloud Platform, register your Cloud Strage credentials and get a JSON file containing your credentials.

Get a service account

You can get it from the Google Start Guide (https://cloud.google.com/docs/authentication/getting-started).

step 1 From the link in the Google Start Guide (https://cloud.google.com/docs/authentication/getting-started), select "Go to the Create Service Account Key page" 手順1

Step 2 Enter the service account name in Create new service account. GCS2 Then select "Storage"-> "Storage Administrator" from the role. Make sure that the key type is JSON, and click the "Create" button. GCS3 This will download the JSON file. GCS4

** Place the downloaded JSON file in the root directory of your Django project. ** **

Create a Google Cloud Storage bucket

The unit of Cloud Strage is called a bucket (meaning like a bucket to put data in). Create this to store your data.

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

If you access from the above URL, you will see the following creation screen, so create a new bucket. 作成画面.png

When completed, the screen below will be displayed. 作成完了.png

This completes the settings on the Google Cloud Platform console.

Settings in Django

Add settings to settings.py

Set the default storage and bucket name in the settings.py file.

settings.py


STATIC_URL = '/static/'
STATIC_ROOT = os.path.join(BASE_DIR, 'staticfiles')
STATICFILES_STORAGE = 'storages.backends.gcloud.GoogleCloudStorage'

MEDIA_URL = '/media/'
MEDIA_ROOT = os.path.join(BASE_DIR, 'media')
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'),
)

This completes the settings.

After that, let's execute the following command.

bash


$ python manage.py collectstatic

Then deploy the configuration changes to the server and it should work.

Thank you for your hard work.

Recommended Posts

With Django + Google Cloud Strage, ImageField images are displayed normally on the server
How to fix the shit heavy when reading Google Cloud Storage images from Django deployed on GAE
Django + Apache with mod_wsgi on Windows Server 2016
Bugs that static files are not displayed on the App Engine development server
Drawing tips with matplotlib on the server side
Embed other images on the raster with ArcPy
Implement Sign In With Google on the backend side
Install django on python + anaconda and start the server
Display the weather forecast on M5Stack + Google Cloud Platform
Access the host SQL Server with python27 / pyodbc on the container
Until the start of the django tutorial with pycharm on Windows
Save images on the web to Drive with Python (Colab)