herokuを利用してnuxtをSSRでホスティングするメモ

herokuを利用してnuxtをSSRでホスティングする。

nuxtプロジェクトを作成する。
プロジェクトはSSRで作成する。

$ yarn create nuxt-app sampleApp
$ cd sampleApp

SSRを試したいので、/pages配下にsub/_id.vueを作成する。

<template>
  <div>sub</div>
</template>

<script>
export default {
  name: 'Id'
}
</script>

ビルドする。

$ yarn build

package.jsonを変更。
heroku-prebuild後に実行されるコマンドをheroku-postbuildに指定する。

  "scripts": {
    "dev": "nuxt",
    "build": "nuxt build",
    "start": "nuxt start",
    "generate": "nuxt generate",
    "heroku-postbuild": "npm run build" // + 追加
  },

Heroku CLIをインストール。

$ brew tap heroku/brew && brew install heroku

Herokuにアプリを作成。

環境変数を設定。

HOST : 0.0.0.0

herokuにログインする。
ブラウザが立ち上がるのでログインする。

$ heroku login

gitに登録。

$ heroku git:remote -a sampleapp201007

herokuにプッシュ。

$ git add .
$ git commit -m 'initial commit'
$ git push heroku master

herokuのコンソールからアプリを表示。

subページも表示。