nuxtで作成したアプリをherokuにデプロイする

先日nuxt.jsで作成したアプリをherokuにデプロイしたのでそのメモとして執筆しました。

前提

ハードウェア

・macbook pro13　m1チップ非搭載

ソフトウェア

・macOS bi sur 11.3
・nuxt 2.14.6
・パッケージマネジャ： yarn

タスク概要

概ね下記タスクを実行すればデプロイできるます。
僕が詰まった点は⑥⑦ですが、エラー内容は後述します。

①herokuアカウント作成
②heroku cli導入
③herokuへのログイン
④heroku上でアプリ作成
⑤環境変数を設定
⑥Procfileの作成
⑦.gitignoreの設定
⑧デプロイ

タスク詳細

①herokuアカウント作成

https://jp.heroku.com/ へアクセスしアカウントを作成

②heroku cli導入

下記コードを実行、実行済みの場合はパスして問題ないです。
$ brew install heroku/brew/heroku

③herokuへのログイン

下記コードを実行
$ heroku login

実行するとログインするか確認されるのでenterキーを実行

Log Inをクリックしてターミナルに戻る。
ターミナルの表示が下記になっていればOKです。

Logged in as <メールアドレス>

④heroku上でアプリ作成

下記コマンドを実行してください。<アプリの名前>は好きな名前を設定してください。
ただし、すでに存在するものは登録できないので、何度か調整する必要があります。
$ heroku create <アプリの名前>

⑤環境変数を設定

下記コマンドもターミナルから実行してください。

※ブラウザからherokuにログインして、作成したアプリの"settings"の"Config Vars"からも変更できます。

$ heroku config:set NPM_CONFIG_PRODUCTION=false
$ heroku config:set HOST=0.0.0.0
$ heroku config:set NODE_ENV=production

⑥Procfileの作成

アプリ直下でファイル名"Procfile"を作成してください。
yarn lockと同じ階層です。拡張子は不要です。
記述内容は下記一行です。

web: yarn start

※パッケージマネージャによって異なります。
ご自身のpackage.jsonを確認してください。
"scripts": {
"start": "nuxt start",
"generate": "nuxt generate",
},


⑦.gitignoreの設定

.nuxt, distをgitignoreから削除してください。

これができていないと下記のようにエラーします。

2021-05-01T04:46:13.991279+00:00 app[web.1]: │                                                                                 │
2021-05-01T04:46:13.991279+00:00 app[web.1]: │   ✖ Nuxt Fatal Error                                                            │
2021-05-01T04:46:13.991280+00:00 app[web.1]: │                                                                                 │
2021-05-01T04:46:13.991280+00:00 app[web.1]: │   Error: Output directory `dist/` does not exists, please use `nuxt generate`   │
2021-05-01T04:46:13.991280+00:00 app[web.1]: │   before `nuxt start` for static target.                                        │
2021-05-01T04:46:13.991281+00:00 app[web.1]: │                                                                                 │
2021-05-01T04:46:13.991281+00:00 app[web.1]: ╰────────────────────────────────────────────────────────────────────────���────────╯

⑧デプロイ

下記コマンドを実行してください。gitの環境によっては最後はmasterではエラーします。
その場合はmasterをmainに変えて実行してみてください。

$ git push heroku master

しばらく時間がかかりますがエラーしなければ、$ heroku openを実行してアプリを開きます。

ちなみに、僕がデプロイしたアプリはこちらです。
https://amaimon-decision.herokuapp.com/