NuxtアプリをHerokuでホスティングする

公式サイトだけではわからなかったので、手順化しました。

公式サイト

https://ja.nuxtjs.org/faq/heroku-deployment/

Nuxtアプリを作成

yarn create nuxt-app noracorn-heroku-nuxt

? Project name noracorn-heroku-nuxt
? Project description My divine Nuxt.js project
? Use a custom server framework express
? Choose features to install Axios
? Use a custom UI framework vuetify
? Use a custom test framework jest
? Choose rendering mode Universal
? Author name noracorn
? Choose a package manager yarn

ビルドして確認

cd noracorn-heroku-nuxt
yarn dev

APIを追加

server/api.js

const express = require('express')
const router = express.Router()

router.get('/otameshi', (req, res, next) => {
  const param = { response: 'success' }
  res.header('Content-Type', 'application/json; charset=utf-8')
  res.send(param)
})

module.exports = router

apiの設定変更

server/index.js

const express = require('express')
const consola = require('consola')
const { Nuxt, Builder } = require('nuxt')
const app = express()

const apiRouter = require('./api') // 追記

// Import and Set Nuxt.js options
let config = require('../nuxt.config.js')
config.dev = !(process.env.NODE_ENV === 'production')

async function start() {
  // Init Nuxt.js
  const nuxt = new Nuxt(config)
  const { host, port } = nuxt.options.server

  // Build only in dev mode
  if (config.dev) {
    const builder = new Builder(nuxt)
    await builder.build()
  } else {
    await nuxt.ready()
  }

  app.use('/api', apiRouter)  // 追記

  // Give nuxt middleware to express
  app.use(nuxt.render)

  // Listen the server
  app.listen(port, host)
  consola.ready({
    message: `Server listening on http://${host}:${port}`,
    badge: true
  })
}
start()

herokuアプリ作成

cd noracorn-heroku-nuxt
heroku create noracorn-heroku-nuxt

heroku設定

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

herokuのbuildpacks設定

heroku buildpacks:set heroku/nodejs

AxiosのURLを設定

heroku config:set API_URL=$(heroku info -s | grep web_url | cut -d= -f2)

herokuに反映

heroku plugins:install heroku-config 
heroku config:push

githubの設定

githubで、noracorn-heroku-nuxtのリポジトリを作成しておく

git init
git add .
git commit
git remote add origin https://github.com/noracorn/noracorn-heroku-nuxt.git
git push origin master

herokuにデプロイ

git push heroku master

確認

https://noracorn-heroku-nuxt.herokuapp.com/
https://noracorn-heroku-nuxt.herokuapp.com/api/otameshi

記事作成時に参考にさせていただきました。

https://qiita.com/kawaMk4/items/298f95f751540b96d39b
https://qiita.com/ta1nakamura/items/3d799d1176c15885cc6f

サイドリポジトリを落としたときなのに紐づけ直し

heroku git:remote --app noracorn-heroku-nuxt