これは何
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
このような画面が表示されたでしょうか。
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がにアプリケーション起動時に実行するコマンドです。
build は startの前にビルドしてもらうために記載します。
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