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
31
Help us understand the problem. What is going on with this article?

More than 1 year has passed since last update.

@pentla

Nuxt + Herokuで簡単にデプロイする

Vue.jsでフロント側を開発していて、デプロイ周りをどうするか悩ましいのですが、Herokuを使うことで、ネットワーク関連の難しいことを考えることなく、作成したサイトを公開することができます。無料版でデプロイまで可能なので、簡単なサイトを作成しつつ、デプロイするまでを順に説明していこうと思います。

Heroku へデプロイするには? - Nuxt.js

こちらのサイトに概要が書いてあるのですが、プロジェクトを作ってデプロイするまでの流れを書いていこうと思います。

Nuxtでサイト作成

まずはNuxtをインストールします。

$ npm install --save nuxt

webpackを導入しなくてもVueのTemplateを実行してくれるのがNuxtのいいところですね。
各ページは/pagesの中に作っていけばそれがそのままページになります。今回はページ遷移を見るために2つページを作成します。

ディレクトリ構成は以下のようになります。

root/
 ├ .nuxt/
 ├ node_modules/
 ├ pages/
 │ ├ detail.vue
 │ └ index.vue
 ├ package.json
 └  package-lock.json/

pages/index.vue

<template>
  <div>
    <h2>Hello Nuxt.js</h2>
    <nuxt-link to="/detail">detail</nuxt-link>
  </div>
</template>

pages/detail.vue

<template>
  <div>this is detail.vue</div>
</template>

一度起動させてみましょう。

$ npm run nuxt

スクリーンショット 2018-12-14 21.04.25.png

指定されたlocalhostを開きます。

スクリーンショット 2018-12-14 21.06.57.png

detailを押してページ遷移が機能するかも試します。

スクリーンショット 2018-12-14 21.08.25.png

遷移できていますね。
作成が一通り終わったところでデプロイの作業に移ります。

Herokuでのプロジェクト作成

ページが一通りできたところでherokuのプロジェクトを作成します。
はじめに、デプロイにはGitを利用するので、Git管理不要な.nuxtディレクトリとnode_modulesディレクトリは.gitignoreに入れましょう。

.gitignore

node_modules/
.nuxt/

準備ができたらブラウザ上で、Herokuにログインします。
こちらがプロジェクトの作成した後のダッシュボード画面です。samplenuxtというプロジェクト名にしました。

スクリーンショット 2018-12-13 13.57.40.png

次にしていくのはheroku-cliの導入です。
https://devcenter.heroku.com/articles/heroku-cli#download-and-install

こちらを参考にします。公式サイトにあるダウンローダー形式でも実行できます。

$ brew install heroku/brew/heroku

インストールしたHeroku Cliを使ってログインします。

$ heroku login

ブラウザが開くのでそこからログインします。
スクリーンショット 2018-12-14 20.27.34.png

終わるとCli上でもログインが完了しています。
あとは、Git上でHerokuを登録していきます。

$ git init
$ heroku git:remote -a samplenuxt

これでHerokuとの連携は完了です。

ここからは少し設定が必要です。
最初に紹介したNuxt.jsのドキュメントを見ながら、設定項目を加えていきます。

Heroku へデプロイするには? - Nuxt.js

Herokuのsettingsセクションから、環境変数を設定します。

スクリーンショット 2018-12-14 20.49.56.png

package.jsonに以下の項目を加えます。

"scripts": {
  "dev": "nuxt",
  "build": "nuxt build",
  "start": "nuxt start",
  "heroku-postbuild": "npm run build"
}

あとはコミットして、Herokuにプッシュすれば反映されます。

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

あとは、Heroku側がNuxtのプロジェクトであることを検知して、デプロイのための作業を行ってくれます。
この時点でHerokuへのプッシュが完了しています。

スクリーンショット 2018-12-14 20.54.30.png

右上の「Open app」を押せばデプロイしたアプリケーションが開きます。

画面が表示されない場合、画面右上の「More」からView Logsを開けばデプロイ時のログをみることができます。

スクリーンショット 2018-12-14 20.56.21.png

以上でデプロイが終わりです。

31
Help us understand the problem. What is going on with this article?
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
31
Help us understand the problem. What is going on with this article?