まいだいありー

機械学習、技術系、日記など勉強したことのメモを書けたらなと思います。

React-Django REST FrameWorkのアプリをHerokuにデプロイ

React Web Django Heroku

はじめに

React-Django REST FrameWork で作った日報アプリをHerokuにデプロイする時にやることをまとめます.
このアプリについて少し補足すると, ユーザの認証には JSON Web Token (JWT) , 日報の記事管理は REST framework を用いています.

各種version

基盤となるパッケージの version を列挙しておきます.

  • npm 7.3.0
  • React 17.0.2
  • Python 3.7
  • Django 3.2.2
  • djangorestframework 3.12.4
  • django-cors-headers 3.7.0
  • heroku 7.53.1

Herokuにデプロイ

今回は React と Django は別々のプロジェクトとして Heroku へデプロイしました.

  • まずHerokuにログイン
$ heroku login


DjangoをHerokuへデプロイ

Djangoのプロジェクト作成済みのところから話を進めます. DjangoをHerokuへデプロイするときは, 前準備として色々やることがあります.

Djangoの設定

  • 自分のDjangoのプロジェクトに移動
$ cd <ProjectName>
  • Herokuの推奨パッケージをインストール
$ pip install gnucorn django-heroku whitenoise dj-database-url
  • requirements.txt へ必要なパッケージを書き出し
$ pip freeze >  requirements.txt

ファイルに追加記述

  • [setting.py] dj-database-url の設定
ALLOWED_HOSTS = ["*"]

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


  • [setting.py] whitenoise の設定
INSTALLED_APPS = [
    'whitenoise.runserver_nostatic',
    ...
]

...

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

...

STATIC_URL = '/static/'
STATIC_ROOT = os.path.join(BASE_DIR, 'staticfiles') 
STATICFILES_STORAGE = 'whitenoise.storage.CompressedManifestStaticFilesStorage'

STATICFILES_DIRS = (
    os.path.join(BASE_DIR, 'static'),
)

STATICFILES_STORAGE = 'whitenoise.storage.CompressedManifestStaticFilesStorage'


  • [setting.py] djnago-herokuの設定
DEBUG = False
if not DEBUG:
    django_heroku.settings(locals())


  • [setting.py] cors の設定

異なるドメイン間で通信するために以下の設定を忘れると, React側でAPIを叩いても, Djangoで拒否されてしまいます.
<front-AppName> は次の章でReactのアプリをデプロイするHerokuのアプリの名前です.

CORS_ORIGIN_WHITELIST = ( 
    "https://<front-AppName>.herokuapp.com/"
)
  • [.gitignore] pushしないファイルを設定

.gitignoreをプロジェクトの root に作成し, gitignore.io から Django で検索する

<django-project-name>/settings/local.py
staticfiles/

### Django ###
*.log
*.pot
*.pyc
__pycache__/
local_settings.py
db.sqlite3
media

### Python ###
# Byte-compiled / optimized / DLL files
*.py[cod]
*$py.class

# C extensions
*.so

# Distribution / packaging
.Python
build/
develop-eggs/
dist/
downloads/
eggs/
.eggs/
lib/
lib64/
parts/
sdist/
var/
wheels/
*.egg-info/
.installed.cfg
*.egg
MANIFEST

# PyInstaller
#  Usually these files are written by a python script from a template
#  before PyInstaller builds the exe, so as to inject date/other infos into it.
*.manifest
*.spec

# Installer logs
pip-log.txt
pip-delete-this-directory.txt

# Unit test / coverage reports
htmlcov/
.tox/
.nox/
.coverage
.coverage.*
.cache
nosetests.xml
coverage.xml
*.cover
.hypothesis/
.pytest_cache/

# Translations
*.mo

# Django stuff:

# Flask stuff:
instance/
.webassets-cache

# Scrapy stuff:
.scrapy

# Sphinx documentation
docs/_build/

# PyBuilder
target/

# Jupyter Notebook
.ipynb_checkpoints

# IPython
profile_default/
ipython_config.py

# pyenv
.python-version

# celery beat schedule file
celerybeat-schedule

# SageMath parsed files
*.sage.py

# Environments
.env
.venv
env/
venv/
ENV/
env.bak/
venv.bak/

# Spyder project settings
.spyderproject
.spyproject

# Rope project settings
.ropeproject

# mkdocs documentation
/site

# mypy
.mypy_cache/
.dmypy.json
dmypy.json


  • Procfile を作成 以下を書き込みます
web: gunicorn <ProjectName>.wsgi --log-file -


  • static を生成

プロジェクトのルートに static というフォルダーを作成し, その直下に .gitKeep のファイルを作成しておきます.


これでHerokuへデプロイするための Django の設定はおしまいで, ここからはHeroku.


  • Heroku に App を作成

<back-AppName> は <back-AppName>.herokuapp.com のようにURLに含まれます

$ heroku create <back-AppName>
  • HerokuのAppとDjangoのプロジェクトを結びつける
$ git init
$ heroku git:remote -a <back-AppName> <- HerokuのAppName
  • build-pack 追加
$ heroku buildpacks:set heroku/python
  • Herokuにpush
$ git add .
$ git commit -m "hoge"
$ git push heroku master


  • Heroku でデータベース設定やsuperuser設定
$ heroku run python manage.py migrate
$ heroku run python manage.py createsuperuser
  • アクセスしてみる

以下を実行し, /admin にアクセスできれば一応成功 (status code 500 になることもある)

$ heroku open


React を Heroku へデプロイ

React のプロジェクトの作成には, 以下を用いました.

$ npx create-react-app <ProjectName>
$ cd <ProjectName>


ここで, Reactのプロジェクト内にある package-lock.json か yarn.lock のどちらかを削除します. Herokuにnpm, yarnのどちらを使用するか指定するためです. (今回は, package-lock.json を削除)


また, Reactで叩くAPI のURLを https://<back-AppName>.herokuapp.com に変更するのをお忘れずに ( <back-AppName>はDjangoのプロジェクトをデプロイしたHerokuのアプリの名前)


  • Heroku に App を作成

<front-AppName> は <front-AppName>.herokuapp.com のようにURLに含まれます

$ heroku create <front-AppName>
  • HerokuのAppとReactのプロジェクトを結びつける
$ git init 
$ heroku git:remote -a <front-AppName> <- HerokuのAppName
  • build-pack 追加
$ heroku buildpacks:set https://github.com/mars/create-react-app-buildpack.git
  • Herokuにpush
$ git add .
$ git commit -m "hoge"
$ git push heroku master


push すると長々と処理が流れ, デプロイに成功すると最後にURLが表示されます. 以下でアプリにアクセス.

$ heroku open


これで自分の場合は React-Django のアプリをHerokuのサーバ上で実行することができました.

参考