Vue.js + Express + Herokuでwebアプリを作る

Vue.js Express heroku

フロントエンドはVue.jsで作ります。 本記事はとりあえずVue.jsプロジェクトを作成して、Herokuで見られるようにするところまでの手順をまとめます。

前提

  • 開発マシンにNode.jsがインストール済み
  • 開発マシンでnpmが使える

Vue.jsプロジェクトの作成

まず、vue-cliをインストールします。ローカルマシンでのみグローバルに使うのでオプションは-gにしてます。

$ npm install -g @vue/cli

次に開発を行うディレクトリに移動し、次のコマンドを叩きます。

$ vue create .

カレントディレクトリにVueプロジェクトを構築したかったので、「.」を指定していますが、新規でディレクトリを作りたければ「.」を「ディレクトリ名」に置き換えてください。ディレクトリ名を指定すると、ディレクトリ名のディレクトリを作成して、その中にVueプロジェクトを構築してくれます。

Webサーバーの構築

Herokuで公開するためにWebサーバーをExpressで構築します。 app.jsファイルに以下を記述。

/* app.js */
var express = require('express');
var app = express();

app.set('port', (process.env.PORT || 8080));
app.use(express.static(__dirname + '/dist/'));
app.listen(app.get('port'));

package.jsonの修正

Herokuがアプリ起動時に実行する処理をpackage.jsonに記載します。

/* package.json */
...........(略)..................
"scripts": {
    ...........(略)..................
    "start": "node app.js"        // ←この行を追加
  },
...........(略)..................

Gitにアップロード/デプロイ

あとはgitにpushして、Heroku上でデプロイをするだけです。 アプリのURLにアクセスすると、Vueのデフォルトのトップ画面(「Welcome to Your Vue.js App」というページ)が見られると思います。

ローカルで試したい場合には

$ npm run build
$ npm run serve

を実行後、ブラウザで「http://localhost:8080/」にアクセスすると見ることができます。