Djangoをherokuにデプロイ

前のブログらからの移行です。

デプロ

boto3==1.13.11
botocore==1.16.11
dj-database-url==0.5.0
Django==2.2.11
django-heroku==0.3.1
django-mdeditor==0.1.18
django-storages==1.9.1
django-summernote==0.8.11.4
docutils==0.15.2
gunicorn==20.0.4
importlib-metadata==1.6.0
jmespath==0.10.0
Markdown==3.2.2
Pillow==7.1.2
psycopg2==2.8.5
python-dateutil==2.8.1
pytz==2019.3
s3transfer==0.3.3
six==1.14.0
sqlparse==0.3.1
urllib3==1.25.9
whitenoise==5.0.1
zipp==3.1.0

手順

heroku アカウントの作成

まずdeploy先のherokuのアカウントを作成します。
herokuアカウント作成はこちら

必要なパッケージをインストール

pipenv install gunicorn dj-database-url psycopg2 whitenoise

ファイル作成

pip freeze > requirements.txt

touch Procfile

そしてProcfileのなかに一行追加

#procfile
web: gunicorn mysite.wsgi --log-file -

また使うpythonのバージョンもherokuに教える必要がある。

touch runtime.txt

以下の記述をruntime.txtに追記する。

#runtime.txt
python-3.7.7

次にsetting.pyを編集していきます

settings.pyのDEBUGをTRUEに変更する。

#settings.py

###省略

ALLOWED_HOSTS = ['*]`

INSTALLED_APPS = [
    ...
    'whitenoise.runserver_nostatic',
    ...
]

###省略

MIDDLEWARE = [
    ...
    'whitenoise.middleware.WhiteNoiseMiddleware',
    ...
]


STATICFILES_STORAGE = 'whitenoise.storage.CompressedManifestStaticFilesStorage'

staticfiles_storage はwhitenoiseの設定でバックエンドで自動的にfileを圧縮できるみたい。
ちなみにwhitenoiseのバージョン5.0以降からwsgiファイルにwhitenoiseは設定しなくてもいいみたい、

herokuへのデプロイ時にはlocalの環境と本番環境でsettings.pyを使い分けるのが良
い。

そのため、local_settings.pyをsettins.pyからコピーして作り、DEBUGをTrueにして作成する。

#local_settings.py
import os

# Build paths inside the project like this: os.path.join(BASE_DIR, ...)
BASE_DIR = os.path.dirname(os.path.dirname(os.path.abspath(__file__)))


# Quick-start development settings - unsuitable for production
# See https://docs.djangoproject.com/en/2.2/howto/deployment/checklist/


# SECURITY WARNING: don't run with debug turned on in production!
DEBUG = True  #ローカルはTrue

ALLOWED_HOSTS = ['127.0.0.1','shumpeimurakami.pythonanywhere.com']

シークレットキーを設定する。

#local_settings.py

# SECURITY WARNING: keep the secret key used in production secret!
SECRET_KEY = '自分のシークレットキー'

#settings.py
...

# SECURITY WARNING: don't run with debug turned on in production!
DEBUG = False
# DEBUG_PROPAGATE_EXCEPTIONS = True

...

DATABASES = {
        'default': {
            'ENGINE': 'django.db.backends.postgresql_psycopg2',

try:
    from .local_settings import *
except importerror:
    pass

if not debug:
    secret_key = os.environ['secret_key']

    import django_heroku
    django_heroku.settings(locals())

db_from_env = dj_database_url.config(conn_max_age=500)
DATABASES['default'].update(db_from_env)

そして本番環境用の設定をこのように変更する。

localでimport できるときはlocal_settingsの方使う設定にして、debugがfalseのときはnot debug以下を適用させる感じで。
secret_keyはherokuにログイン後に設定します。

herokuにデプロイ!

まずherokuにログインします。

heroku login

.gitignoreの編集
gitignoreにlocal_setting.pyを追加する。

*.pyc
*~
/.vscode
__pycache__
myvenv
db.sqlite3
/static
.DS_Store
local_settings.py #追加

$ git init
$ git add -A .
$ git commit -m 'deploy'
$ heroku create murakami
$ heroku config:set SECRET_KEY='settings.pyに記載されていたSECRET_KEYを記入'
$ git push heroku master

ここでherokuにはdynoというサーバーを起動させるようなものが必要らしい

$ heroku ps:scale web=1

ひとまず準備は完了ということでmigrate

$ heroku run python manage.py migrate
$ heroku run python manage.py createsuperuser

heroku open

そしてここで見れるようになったが次は画像が表示されない。

staicとstatic_root、mediaとmedia_rootについて深く理解してなかった。
s

STATIC_URL = '/static/'
STATIC_ROOT= os.path.join(BASE_DIR,'staticfiles', 'static_root/')

STATICFILES_STORAGE = 'whitenoise.storage.CompressedManifestStaticFilesStorage'

MEDIA_URL = '/media/'
MEDIA_ROOT = os.path.join(BASE_DIR, 'media/')

これはmedia_urlを起点としてその下にmedia_rootでつなげていくというイメージのよう。
ディレクトリをルートディレクトリに持っていき階層構造を整えて

heroku run python manege.py collectstatc

上のcollectstaticは静的ファイルをstatic_rootで指定したものに集めるもの、

この状態で

heroku open

そして管理画面から写真投稿….
投稿できた！！！！
万歳万歳と思い

一時間後

画像消えてる。

なぜか理由を探した結果herokuは画像アップロードに対応していないので、画像については他のものを経由して使用する必要があります。

s３

ということでamazon web servivesのs３というクラウドストレージを使用し、そこにアップロードされたものをdjangoに繋げてみる

ここの詳しい繋げ方は
heroku django s3をつなげる

こちらのqiitaを参考にして設定してみました、

こちらを行ってみた結果、画像が適切に表示されました

ただ一難去ってまた一難
テキスト入力欄にdjango-mdeditorを使用しててこちらでアップロードした画像がs3の方に行かない。

試しにmdeditorのオプションで保存先を

MDEDITOR_CONFIGS = {
        'default': {
            'language': 'en',
            'image_folder': 'post_images',
            }
        }

こちらに変更してみても….（modelのイメージのアップロードさきがここ）
問題解決せず

とりあえず一つの解決策として画像使用時にはs3で画像アップロードし公開し、httpsの絶対パスで画像を出す、、という段階で現在なんとかやっています。
良い方法見つけたらまた更新いたします、