このサイトは、特にやりたいこともなく無気力に生きる汚い中年おじさんデザイナー佐藤文彦のポートフォリオサイトです。
応援よろしくお願いします。

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

2020/10/07

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にアプリを作成。

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

環境変数を設定。

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

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

$ heroku login

gitに登録。

$ heroku git:remote -a sampleapp201007

herokuにプッシュ。

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

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

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

subページも表示。

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

カテゴリ

新規記事