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
22
Help us understand the problem. What are the problem?

More than 1 year has passed since last update.

posted at

Vue.jsのアプリケーションを手早くHerokuで公開する

これは何

Vue.jsのアプリケーションを素早くHerokuで公開することを目指します。
利用シーンとしては、プロトタイプを素早く作成して誰かに見せたり、何かやった感を得たい場合を想定しています。

開発環境の確認

以降の手順ではそれぞれ以下の環境を前提として進めていきます。
異なる場合はうまくいかないかもしれないのでご注意ください。

  • Node.js (10.x)
  • Yarn (1.13.0) ※npmを使用する場合は各所のコマンドを読み替えてください
  • Vue CLI (3.x)
  • Heroku CLI (7.x)
  • Git
$ node -v
v10.15.0

$ yarn -v
1.13.0

$ vue -V
3.4.1

$ heroku -v
heroku/7.22.0 darwin-x64 node-v11.9.0

Vue CLIが無い場合は以下のコマンドでインストールできます(詳しくは公式サイトをご参照ください)。

$ yarn global add @vue/cli

手順

アプリケーションの作成

vue create を実行するだけです。任意の作業ディレクトリで以下を実行しましょう。

$ vue create my-app

手元で動かすだけならこれで完了です。 yarn serve を実行するとアプリケーションが起動し、ブラウザでlocalhost:8080にアクセスすると確認することができます。

$ yarn serve

このような画面が表示されたでしょうか。

スクリーンショット 2019-02-23 16.13.00.png

Webサーバーを用意する

Herokuで動作させるためにExpressを導入します。package.jsonにも自動的に記載されます。

$ yarn add express

Expressの設定ファイルを用意します。

$ touch server.js

server.jsには以下のように記述します。

server.js
const express = require('express');
const port = process.env.PORT || 8080;
const app = express();
app.use(express.static(__dirname + "/dist/"));
app.listen(port);

package.jsonに以下を追記します。
start はHerokuがにアプリケーション起動時に実行するコマンドです。
buildstartの前にビルドしてもらうために記載します。

package.json
"scripts": {
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build",
    "lint": "vue-cli-service lint",
    "postinstall": "yarn build",
    "start": "node server.js"
  }

Herokuにデプロイする準備はできました。
あとはHerokuにログインしてアプリケーションを作成し、デプロイしましょう。お疲れ様でした!!

$ heroku login
$ heroku create
$ git push heroku master
$heroku open

参考文献

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
22
Help us understand the problem. What are the problem?