LoginSignup
7
4

More than 3 years have passed since last update.

nuxtのサブディレクトリをHerokuにデプロイする方法

Last updated at Posted at 2019-09-01

nuxtのアプリケーションをデプロイしたい場合、Herokuを使って簡単に立ち上げることができます。

例えば以下のようなnuxtのディレクトリ構造がある場合(docker使ってるならimageデプロイしたほうがいいのはおいておいて)

├── docker/nuxt.js
│   ├── assets
│   ├── components
│   ├── pages
│   ├── ....
│   ├── nuxt.config.js
│   ├── package.json
│   ├── Procfile <- Heroku で必要となる、アプリケーションの起動に関するファイル
│   ├── yarn.lock
│   ├── README.md
├── package.json
├── docker-compose.yml

サブディレクトリに移動してherokuアプリをつくる

cd docker/nuxt.js && heroku create sample-nuxt-app

heroku-buildpack-monorepoを追加

heroku buildpacks:add -a sample-nuxt-app https://github.com/lstoll/heroku-buildpack-monorepo

サブディレクトリのパスをconfigに追加

heroku config:add APP_BASE=docker/nuxt.js -a sample-nuxt-app

nodeのbuildpacksを追加

heroku buildpacks:add heroku/nodejs

remote repository を登録

heroku git:remote -a sample-nuxt-app

envを登録

heroku config:set NPM_CONFIG_PRODUCTION=false
heroku config:set HOST=0.0.0.0
heroku config:set NODE_ENV=production
heroku config:set API_HOST={任意のドメインなど}

Procfileを作成

docker/nuxt.js/Procfile
web: npm start

deployを実行

git push heroku master

※ gitの master ブランチじゃなく develop ブランチをデプロイしたい場合

git push heroku develop:master --force

起動確認

open https://sample-nuxt-app.herokuapp.com/

補足

configを削除

heroku config:unset {削除したいenv名} -a sample-nuxt-app
heroku config:unset buildpacks -a sample-nuxt-app

buildpacksを削除

heroku buildpacks:clear -a sample-nuxt-app

参考資料

7
4
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
7
4