参考サイト

https://www.codingforentrepreneurs.com/projects/angular-django/

Backend Image Path

heroku上のbackendのimageのpathを設定する。
Video modelにimage_pathを追記する。

class Video(models.Model):
    name            = models.CharField(max_length=220)
    slug            = models.SlugField(unique=True, blank=True)
    embed           = models.CharField(max_length=120, help_text='Youtube Embed Code', null=True, blank=True)
    image_path      = models.CharField(max_length=120,blank=True, default='')
    active          = models.BooleanField(default=True)
    featured        = models.BooleanField(default=False)
    timestamp       = models.DateTimeField(auto_now_add=True)

herokuにdeployする。

$ git add .
$ git commit -m "comment"
$ git push heroku master && heroku run python manage.py migrate

Custom Domain Name

herokuでcustom domainを使う。以下の動画を参照して設定。

https://www.codingforentrepreneurs.com/projects/angular-django/custom-domain-name/?play=true#lecture

AWS S3 For Static Files in Django

以下の記事を参照に、django + S3のセッティングをする。 https://www.codingforentrepreneurs.com/blog/s3-static-media-files-for-django/
動画はこちら（有料） https://www.codingforentrepreneurs.com/projects/angular-django/aws-s3-static-files-django/?play=true#/lecture
user作成（コンソールアクセスは無しのuserでOK）
userのaccess_keyと、secret_keyをメモしておく。
S3のbucketを作成する。
CORS設定→デフォルトのままとりあえずセット（先頭のsample corsという文字だけ削除しておく）
今回のプロジェクト用のPOLYCYを作成する。<your_bucket_name> の箇所を、bucket名に変更する

{
"Version": "2012-10-17",
"Statement": [
 {
     "Effect": "Allow",
     "Action": [
         "s3:ListAllMyBuckets"
     ],
     "Resource": "arn:aws:s3:::*"
 },
 {
     "Effect": "Allow",
     "Action": [
         "s3:ListBucket",
         "s3:GetBucketLocation",
         "s3:ListBucketMultipartUploads",
         "s3:ListBucketVersions"
     ],
     "Resource": "arn:aws:s3:::<your_bucket_name>"
 },
 {
     "Effect": "Allow",
     "Action": [
         "s3:*Object*",
         "s3:ListMultipartUploadParts",
         "s3:AbortMultipartUpload"
     ],
     "Resource": "arn:aws:s3:::<your_bucket_name>/*"
 }
]
}

IAM > User > 権限を与えたいuserを選択 > アクセス権限の付与 > 作成したポリシーを選択
これで一旦、AWS側の設定は終了。
S3に必要なpython moduleをinstallする。

$ pip install boto3 django-storages
$ pip freeze > requirements.txt

'storages'を, settings.pyに追記する。

INSTALLED_APPS = [
    'django.contrib.admin',
    'django.contrib.auth',
    'django.contrib.contenttypes',
    'django.contrib.sessions',
    'django.contrib.messages',
    'django.contrib.staticfiles',
    'rest_framework',
    'storages',
    'videos',
]

src/tryangular/aws　フォルダを作成する。また、__init__.pyを作成するのも忘れない。
src/tryangular/aws　に、conf.py, utils.pyを作成する。
utils.pyには、static, mediaのファイルの保存設定を書く。

from storages.backends.s3boto3 import S3Boto3Storage'

StaticRootS3BotoStorage = lambda: S3Boto3Storage(location='static')
MediaRootS3BotoStorage  = lambda: S3Boto3Storage(location='media')

conf.pyには、以下のテンプレでコードを書く。

import datetime
AWS_ACCESS_KEY_ID = "<your_access_key_id>"
AWS_SECRET_ACCESS_KEY = "<your_secret_access_key>"
AWS_FILE_EXPIRE = 200
AWS_PRELOAD_METADATA = True
AWS_QUERYSTRING_AUTH = True

DEFAULT_FILE_STORAGE = '<your-project>.aws.utils.MediaRootS3BotoStorage'
STATICFILES_STORAGE = '<your-project>.aws.utils.StaticRootS3BotoStorage'
AWS_STORAGE_BUCKET_NAME = '<your_bucket_name>'
S3DIRECT_REGION = 'us-west-2'
S3_URL = '//%s.s3.amazonaws.com/' % AWS_STORAGE_BUCKET_NAME
MEDIA_URL = '//%s.s3.amazonaws.com/media/' % AWS_STORAGE_BUCKET_NAME
MEDIA_ROOT = MEDIA_URL
STATIC_URL = S3_URL + 'static/'
ADMIN_MEDIA_PREFIX = STATIC_URL + 'admin/'

two_months = datetime.timedelta(days=61)
date_two_months_later = datetime.date.today() + two_months
expires = date_two_months_later.strftime("%A, %d %B %Y 20:00:00 GMT")

AWS_HEADERS = {
 'Expires': expires,
 'Cache-Control': 'max-age=%d' % (int(two_months.total_seconds()), ),
}

local.pyに、conf.pyを読み込むように設定する。

...
from tryangular.aws.conf import *

まずlocalで、python manage.py collectstaticを試してみる、、、成功！
次に、production環境でも,S3を使うように設定していく。
production.pyの、STATICFILES_STORAGEの設定をコメントアウトする。

# STATICFILES_STORAGE = 'whitenoise.django.GzipManifestStaticFilesStorage'

wsgi.py のwhitenoiseの設定の箇所を削除する。

import os

from django.core.wsgi import get_wsgi_application

os.environ.setdefault("DJANGO_SETTINGS_MODULE", "tryangular.settings")

application = get_wsgi_application()

$pip uninstall whitenoiseで、whitenoiseをuninstallする。
herokuは、自動でcollectstaticしないように、collectstaticを禁止するコマンドを入れる。

$ heroku config:set DISABLE_COLLECTSTATIC=1

herokuにデプロイして、現時点では、imageが、うまく表示されていないと思うので、それでOK。

まとめ

projectごとに、awsのuserは分けよう。

Djangoroidの奮闘記

python,django,angularJS1~三十路過ぎたプログラマーの奮闘記

Angular4 + Django1.11 vol.11

参考サイト

Backend Image Path

Custom Domain Name

AWS S3 For Static Files in Django

まとめ