【Nuxt】SSRモードをHerokuにデプロイする方法

どーも、ぐるたか@guru_takaです。

SSRモードで作ったNuxt製のwebサービスをHerokuにデプロイする方法をまとめました。以下の記事を参考にしています！
参考 Nuxt + Herokuで簡単にデプロイする - Qiita

私自身が詰まった点も含め、紹介していきます。

手順

STEP.1：herokuでの新規プロジェクト作成

デプロイ用にherokuで新しくプロジェクトを作成します。

手順は簡単！以下のURLから赤枠をクリックしましょう。
→Heroku ダッシュボード

すると、こんな感じで作成したプロジェクトが出てきます！

STEP.2：Heroku CLIのインストール→ログイン

続いて、Heroku CLIを使えるように、インストールします。

以下のコマンドで簡単にインストールできます。

$ brew install heroku/brew/heroku

その後、CLIでherokuにログインします。

$ heroku login

こんな画面がブラウザで開かれたらログイン完了です！

STEP.3：デプロイの下準備

次に、公式サイトの手順に沿って、nuxtをherokuにデプロイするための準備をします。

まず、nuxt内にあるpackage.jsonに、以下のscript"heroku-postbuild": "npm run build"を追記します。

~~
  "scripts": {
    "dev": "nuxt",
    "build": "nuxt build",
    "start": "nuxt start",
    "generate": "nuxt generate",
    "lint": "eslint --ext .js,.vue --ignore-path .gitignore .",
    "lintfix": "eslint --fix --ext .js,.vue --ignore-path .gitignore .",
    //追加
    "heroku-postbuild": "npm run build"
  },
~~

その後、herokuにデプロイするための環境変数を設定します。

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

もし、Nuxt内の.envファイルでAPIキーなどを設定している場合は、上記と同じようにherokuでも設定しましょう！

でないと、herokuに反映されず、こんな画面のエラーが出たり、APIからデータが取れなかったするので注意です。

ちなみにherokuで設定した環境変数は、ここで確認できます！

STEP.4：Herokuにデプロイ

後はデプロイを残すのみ！やり方は簡単です。

gitでリモートリポジトリをheroku側に作成し、プッシュするだけ！

コマンドは以下の通りです。

$ git init
$ git add .
$ git commit -m "herokuのデプロイ準備"
$ heroku git:remote -a samplenuxt
$ git push heroku master

何か変更した時は、git add . → git commitでローカルレポジトリに反映してあげましょう。

私はgit commitを忘れてしまったために、何度もherokuにプッシュしても、下準備が反映されず、最初デプロイできませんでした（アホ）

最後に、こんな画面が出てくればデプロイ完了！URLを開くて、デプロイされています🎉

最後に

以上です。SSRモードのNuxt製のwebサービスのデプロイを一度firebaseでトライしたのですが、圧倒的にherokuの方が楽ですね！本当に簡単で、感動しました。

Nuxt(SSRモード)のデプロイで悩んでいる方の参考になれば幸いです！
参考 Nuxt + Herokuで簡単にデプロイする - Qiita