実に5ヶ月ぶりの投稿です。
この間、個人の仕事でバタバタしたり常駐が週3になったり旅行したりと色々ありましたが、ひとまず元気です。
いい加減「Go to Everyone!」の更新以外の記事を書く習慣を戻していこうと思います。

さて、今回はDjango＋npmのプロジェクトをHerokuにアップする手順について記載します。
恥ずかしながら最近までHerokuを触ったことが無く、AWSやVPSとは違って自由にできない点が多くかなりハマりました。
今後同じようにハマる方が減ることを願ってここに記載します。

heroku-cliの導入

これは色々なところに記載があるため割愛します。
結果的に、以下コマンドが動作すればOKです。 

$ heroku --help

Herokuアカウント登録

アカウントが無い人はこちらから登録しましょう。

※Herokuで動作するDynoについて Dyno（アプリケーションを動作させるコンテナ）は月あたりの動作時間で課金となりますが、 1つだけ動作させるのであれば1ヶ月無停止でも無料枠に収まります。
ただ、その場合は時間の制限上クレジットカード情報の登録が必要です。
また、30分アクセスが無いと停止するため、次回アクセス時にかなり待たされます。
定期的にcurlするなど何らかの対策が必要ですのでご注意ください。

アカウント登録後は、以下コマンドでログインしておいてください。 

$ heroku login

データベースを用意

PostgreSQLを利用します。
Herokuではプラグインを導入することで無料で利用できます（その分スペックが低いので、本格的に利用するならDyno含め有料プランをおすすめします）。

リポジトリの用意

Heroku用にGitリポジトリを配置することもできますが、GitHubと連携させることも可能です。
今回は過去に何度か登場している以下リポジトリで試しました。
myrecipe

こちらは、Django2.xとAngular6.xを利用しています（今回、これらのセットアップは本題ではないため割愛します）。
それぞれ独立させて動作させているため、ここのつなぎ込みが一番苦労しました。

ビルドに必要なbuildpacksの追加

$ heroku buildpacks:set heroku/python
$ heroku buildpacks:set heroku/nodejs

依存関係の追加（Python）

pipenv（またはrequirements.txtでもOK）に依存関係を追加します。 

$ pipenv install gunicorn psycopg2-binary whitenoise
$ # requirements.txt の場合
$ # pip install gunicorn psycopg2-binary whitenoise
$ # pip freeze > requirements.txt
  • gunicorn: アプリケーションサーバ
  • psycopg2-binary: PostgreSQLを利用する際に必要なライブラリ、MySQLならmysqlclient
  • whitenoise: Heroku上で静的ファイルの配信を行うために必要なライブラリ

whitenoiseがポイントです。
Herokuではプラグインを導入するだけで自動デプロイができますが、静的ファイルの生成（python manage.py collectstatic）はやってくれるのに配信がされないため、これを解決するためにこのライブラリが必要でした。

Procfile の追加

Procfileというファイルに、アプリケーションを起動するコマンドを定義します。
今回はgunicornを利用するため、以下のように記述します。 

web: gunicorn app.wsgi --log-file -

app.wsgiは、実際に用意したwsgi.pyによって変わります。
上記プロジェクトではrecipe/wsgi.pyに配置したため、recipe.wsgiです。

Django側コード修正

settings.pyを修正します。 

MIDDLEWARE = [
    'django.middleware.security.SecurityMiddleware',
    # 公式では SecurityMiddleware の後に追加するように記載されています。    'whitenoise.middleware.WhiteNoiseMiddleware',
...

DATABASES = {
    'default': {
        'ENGINE': 'django.db.backends.postgresql_psycopg2', # ENGINE をPostgreSQLに
...

npm script追加

先ほど追加したbuildpacks（heroku/nodejs）により、デプロイ時にnodejsのインストールやスクリプト実行が行われます。
npm scriptに以下を追加することで、Heroku側で自動実行してくれます。 

"scripts": {
    "heroku-prebuild": "yarn run prod"
},
...

本来なら関連する他作業も多々あると思いますが、つなぎ込みの手順は以上です （思い出しながら書いたので少し抜けてるかもしれません…）。

「起動しない！」というツッコミや「こういった場合は？」という質問もあれば後日書きますので、お気軽にご連絡ください。
今回は以上です。