Qiita Teams that are logged in
You are not logged in to any team

Log in to Qiita Team
Community
OrganizationEventAdvent CalendarQiitadon (β)
Service
Qiita JobsQiita ZineQiita Blog
2
Help us understand the problem. What are the problem?

More than 3 years have passed since last update.

APIを含むNuxt.jsをHerokuへデプロイ

Heroku 設定

//App作成, _ は使えないので注意
$ heroku create {name}

//共通で必要な環境変数設定
$ heroku config:set NPM_CONFIG_PRODUCTION=false
$ heroku config:set HOST=0.0.0.0
$ heroku config:set NODE_ENV=production

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

//mongodbをmlabで利用する場合
$heroku addons:create mongolab:sandbox

//.envをherokuへ反映
$ heroku plugins:install heroku-config   //install 
$ heroku config:push

設定ファイル修正

nuxt.config.js


//setBaseURL for Axios
var env = process.env.NODE_ENV || 'development';
if (env === 'development' || env === 'test') {
  var API_URL='http://localhost:3000'
}
else{
  var API_URL=process.env.API_URL
}
module.exports = {
・・・・・
axios: {
    baseURL:API_URL
  },
・・・・・

package.json に追記 "heroku-postbuild"

  "scripts": {
    "dev": "nuxt",
    ・・略・・
    "heroku-postbuild": "npm run build" //追記
  },

git commit 後、Heroku へデプロイ

$ git add .
$ git commit -m " comment for heroku deploy"
$ git push heroku master

参考サイト

http://dackdive.hateblo.jp/entry/2016/01/26/121900
https://ja.nuxtjs.org/faq/heroku-deployment/

Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
2
Help us understand the problem. What are the problem?