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"からも変更できます。
set NPM_CONFIG_PRODUCTION=false
$ heroku config:set HOST=0.0.0.0
$ heroku config:set NODE_ENV=production```
<h3>⑥Procfileの作成</h3>
アプリ直下でファイル名"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/