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/